mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
882cec62d6
* docs: Add components overview page * fix detail * remove ContributorsList form overview page * fix components url * improve code style * remove extra file * fix detail * fix lint * fix lint * docs: Finish components overview page * fix lint * docs: Update cover * fix lint * update cover * update menu * improve overview page * refactor code * fix order * update title * add components count * fix overview page ssr bug * move less file * update title margin Co-authored-by: arvinxx <arvinx@foxmail.com>
2.6 KiB
2.6 KiB
| category | type | title | cols | cover |
|---|---|---|---|---|
| Components | Data Display | Tabs | 1 | https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg |
Tabs make it easy to switch between different views.
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.
API
Tabs
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| activeKey | Current TabPane's key | string | - | |
| animated | Whether to change tabs with animation. Only works while tabPosition="top"|"bottom" |
boolean | {inkBar:boolean, tabPane:boolean} | true, false when type="card" |
|
| renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| 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 |
|
| size | preset tab bar size | large | default | small |
default |
|
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | |
| tabBarGutter | The gap between tabs | number | - | |
| tabBarStyle | Tab bar style object | object | - | |
| tabPosition | Position of tabs | top | right | bottom | left |
top |
|
| 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" |
(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 |
| keyboard | whether to turn on keyboard navigation | boolean | true |
More option at rc-tabs option
Tabs.TabPane
| Property | Description | Type | Default |
|---|---|---|---|
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
| key | TabPane's key | string | - |
| tab | Show text in TabPane's head | string|ReactNode | - |
| closeIcon | Customize close icon in TabPane's head. Only works while type="editable-card" |
ReactNode | - |
More option at rc-tabs option