Tabs
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 | Type | Description | Default |
---|---|---|---|
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. | - |
Required | { label: string, icon: string | (React.ReactNode & React.SVGProps <SVGSVGElement>), isDisabled: boolean, notificationNumber: boolean | number }[] | An array of objects representing the tabs. Each of them has the following properties:
| - |
iconPosition | 'top' | 'left' | Whether the icon should appear above or to the left of the label. | 'top' |
onTabClick | (index: number) => void | 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 | (index: number) => void | This function will be called when the user hovers a tab. The index of the hovered tab will be passed as a parameter. | - |
margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
tabIndex | number | Value of the tabindex attribute applied to each tab. | 0 |