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 |