Tabs make it easy to switch between different views.
Ant Design has 3 types of Tabs for different situations.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| activeKey | Current TabPane's key | string | - | |
| addIcon | Customize add icon | ReactNode | - | 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 | - | |
| hideAdd | Hide plus icon or not. Only works while type="editable-card" | boolean | false | |
| indicatorSize | Customize length of indicator, which is the same as tab by default | number | (origin: number) => number | - | 5.9.0 |
| items | Configure tab content | TabItemType | [] | 4.23.0 |
| moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> | 4.14.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 | function(activeKey) {} | - | |
| 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 | function(key: string, event: MouseEvent) | - | |
| onTabScroll | Trigger when tab scroll | function({ direction: left | right | top | bottom }) | - | 4.3.0 |
More option at rc-tabs tabs
| Property | Description | Type | Default |
|---|---|---|---|
| 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 | boolean | ReactNode | - |
| 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 | - |
| children | TabPane's head display content | ReactNode | - |
| 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 | number | 40 |
| cardPadding | Padding of card tab | string | |
| 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 |
Default activate first tab.
Disabled a tab.
Centered tabs.
The Tab with Icon.
Custom indicator size
In order to fit in more tabs, they can slide left and right (or up and down).
You can add extra actions to the right or left or even both side of Tabs.
Large size tabs are usually used in page header, and small size could be used in Modal.
Tab's position: left, right, top or bottom. Will auto switch to top in mobile.
Another type of Tabs, which doesn't support vertical mode.
Only card type Tabs support adding & closable. +Use closable={false} to disable close.
Hide default plus icon, and bind event for customized trigger.
Use react-sticky-box and renderTabBar.
Use dnd-kit to make tabs draggable.
