Display tab content.
The Tabs contain an additional Hooks, see subsection useTabs for details.
Toggle display of different templates.
Show icon component on label button.
If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)
Control components with imperatively style.
Tabs.Props| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| initialValue | initial value | string | - | - |
| value | current selected value | string | - | - |
| hideDivider | hide default divider | boolean | - | false |
| hideBorder | hide border on active | boolean | - | false |
| leftSpace | space area on the left side | CSSProperties | - | 12px |
| onChange | change event | (val: string) => void | - | - |
| align | horizontal alignment of each child item | justifyContent | - | left |
| activeClassName | className of active child item | string | - | - |
| activeStyle | style of active child item | object | - | - |
| hoverHeightRatio | height percentage of highlight block | number | - | 0.7 |
| hoverWidthRatio | width percentage of highlight block | number | - | 1.15 |
| ... | native props | HTMLAttributes | 'alt', 'id', 'className', ... | - |
Tabs.Item.Props[alias: Tabs.Tab]| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| label(required) | display tab's label | string | - | - |
| value(required) | unique ident value | string | - | - |
| disabled | disable current tab | boolean | - | false |