components
Tabs
v.1.0.0 | SaturnUsage
1
import { Tabs } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the Tabs component by examining all its avalaible props.
Tabs UnControlled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant |
| defaultSelectedTab | Number | 0 | Default tab selected |
| tabs | PrimaryTabTabType | - | List of tabs |
| content | ReactNode | - | Content for each tab |
| onSelectTab | (index: Number) => void | - | onSelectTab callback |
| leftIcon | IElementOrIcon | - | Left icon of the tab |
| leftControlAriaLabel | String | - | Left icon button aria-label |
| rightIcon | IElementOrIcon | - | Right icon of the tab |
| rightControlAriaLabel | String | - | Right icon button aria-label |
| allowFocusTabPanel | Boolean | true | When true, the tabpanel has tabIndex 0 in order to allow focus on it |
| autoWidth | Boolean | false | When true, tab width is auto, else "100%/numOptions" |
| maxTabsInView | Number | 3 | When mobile, max Number of tabs to show |
| minTabsInView | Number | 2 | When mobile, if the Number of options is equal to this value, show all tabs in the view |
| hideLabelForSingleTab | Boolean | 2 | Boolean to hide label if it is a single tab |
| unMountContent | Boolean | 2 | Boolean to hide unmount or not the content of tabs |
| dataTestId | String | primaryTab | Test id of the component |
| ctv | TabsVariantStylesType | - | Modify styles for the default version of the component |
Tabs Controlled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant |
| selectedTab | Number | 0 | Default tab selected |
| tabs | PrimaryTabTabType | - | List of tabs |
| content | ReactNode | - | Content for each tab |
| onSelectTab | (index: Number) => void | - | onSelectTab callback |
| leftIcon | IElementOrIcon | - | Left icon of the tab |
| leftControlAriaLabel | String | - | Left icon button aria-label |
| rightIcon | IElementOrIcon | - | Right icon of the tab |
| rightControlAriaLabel | String | - | Right icon button aria-label |
| allowFocusTabPanel | Boolean | true | When true, the tabpanel has tabIndex 0 in order to allow focus on it |
| autoWidth | Boolean | false | When true, tab width is auto, else "100%/numOptions" |
| maxTabsInView | Number | 3 | When mobile, max Number of tabs to show |
| minTabsInView | Number | 2 | When mobile, if the Number of options is equal to this value, show all tabs in the view |
| hideLabelForSingleTab | Boolean | 2 | Boolean to hide label if it is a single tab |
| unMountContent | Boolean | 2 | Boolean to hide unmount or not the content of tabs |
| dataTestId | String | primaryTab | Test id of the component |
| ctv | TabsVariantStylesType | - | Modify styles for the default version of the component |