Tabs
Tabs
Tabs make it easy to explore and switch between different views.
Importimport { Tabs } from "antd"; |
Sourcecomponents/tabs |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport { Tabs } from "antd"; |
Sourcecomponents/tabs |
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, 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 | |
Whether destroy inactive TabPane when change tab, use destroyOnHidden instead | boolean | false | ||
| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | 5.25.0 |
| 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
| 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 | - | |
Whether destroy inactive TabPane when change tab, use destroyOnHidden instead | boolean | false | 5.11.0 | |
| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | 5.25.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 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| icon | The custom icon | ReactNode | - | |
| DropdownProps |
| 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 |
| cardHeightLG | Height of large card tab | number | 48 |
| cardHeightSM | Height of small card tab | number | 32 |
| cardPadding | Padding of card tab | string | 8px 16px |
| cardPaddingLG | Padding of large card tab | string | 11px 16px |
| cardPaddingSM | Padding of small card tab | string | 4px 8px |
| 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.
Set indicator prop to custom indicator size and align.
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.
