Importimport { Tabs } from "antd"; |
Docs |
contributors
Importimport { Tabs } from "antd"; |
Docs |
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 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>(#semantic-dom) | - | |
| 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 |
className for more dropdown, please use classNames.popup instead | string | - | 4.21.0 | |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | large | middle | small | middle | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| 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 | - | |
| tabPlacement | Placement of tabs | top | end | bottom | start | top | |
| Position of tabs | top | right | bottom | left, please use tabPlacement instead | 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-component/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 |