2016-08-03 10:39:20 +08:00
|
|
|
---
|
|
|
|
|
category: Components
|
2017-06-19 11:01:29 +08:00
|
|
|
type: Data Display
|
2016-09-21 11:28:38 +08:00
|
|
|
title: Tabs
|
2017-06-26 20:20:57 +08:00
|
|
|
cols: 1
|
2020-05-31 11:48:34 +08:00
|
|
|
cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
|
2016-08-03 10:39:20 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Tabs make it easy to switch between different views.
|
|
|
|
|
|
2016-09-10 13:43:30 +08:00
|
|
|
### When To Use
|
2016-08-03 10:39:20 +08:00
|
|
|
|
2017-09-18 10:27:49 +08:00
|
|
|
Ant Design has 3 types of Tabs for different situations.
|
2016-08-03 10:39:20 +08:00
|
|
|
|
|
|
|
|
- Card Tabs: for managing too many closeable views.
|
2016-09-01 18:12:12 +08:00
|
|
|
- Normal Tabs: for functional aspects of a page.
|
2020-04-09 16:12:47 +08:00
|
|
|
- [Radio.Button](/components/radio/#components-radio-demo-radiobutton): for secondary tabs.
|
2016-08-03 10:39:20 +08:00
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### Tabs
|
|
|
|
|
|
2020-05-30 18:28:25 +08:00
|
|
|
| Property | Description | Type | Default | Version |
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
2020-06-28 22:41:59 +08:00
|
|
|
| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
|
2020-05-30 18:28:25 +08:00
|
|
|
| activeKey | Current TabPane's key | string | - | |
|
2020-07-02 14:07:52 +08:00
|
|
|
| animated | Whether to change tabs with animation. Only works while `tabPosition="top" | "bottom"` | boolean \| {inkBar: boolean, tabPane: boolean} | false | |
|
|
|
|
|
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
|
|
|
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |
|
2020-06-17 23:18:14 +08:00
|
|
|
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
|
2020-07-02 14:07:52 +08:00
|
|
|
| size | Preset tab bar size | `large` \| `default` \| `small` | `default` | |
|
2020-06-28 22:41:59 +08:00
|
|
|
| centered | Centers tabs | boolean | false | 4.4.0 |
|
2020-08-07 09:53:45 +08:00
|
|
|
| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | |
|
2020-05-30 18:28:25 +08:00
|
|
|
| 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` | |
|
2020-07-02 14:07:52 +08:00
|
|
|
| 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 | |
|
2019-03-15 19:01:20 +08:00
|
|
|
|
2019-03-14 20:59:05 +08:00
|
|
|
More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
|
2016-08-03 10:39:20 +08:00
|
|
|
|
|
|
|
|
### Tabs.TabPane
|
2017-10-25 10:25:44 +08:00
|
|
|
|
2019-11-21 10:23:34 +08:00
|
|
|
| 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 | - |
|
2020-10-09 10:08:52 +08:00
|
|
|
| tab | Show text in TabPane's head | ReactNode | - |
|
2020-05-11 12:12:33 +08:00
|
|
|
| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
|
2019-03-15 19:01:20 +08:00
|
|
|
|
2019-03-14 20:59:05 +08:00
|
|
|
More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane)
|
