mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
5.1 KiB
5.1 KiB
category | group | title | description | cover | coverDark |
---|---|---|---|---|---|
Components | Data Display | Tabs | Tabs make it easy to explore and switch between different views. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8HMoTZUoSGoAAAAAAAAAAAAADrJ8AQ/original |
When To Use
Ant Design has 3 types of Tabs for different situations.
- Card Tabs: for managing too many closeable views.
- Normal Tabs: for functional aspects of a page.
- Radio.Button: for secondary tabs.
Examples
Basic
Disabled
Centered
Icon
Indicator
Slide
Extra content
Size
Position
Card type tab
Add & close tab
Container of card type Tab
Customized trigger of new tab
Customized bar of tab
Draggable Tabs
Animated
Nest
component Token
API
Common props ref:Common props
Tabs
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 |
moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> |
4.14.0 |
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 |
|
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 | (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
TabItemType
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 | - | |
destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | 5.11.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 |