Navigation · Tabs
Tabs
When the content needs to be grouped and displayed in different modules or pages, you could use Tabs to switch between different groups or pages

Demos

How to import

Basic Usage

Tbs supports three types of styles: line, button, and card. By default, the first tab is selected.
Tabs supports two declare ways, and the rendering process of the two is different:
  • Pass the array of objects through tabList, when using tabList, only render the currently passed node each time
  • Or use <TabPane> to explicitly pass in item by item. When using <TabPane>, all panels will be rendered by default. You can set keepDOM={false} to only render the current panel, and there will be no animation effect at this time .
Notice
1. When tabList and TabPane Children are used at the same time, the data passed in through tabList will be rendered first. It is not recommended to configure both
2. When using TabPane Children, TabPane must be a direct child element of Tabs, otherwise Tabs will not be able to correctly collect related attributes such as itemKey and other subcomponents

With Icon

More with Dropdown

Supports merging redundant tabs into a more drop-down menu. Just pass in a number for more. The number represents the number of tabs included in the drop-down menu. (>=v2.59.0)
Advanced configuration is also supported, passing the object to more, and it can be passed in
  • count: Represents the number of Tabs in the income drop-down menu
  • render: Customize the rendering function of Trigger. The returned ReactNode will be rendered as the Trigger of the drop-down menu.
  • dropdownProps: Incoming DropDown Props will be transparently transmitted to the drop-down menu. If you need to customize the drop-down menu, use the render method in dropdownProps

Vertical mode

Support two positions: tabPosition='left|top'

Scrollable Tabs

v>= 1.1.0
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

PropertyDescriptionTypeDefault Value
activeKeyThe itemKey value of the currently active tab pagestringNone
classNameclass namestringNone
collapsiblecollapsed Tabs, >=1.1.0booleanfalse
contentStyleThe outer style object of the content areaCSSPropertiesNone
defaultActiveKeyInitialize the key value of the selected tab pagestring'1'
keepDOMWhether to render the DOM structure of the hidden panel when using TabPane writing, >=1.0.0booleantrue
lazyRenderLazy rendering, only when the panel is activated will it be rendered in the DOM tree, >=1.0.0booleanfalse
moreRender a portion of the Tab into a drop-down menu >= 2.59.0number | {count:number,render:()=>ReactNode,dropdownProps:DropDownProps}-
renderTabBarUsed for secondary packaging tab bar(tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNodeNone
preventScrollIndicates 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 userboolean
sizeSize, providing three types of large, medium, and small, >=1.11.0, currently only supports linear Tabsstringlarge
stylestyle objectCSSPropertiesNone
tabBarExtraContentUsed to extend the content of the tab barReactNodeNone
tabListAn array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon)TabPane[]None
tabPaneMotionWhether to use animation to switch tabsbooleantrue
tabPositionThe position of the tab, support top (horizontal), left (vertical), >=1.0.0stringtop
typeThe style of the label bar, optional line, card, buttonstringline
onChangeCallback function when switching tab pagesfunction(activeKey: string)None
onTabClickClick eventfunction(key: string, e: Event)None
onTabCloseexecuted when tab closed by user, >=2.1.0function(tabKey: string)None

TabPane

PropertyDescriptionTypeDefault Value
classNameclass namestringNone
disabledWhether the tab bar is disabledbooleanNone
iconTab bar iconReactNodeNone
itemKeycorresponding to activeKeystringNone
stylestyle objectCSSPropertiesNone
tabTab page bar display textReactNodeNone
closablewhether user can close the tab >=2.1.0booleanfalse

Accessibility

ARIA

  • About role
    • TabBar has a role of tablist
    • Tab in TabBar has a role of tab
    • TabPane has a role of tabpanel
  • aria-orientation: Indicates TabBar's orientation, can be vertical or horizontal. When tabPosition is left,aria-orientation will be vertical, when tabPosition is top, aria-orientation will be horizontal.
  • 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 Tab key to move the focus to the tab panel of the selected tab element
  • Use left and right arrows to toggle options when focus is on a tab element in a horizontal tab list
  • Use up and down arrows to 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 Space or Enter keys 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
  • When keyboard users want to focus directly on the first tab element in the tab list:
    • Mac users: fn + left arrow
    • Windows users: Home
  • When a tab is allowed to be deleted:
    • Users can use Delete keys 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

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。