Tabs
Tabs help to organize related content in a single view which user make easy to explore and switch between different views.
Default
Default Tabs usage.
Home
Profile
Contact
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
Pill
You can change the Tabs style by setting
variant to pill.Home
Profile
Contact
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
Icons
TabNav
icon prop allow us to insert icon with auto spaced.Home
Profile
Contact
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
Disabled
Set
disabled to TabNav prevent user execute click event.Home
Profile
Contact
Home
Profile
Contact
Controlled Tabs
Example of controlled Tabs.
Home
Profile
Contact
If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)
API
Tabs
| Prop | Description | Type | Default |
|---|---|---|---|
| defaultValue | Initial value for uncontrolled Tabs | string | - |
| onChange | Callback when Tab value is changed | (tabValue: string) => void | - |
| value | Controlled value of the tab to activate | string | - |
| variant | Tabs style | 'underline' | 'pill' | - |
Tabs.TabList
| Prop | Description | Type | Default |
|---|
Tabs.TabNav
| Prop | Description | Type | Default |
|---|---|---|---|
| disabled | Whether to disable the tab | boolean | - |
| icon | Tab icon | ReactNode | string | - |
| value(*) | An unique value matched with TabContent | string | - |
Tabs.TabContent
| Prop | Description | Type | Default |
|---|---|---|---|
| value(*) | An unique value matched with TabNav | string | - |