Tabs
Tabs
Tabs make it easy to explore and switch between different views.
Importimport{ Tabs }from"antd"; |
Sourcecomponents/tabs |
When To Use
Ant Design has 3 types of Tabs for different situations.
- Card Tabs: for managing too many closeable views.
- Normal Tabs: for functional aspects of a page.
- Radio.Button: for secondary tabs.
Examples
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Default activate first tab.
Tab 1
Tab 2
Tab 3
Tab 1
Disabled a tab.
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Centered tabs.
Tab 1
Tab 2
Tab 2
The Tab with Icon.
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Set indicator prop to custom indicator size and align.
Tab-0
Tab-1
Tab-2
Tab-3
Tab-4
Tab-5
Tab-6
Tab-7
Tab-8
Tab-9
Tab-10
Tab-11
Tab-12
Tab-13
Tab-14
Tab-15
Tab-16
Tab-17
Tab-18
Tab-19
Tab-20
Tab-21
Tab-22
Tab-23
Tab-24
Tab-25
Tab-26
Tab-27
Tab-28
Tab-29
Content of tab 1
In order to fit in more tabs, they can slide left and right (or up and down).
Tab 1
Tab 2
Tab 3
Content of tab 1
You can also specify its direction or both side
Tab 1
Tab 2
Tab 3
Content of tab 1
You can add extra actions to the right or left or even both side of Tabs.
Tab 1
Tab 2
Tab 3
Content of tab 1
Card Tab 1
Card Tab 2
Card Tab 3
Content of card tab 1
Tab 1
Tab 2
Tab 3
Content of editable tab 1
Large size tabs are usually used in page header, and small size could be used in Modal.
Tab position:
Tab 1
Tab 2
Tab 3
Content of Tab 1
Tab's position: left, right, top or bottom. Will auto switch to top in mobile.
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Another type of Tabs, which doesn't support vertical mode.
Tab 1
Tab 2
Tab 3
Content of Tab 1
Only card type Tabs support adding & closable. +Use closable={false} to disable close.
Tab 1
Tab 2
Content of Tab Pane 1
Hide default plus icon, and bind event for customized trigger.
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Use react-sticky-box and renderTabBar.
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Use dnd-kit to make tabs draggable.
API
Common props ref：Common props
Tabs
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| activeKey | Current TabPane's key | string | - | |
| addIcon | Customize add icon, only works with type="editable-card" | ReactNode | <PlusOutlined /> | 4.4.0 |
| animated | Whether to change tabs with animation. | boolean | { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
| centered | Centers tabs | boolean | false | 4.4.0 |
| defaultActiveKey | Initial active TabPane's key, if activeKey is not set | string | The key of first tab | |
| hideAdd | Hide plus icon or not. Only works while type="editable-card" | boolean | false | |
| indicator | Customize size and align of indicator | { size?: number | (origin: number) => number; align: start | center | end; } | - | 5.13.0 |
| items | Configure tab content | TabItemType | [] | 4.23.0 |
| more | Customize the collapse menu | MoreProps | { icon: <EllipsisOutlined /> , trigger: 'hover' } | |
| removeIcon | The custom icon of remove, only works with type="editable-card" | ReactNode | <CloseOutlined /> | 5.15.0 |
| popupClassName | className for more dropdown. | string | - | 4.21.0 |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | large | middle | small | middle | |
| tabBarExtraContent | Extra content in tab bar | ReactNode | {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
| tabBarGutter | The gap between tabs | number | - | |
| tabBarStyle | Tab bar style object | CSSProperties | - | |
| tabPosition | Position of tabs | top | right | bottom | left | top | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | |
| type | Basic style of tabs | line | card | editable-card | line | |
| onChange | Callback executed when active tab is changed | (activeKey: string) => void | - | |
| onEdit | Callback executed when tab is added or removed. Only works while type="editable-card" | (action === 'add' ? event : targetKey, action) => void | - | |
| onTabClick | Callback executed when tab is clicked | (key: string, event: MouseEvent) => void | - | |
| onTabScroll | Trigger when tab scroll | ({ direction: left | right | top | bottom }) => void | - | 4.3.0 |
More option at rc-tabs tabs
TabItemType
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| closeIcon | Customize close icon in TabPane's head. Only works while type="editable-card". 5.7.0: close button will be hidden when setting to null or false | ReactNode | - | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | 5.11.0 |
| disabled | Set TabPane disabled | boolean | false | |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | |
| key | TabPane's key | string | - | |
| label | TabPane's head display text | ReactNode | - | |
| icon | TabPane's head display icon | ReactNode | - | 5.12.0 |
| children | TabPane's head display content | ReactNode | - | |
| closable | Whether a close (x) button is visible, Only works while type="editable-card" | boolean | true |
MoreProps
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| icon | The custom icon | ReactNode | - | |
| DropdownProps |
Design Token
Component TokenHow to use?
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| cardBg | Background color of card tab | string | rgba(0,0,0,0.02) |
| cardGutter | Gutter of card tab | number | 2 |
| cardHeight | Height of card tab | string | number | 40 |
| cardPadding | Padding of card tab | string | 8px 16px |
| cardPaddingLG | Padding of large card tab | string | 8px 16px 6px |
| cardPaddingSM | Padding of small card tab | string | 6px 16px |
| horizontalItemGutter | Horizontal gutter of horizontal tab | number | 32 |
| horizontalItemMargin | Horizontal margin of horizontal tab item | string | |
| horizontalItemMarginRTL | Horizontal margin of horizontal tab item (RTL) | string | |
| horizontalItemPadding | Horizontal padding of horizontal tab item | string | 12px 0 |
| horizontalItemPaddingLG | Horizontal padding of large horizontal tab item | string | 16px 0 |
| horizontalItemPaddingSM | Horizontal padding of small horizontal tab item | string | 8px 0 |
| horizontalMargin | Horizontal margin of horizontal tab | string | 0 0 16px 0 |
| inkBarColor | Color of indicator | string | #1677ff |
| itemActiveColor | Text color of active tab | string | #0958d9 |
| itemColor | Text color of tab | string | rgba(0,0,0,0.88) |
| itemHoverColor | Text color of hover tab | string | #4096ff |
| itemSelectedColor | Text color of selected tab | string | #1677ff |
| titleFontSize | Font size of title | number | 14 |
| titleFontSizeLG | Font size of large title | number | 16 |
| titleFontSizeSM | Font size of small title | number | 14 |
| verticalItemMargin | Vertical margin of vertical tab item | string | 16px 0 0 0 |
| verticalItemPadding | Vertical padding of vertical tab item | string | 8px 24px |
| zIndexPopup | z-index of dropdown menu | number | 1050 |