Tabs

Generate a tab by providing an array.

JSON Example

{
  "vizName": "tabs",
  "dataSourceID": "RPT.ADC.ThunderDashBoardTabs",
  "showAll": true
}

Props

Name	Type	Default Value	Required	Description
data	string[]	[]	no	Tab's data source. Tab titles will be ordered in the same sequence as array.
showAll	boolean	true	no	Set true to show "Show All" on right side of tabs. False to omit rendering of "Show All"
color	string	'#686868'	no	Set the font color of tabs with this prop value.
borderBottomColor	string	'4a90e2'	no	Set the bottom underline tab color with this prop value.
dispatchAction	string	'VIZ.TABS.CLICK'	no	Set the dispatch action. Default action is 'VIZ.TABS.CLICK'

Usage Example

Viz Props

import React from 'react'

import { Viz } from 'a10-gui-dgp-viz'

const { Tabs } = Viz
export const MyDashboard = () => {
  return (
    <Tabs
      name="Tabs"
      data=[
        'SLB', 
        'SSL', 
        'Caching', 
        'Fast HTTP', 
        'HTTP', 
        'HTTP 2', 
        'Connection Reset', 
        'Persistence', 
        'Compression'
        ] 
      showAll={true}
    />
  )
}

Props Interface

interface TabsProps {
  data?: string[]
  showAll?: boolean
  color?: string
  borderBottomColor?: string
  dispatchAction?: string
}

UI JSON

{
  "vizName": 'Tabs',
  "dataSourceID": "RPT.ADC.ThunderDashBoardTabs",
  "showAll": true,
  "borderBottomColor": '#4a90e2',
  "color": '#686868',
  "dispatchAction": 'VIZ.TABS.CLICK',
}

Data Structure

string[]

Data Structure Example

const data = ['SLB', 'SSL', 'Caching', 'Fast HTTP', 'HTTP', 'HTTP 2', 'Connection Reset', 'Persistence', 'Compression'] 

Actions

VIZ.TABS.CLICK

Name	Type	Description
type	string	The action type
tabName	string	Name of tab