Tabs
Display tab content.
The Tabs contain an additional Hooks, see subsection useTabs for details.
General
Toggle display of different templates.
Disabled
Hide Divider
Hide Border
With Icon
Show icon component on label button.
Scroll Behavior
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.)
Imperatively
Control components with imperatively style.
APIs
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 | - | - |
| activeStyles | 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 |
Contributors