Tabs allow the user to interact across the sections to switch from one set of content to another, making the transition easily from one peer to the other.
Name | Default | Description |
---|---|---|
tabs: object[] | An array of objects representing the tabs. Each of them has the following properties:
| |
iconPosition: 'top' | 'left' | 'top' | Whether the icon should appear above or to the left of the label. |
defaultActiveTabIndex: number | Initially active tab, only when it is uncontrolled. | |
activeTabIndex: number | The index of the active tab. If undefined, the component will be uncontrolled and the active tab will be managed internally by the component. | |
onTabClick: function | This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter. | |
onTabHover: function | This function will be called when the user hovers a tab.The index of the hovered tab will be passed as a parameter. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | |
tabIndex: number | 0 | Value of the tabindex for each tab. |