Importimport { Tabs } from 'antd'; |
Importimport { Tabs } from 'antd'; |
Ant Design has 3 types of Tabs for different situations.
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| activeKey | Current TabPane's key | string | - | × | |
| addIcon | Customize add icon, only works with type="editable-card" | ReactNode | <PlusOutlined /> | 4.4.0 | 5.14.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> | - | 6.0.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 | 5.13.0 |
| items | Configure tab content | TabItemType | [] | 4.23.0 | × |
| more | Customize the collapse menu | MoreProps | { icon: <EllipsisOutlined /> , trigger: 'hover' } | 5.17.0 | |
| removeIcon | The custom icon of remove, only works with type="editable-card" | ReactNode | <CloseOutlined /> | 5.15.0 | 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 | medium | small | medium | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| 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 | Tab header text element | ReactNode | - | |
| icon | Tab header icon element | ReactNode | - | 5.12.0 |
| children | Tab content element | 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorBorderSecondary | Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used. | string | #f0f0f0 |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| boxShadowSecondary | Control the secondary box shadow style of an element. | string | 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| controlHeightLG | LG component height | number | 40 |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0,0,0,0.04) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthBold | The default line width of the outline class components, such as Button, Input, Select, etc. | number | 2 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| motionEaseInQuint | Preset motion curve. | string | |
| motionEaseOutQuint | Preset motion curve. | string | |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingSM | Control the small padding of the element. | number | 12 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |