Tabs
A component to display content grouped into different sections. Only one section can be displayed at a time - the active tab panel. Each content section is independent and has a corresponding tab element, that when activated, makes the content visible.
Tabs can have horizontal or vertical layouts. To build Tabs, use:
Tab- the tappable element that sets active content to display.TabList- an optional element to wrap all tab elements for styling purposesTabPanel- the content section to show or hide, depending on the active tab.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| activeId | String |Number | Selected tab index number or key string (for controlled state) | |
| defaultId | String |Number | Default selected tab index number or key string (for uncontrolled state to load initially) | |
| children | String |Number |Boolean |Function | Tab content (see example) | |
| onChange | Function | Callback(event, activeId: string, lastId: string) whenever tab changes, where ids could be indices | |
| rtl | Boolean | Whether to use Right-to-Left direction | |
| vertical | Boolean | Whether to use vertical orientation for Tabs | |
| forceRender | Boolean | Whether to always render all Tab Panels - can be set individually (useful for SEO indexing) | |
| items | Array | Alternative way to define Tabs and Panels as a single array | |
| tabListProps | Object | TabList props to pass |
Examples
Tab Panel 1
Tab Panel C forceRender
Tab Panel A
Tab Panel 1
Tab Panel C controlled