---
title: Tabs - 标签页
path: /tabs
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 4
  title: 数据展示
  path: /dataShow
---

用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。

## 基础标签页

使用标签切换内容模块，操作后不会进行页面跳转。

<code src="./demos/basic.tsx" height="400px"/>

去掉底部分界线
<code src="./demos/basic1.tsx" height="400px"/>

## 不同风格的标签页

提供 默认 和 卡片 两种风格。

<code src="./demos/basic.tsx" height="400px"/>

<code src="./demos/card.tsx" height="400px"/>

## 带图标的标签页

在基础选项卡基础上，在每个标签前添加图标，方便用户快速理解。

<code src="./demos/icon2.tsx" height="400px"/>

<code src="./demos/icon.tsx" height="400px"/>

## 增删标签页

用户可添加、删除选项卡，满足自定义场景。

<code src="./demos/editable-card.tsx" height="400px"/>

## 不同尺寸的标签页

提供 大、中（默认）、小三种尺寸。

<code src="./demos/size.tsx" />

## 可滑动的选项卡

当选项卡数量超出最大宽度，可通过滑动展示选项卡。

<code src="./demos/slide.tsx" height="400px"/>

## API

| 参数                   | 说明                                                     | 类型                                                                                   | 默认值                           | 版本          |
| ---------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------- | ------------- |
| activeKey              | 当前激活 tab 面板的 key                                  | string                                                                                 | -                                |               |
| addIcon                | 自定义添加按钮                                           | ReactNode                                                                              | -                                | 4.4.0         |
| animated               | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"`      | boolean \| { inkBar: boolean, tabPane: boolean }                                       | { inkBar: true, tabPane: false } |               |
| centered               | 标签居中展示                                             | boolean                                                                                | false                            | 4.4.0         |
| defaultActiveKey       | 初始化选中面板的 key，如果没有设置 activeKey             | string                                                                                 | `第一个面板`                     |               |
| hideAdd                | 是否隐藏加号图标，在 `type="editable-card"` 时有效       | boolean                                                                                | false                            |               |
| moreIcon               | 自定义折叠 icon                                          | ReactNode                                                                              | &lt;EllipsisOutlined />          | 4.14.0        |
| popupClassName         | 更多菜单的 `className`                                   | string                                                                                 | -                                | 4.21.0        |
| renderTabBar           | 替换 TabBar，用于二次封装标签头                          | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | -                                |               |
| size                   | 大小，提供 `large` `default` 和 `small` 三种大小         | string                                                                                 | `default`                        |               |
| tabBarExtraContent     | tab bar 上额外的元素                                     | ReactNode \| {left?: ReactNode, right?: ReactNode}                                     | -                                | object: 4.6.0 |
| tabBarGutter           | tabs 之间的间隙                                          | number                                                                                 | -                                |               |
| tabBarStyle            | tab bar 的样式对象                                       | CSSProperties                                                                          | -                                |               |
| tabPosition            | 页签位置，可选值有 `top` `right` `bottom` `left`         | string                                                                                 | `top`                            |               |
| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构                                | boolean                                                                                | false                            |               |
| type                   | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string                                                                                 | `line`                           |               |
| onChange               | 切换面板的回调                                           | function(activeKey) {}                                                                 | -                                |               |
| onEdit                 | 新增和删除页签的回调，在 `type="editable-card"` 时有效   | (action === 'add' ? event : targetKey, action): void                                   | -                                |               |
| onTabClick             | tab 被点击的回调                                         | function(key: string, event: MouseEvent)                                               | -                                |               |
| onTabScroll            | tab 滚动时触发                                           | function({ direction: `left` \| `right` \| `top` \| `bottom` })                        | -                                | 4.3.0         |

### Tabs.TabPane

| 参数        | 说明                                            | 类型      | 默认值 |
| ----------- | ----------------------------------------------- | --------- | ------ |
| closeIcon   | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | -      |
| forceRender | 被隐藏时是否渲染 DOM 结构                       | boolean   | false  |
| key         | 对应 activeKey                                  | string    | -      |
| tab         | 选项卡头显示文字                                | ReactNode | -      |