mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 04:48:02 +08:00
62d68b049f
* feat: Customized bar of tab. * docs: 更新关于renderTabBar的中文文档 * docs: 更新关于renderTabBar的英文文档 * update: 优化代码 * docs: 更新关于renderTabBar的文档 * update: 完善renderTabBar代码 * update: 完成自定义tabBar * docs: 去掉旧的DefaultTabBar参数说明 * update: 修复CI测试 * fix: 去掉>选择器，解决自定义tabBar后样式错误 * update: 优化代码质量 * update: 添加测试 * fix: lint * fix: 避免tab嵌套bug * update: 把DefaultTabBar放在renderTabBar里
2.2 KiB
2.2 KiB
| category | type | title | cols |
|---|---|---|---|
| Components | Data Display | Tabs | 1 |
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.
- RadioButton: for secondary tabs.
API
Tabs
| Property | Description | Type | Default |
|---|---|---|---|
| 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 | - |
| 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 | - |
| 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 | - |
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 | - |