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
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.
2016-11-06 15:45:39 +08:00
- [RadioButton ](/components/radio/#components-radio-demo-radiobutton ): for secondary tabs.
2016-08-03 10:39:20 +08:00
## API
### Tabs
2019-07-11 14:14:33 +08:00
| 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.ReactNode) => React.ReactNode | - | 3.9.0 |
| 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 | - | 3.2.0 |
| 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 | - | |
| onNextClick | Callback executed when next button is clicked | Function | - | |
| onPrevClick | Callback executed when prev button is clicked | Function | - | |
| onTabClick | Callback executed when tab is clicked | Function(key: string, event: MouseEvent) | - | |
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-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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 | - | |
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 )