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. 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 use tabList, only the current active tab will be rendered. For <TabPane>, all tabs will be rendered in DOM tree by default. You could set keepDOM={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 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
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.0booleantop
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。

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED