mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
c673cde7de
* feat: add onCancel and onEnd option for editable (#29615) * feature: add onCancel and onEnd option for editable * doc: editable * doc: add EN doc * optimize: code Co-authored-by: chenliang <chenliang9@xiaomi.com> * feat: add parent class for different notification types (#29634) close #29417 * refactor: Upload use origin behavior (#29737) * refactor: Fallback of events * test: Fix test case * fix: Start file update logic * fix: remove status update * test: Remove wrapTest * test: Fix test case * chore: bump rc-upload * docs: About desc * feat: tab support moreIcon (#29744) * feat: Tabs support moreIcon * docs: Tabs support moreIcon * style: lint * docs: add english document * Update components/tabs/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.zh-CN.md * Update components/tabs/index.en-US.md Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: jueinin <1014397160@qq.com> Co-authored-by: chenliang <chenliang9@xiaomi.com> Co-authored-by: 不吃猫的鱼 <michael2ib1989@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Tianyuan Zhang <tianyuan233.zhang@gmail.com> Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
2.8 KiB
2.8 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.
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 | |
| moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> | 4.14.0 |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | large | default | small |
default |
|
| 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 | 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 | - | |
| 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 |
More option at rc-tabs option
Tabs.TabPane
| Property | Description | Type | Default |
|---|---|---|---|
| closeIcon | Customize close icon in TabPane's head. Only works while type="editable-card" |
ReactNode | - |
| 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 | ReactNode | - |
More option at rc-tabs option