mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 09:21:22 +08:00
4.0 KiB
4.0 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.
Usage upgrade after 4.23.0
import Alert from '../alert';
ReactDOM.render(<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." />, mountNode);
// 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>;
API
Tabs
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 | [] | 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 | [] | 4.23.0 |
More option at rc-tabs tabs
TabItemType
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 | - |