Demos
How to import
Basic Usage
Tbs supports three types of styles:
line, button, and card. By default, the first tab is selected. You could use either tabList to pass in an array of tabs objects, or use <TabPane> to create each tab. Mixed usage of two ways is not recommended and data in tabList will be rendered with priority.When you usetabList, only the current active tab will be rendered. For<TabPane>, all tabs will be rendered in DOM tree by default. You could setkeepDOM={false}to only render current panel. No animation will be displayed in this case.
With Icon
Vertical mode
Support two positions:
tabPosition='left|top'Scrollable Tabs
v>= 1.1.0
You could use
You could use
collapsible for a scrollable tabs with dropdown menu. Horizontal mode only.Disable
Disable one tab.
Extra Content
Use
tabBarExtraContent to add extra content on the right side of tabBar.Custom Render
Use
renderTabBar to customize tabBar render behavior.Dynamic Update
You can add events to update tabBar dynamically.
Closeable
Close a tab in the tab bar.
Only card style tabs support the close option. Use
closable={true} to turn it on.API Reference
Tab
| Property | Description | Type | Default Value |
|---|---|---|---|
| activeKey | The itemKey value of the currently active tab page | string | None |
| className | class name | string | None |
| collapsible | collapsed Tabs, >=1.1.0 | boolean | false |
| contentStyle | The outer style object of the content area | CSSProperties | None |
| defaultActiveKey | Initialize the key value of the selected tab page | string | '1' |
| keepDOM | Whether to render the DOM structure of the hidden panel when using TabPane writing, >=1.0.0 | boolean | true |
| lazyRender | Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, >=1.0.0 | boolean | false |
| renderTabBar | Used for secondary packaging tab bar | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | None |
| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean | |
| size | Size, providing three types of large, medium, and small, >=1.11.0, currently only supports linear Tabs | string | large |
| style | style object | CSSProperties | None |
| tabBarExtraContent | Used to extend the content of the tab bar | ReactNode | None |
| tabList | An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon) | TabPane[] | None |
| tabPaneMotion | Whether to use animation to switch tabs | boolean | true |
| tabPosition | The position of the tab, support top (horizontal), left (vertical), >=1.0.0 | boolean | top |
| type | The style of the label bar, optional line, card, button | string | line |
| onChange | Callback function when switching tab pages | function(activeKey: string) | None |
| onTabClick | Click event | function(key: string, e: Event) | None |
| onTabClose | executed when tab closed by user, >=2.1.0 | function(tabKey: string) | None |
TabPane
| Property | Description | Type | Default Value |
|---|---|---|---|
| className | class name | string | None |
| disabled | Whether the tab bar is disabled | boolean | None |
| icon | Tab bar icon | ReactNode | None |
| itemKey | corresponding to activeKey | string | None |
| style | style object | CSSProperties | None |
| tab | Tab page bar display text | ReactNode | None |
| closable | whether user can close the tab >=2.1.0 | boolean | false |
Accessibility
ARIA
- About role
- TabBar has a role of
tablist - Tab in TabBar has a role of
tab - TabPane has a role of
tabpanel
- TabBar has a role of
- aria-orientation: Indicates TabBar's orientation, can be
verticalorhorizontal. When tabPosition isleft,aria-orientation will bevertical, when tabPosition istop, aria-orientation will behorizontal. - aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.
- aria-selected: Indicates whether the Tab is selected.
- aria-controls: Indicates the TabPane controlled by the Tab
- aria-labelledby: Indicates the element labels the TabPane
Keyboard and Focus
- Tabs can be given focus, except for disabled tabs
- Keyboard users can use the
Tabkey to move the focus to the tab panel of the selected tab element - Use
left and right arrowsto toggle options when focus is on a tab element in a horizontal tab list - Use
up and down arrowsto toggle options when focus is on a tab element in a vertical tab list - When the focus is on an inactive tab element in the tab list, the
SpaceorEnterkeys can be used to activate the tab - When keyboard users want to focus directly on the last tab element in the tab list:
- Mac users:
fn+right arrow - Windows users:
End
- Mac users:
- When keyboard users want to focus directly on the first tab element in the tab list:
- Mac users:
fn+left arrow - Windows users:
Home
- Mac users:
- When a tab is allowed to be deleted:
- Users can use
Deletekeys to delete tab - After deletion, the focus is transferred to the next element of the deleted tab element; if the deleted element has no subsequent element, it is transferred to the previous element
- Users can use
Content Guidelines
- Label copy needs to explain the label content accurately and clearly
- Use short, easily distinguishable labels
- try to stay within one word
Design Token
FAQ
- Why typography with ellipses in Tabs doesn't work?Because when Tabs renders TabPane, the default is to render display: none. At this point these components cannot get the correct width or height values. It is recommended to enable lazyRender in version 1.x, or disable keepDOM. Version 0.x needs to use tabList notation.
- Why are the height or width values โโwrong when using components such as Collapse/Collapsible/Resizable Table in Tabs?The reason is the same as above. In addition, if the collapse does not need animation, you can also turn off the animation effect by setting motion={false}. There is no need to get the height of the component at this pointใ
