标签页 Tabs
将内容组织同一视图中，一次可查看一个视图内容。查看其他内容可切换选项卡查看。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：最简单的使用。
- 带图标的页签：通过自定义的 title, 可以给页签加 icon。
- 位置：通过
tabPosition设置位置。 - 不同类型：使用
type属性设置不同类型的页签。 - 附加：通过
extra可以在页签的右侧添加额外内容。 - 动态增减页签：动态增减页签。仅在
type=card | card-gutter的时候生效。 - 受控模式：通过
activeTab开启受控模式。 - 嵌套使用：组件可以嵌套使用。
- 不同尺寸：使用
size属性设置不同尺寸的页签。 - 滚动：支持通过滚轮或者触摸板进行滚动操作。
- 滚动偏移位置：支持设置
scrollPosition来改变选中的选项卡的滚动位置
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Tabs
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| destroyOnHide | 是否销毁隐藏标签页的节点, TabPane 的该属性优先级高于 Tabs。 | boolean | - | - |
| editable | 是否允许增减标签。只在 type 为 card 或 card-gutter 时候生效。 | boolean | - | - |
| headerPadding | 选项卡头部是否存在水平边距。仅对 type等于 line、text类型的选项卡生效 | boolean | true | 2.6.0 |
| justify | 高度撑满容器，只在水平模式下生效。（默认的高度是又撑起的。） | boolean | - | - |
| lazyload | 设置为 true 时，将不会在组件挂载的时候渲染被隐藏的标签页。 | boolean | true | - |
| showAddButton | 是否显示新增按钮（仅在editable为true时生效） | boolean | true | - |
| activeTab | 当前选中的 tab 的 key | string | - | - |
| defaultActiveTab | 默认选中的标签选项卡，如不指定默认选择第一个 | string | - | - |
| direction | 标签选项卡的方向是水平还是竖直，分别对应 horizontal 和 vertical。** 注意： 已废弃，使用 tabPosition 替代。** | 'horizontal' | 'vertical' | - | - |
| inkBarSize | 定制下划线尺寸 | { width?: CSSProperties['width']; height?: CSSProperties['height'] } | - | 2.54.0 |
| overflow | 标签页较多时候，选择滚动/下拉菜单形式展示 tab | 'scroll' | 'dropdown' | scroll | - |
| scrollPosition | 被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整 | 'start' | 'end' | 'center' | 'auto' | number | auto | 2.25.0 |
| size | 有四个尺寸供选择，分别为mini, small, default, large | 'mini' | 'small' | 'default' | 'large' | - | - |
| tabPosition | 选项卡位置 | 'left' | 'right' | 'top' | 'bottom' | top | - |
| type | 标签选项卡的类型 | 'line' | 'card' | 'card-gutter' | 'text' | 'rounded' | 'capsule' | line | - |
| addButton | 自定义新增按钮 | ReactNode | - | 2.16.0 |
| deleteButton | 自定义删除按钮 | ReactNode | - | 2.16.0 |
| extra | 显示在标签页右侧的附加 | ReactNode | - | - |
| animation | 是否开启过渡效果 | boolean | { tabPane?: boolean; inkBar?: boolean } | - | - |
| className | 节点类名 | string | string[] | - | - |
| icons | 标签页头部 编辑/滚动/下拉 图标配置。对于不想展示的图标可以将其设置为null | {add?: ReactNode;delete?: ReactNode;prev?: ReactNode;next?: ReactNode;dropdown?: ReactNode;} | - | 2.15.0, prev,next,dropdown in 2.47.0 |
| scrollAfterEdit | 是否在标签增减后，自动进行滚动调整(editable为true时生效） | {delete?: boolean;add?: boolean;} | { add: true, delete: true } | 2.25.0 |
| style | 节点样式 | CSSProperties | - | - |
| onAddTab | 点击新增 tab 按钮的回调 | () => void | - | - |
| onChange | activeTab 改变的回调 | (key: string) => void | - | - |
| onClickTab | 点击选项卡的回调 | (key: string) => void | - | - |
| onDeleteTab | 点击删除按钮的回调 | (key: string) => void | - | - |
| renderTabHeader | 自定义选项卡头部 | (tabProps: TabsProps, DefaultTabHeader: typeof TabHeader) => ReactElement | - | - |
| renderTabTitle | 自定义单个选项卡头部 | (tabTitle: ReactNode,info: {key: string | number;isActive: boolean;disabled: boolean;editable: boolean;}) => ReactNode | - | - |
Tabs.TabPane
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| closable | 动态增减标签页时是否允许关闭当前标签页 | boolean | - |
| destroyOnHide | 选项卡隐藏的时候是否销毁标签页内的DOM结构，优先级高于 Tabs 的 destroyOnHide 属性 | boolean | - |
| disabled | 是否禁用 | boolean | - |
| title | 选项卡的标题显示 | string | ReactNode (必填) | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |