Tabs
Display tab content.
The Tabs contain an additional Hooks, see subsection useTabs for details.
General
Toggle display of different templates.
Disabled
You can change disabled Tabs with the property disabled.
Hide Divider
Tabs component with a hide divider functionality.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Hide Border
Tabs component with a hide border functionality.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
With Icon
Show icon component on label button.
Hello, this is my profile.
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.)
Hello!
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 |
Previous
Table
Next
Tag
