2016-08-03 10:39:20 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Display
2016-09-21 11:28:38 +08:00
title: Tabs
2020-05-31 11:48:34 +08:00
cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
2022-11-09 12:28:04 +08:00
demo:
cols: 2
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
2022-08-05 10:49:08 +08:00
### Usage upgrade after 4.23.0
2022-11-15 22:55:01 +08:00
< Alert message = "After version 4.23.0, we provide a simpler usage <Tabs items={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0." > < / Alert >
2022-08-05 10:49:08 +08:00
```jsx
// works when >=4.23.0, recommended ✅
const items = [
{ label: 'Tab 1', key: 'item-1', children: 'Content 1' }, // remember to pass the key prop
{ label: 'Tab 2', key: 'item-2', children: 'Content 2' },
];
return < Tabs items = {items} / > ;
// works when < 4.23.0 , deprecated when > =4.23.0 🙅🏻♀️
< Tabs >
< Tabs.TabPane tab = "Tab 1" key = "item-1" >
Content 1
< / Tabs.TabPane >
< Tabs.TabPane tab = "Tab 2" key = "item-2" >
Content 2
< / Tabs.TabPane >
< / Tabs > ;
```
2022-11-09 12:28:04 +08:00
## Examples
< code src = "./demo/deprecated.tsx" > Basic usage (deprecated syntactic sugar)< / code >
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/disabled.tsx" > Disabled< / code >
< code src = "./demo/centered.tsx" > Centered< / code >
< code src = "./demo/icon.tsx" > Icon< / code >
< code src = "./demo/slide.tsx" > Slide< / code >
< code src = "./demo/extra.tsx" > Extra content< / code >
< code src = "./demo/size.tsx" > Size< / code >
< code src = "./demo/position.tsx" > Position< / code >
< code src = "./demo/card.tsx" > Card type tab< / code >
< code src = "./demo/editable-card.tsx" > Add & close tab< / code >
< code src = "./demo/card-top.tsx" > Container of card type Tab< / code >
< code src = "./demo/custom-add-trigger.tsx" > Customized trigger of new tab< / code >
< code src = "./demo/custom-tab-bar.tsx" > Customized bar of tab< / code >
< code src = "./demo/custom-tab-bar-node.tsx" > Draggable Tabs< / code >
< code src = "./demo/animated.tsx" debug > Animated< / code >
< code src = "./demo/nest.tsx" debug > Nest< / code >
2016-08-03 10:39:20 +08:00
## API
### Tabs
2022-11-15 22:55:01 +08:00
| Property | Description | Type | Default | Version |
| ---------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------- | ------------- | --- |
| activeKey | Current TabPane's key | string | - | |
| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | 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 | - | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
| items | Configure tab content | [TabItem ](#TabItem ) | [] | 4.23.0 |
| moreIcon | The custom icon of ellipsis | ReactNode | < EllipsisOutlined /> | 4.14.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 | function(activeKey) {} | - | |
| 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 | function(key: string, event: MouseEvent) | - | |
| onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
| items | TabItem content | [TabItemType ](#TabItemType ) | [] | 4.23.0 |
2019-03-15 19:01:20 +08:00
2022-10-08 17:20:46 +08:00
More option at [rc-tabs tabs ](https://github.com/react-component/tabs#tabs )
2016-08-03 10:39:20 +08:00
2022-10-03 22:27:26 +08:00
### TabItemType
2017-10-25 10:25:44 +08:00
2022-11-15 22:55:01 +08:00
| Property | Description | Type | Default |
| ----------- | ------------------------------------------------------------------------------- | --------- | ------- |
| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
| 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 | - |
| children | TabPane's head display content | ReactNode | - |
