logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Tabs
标签页

选项卡切换组件。
使用import { Tabs } from "antd";
源码components/tabs
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

Ant Design 依次提供了三级选项卡，分别用于不同的场景。

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。
  • 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
  • Radio.Button 可作为更次级的页签来使用。

代码演示

Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
基本

默认选中第一项。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Tab 1
禁用

禁用某一项。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
居中

标签居中展示。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 2
图标

有图标的标签。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
指示条

设置 indicator 属性，自定义指示条宽度和对齐方式。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab-0
Tab-1
Tab-2
Tab-3
Tab-4
Tab-5
Tab-6
Tab-7
Tab-8
Tab-9
Tab-10
Tab-11
Tab-12
Tab-13
Tab-14
Tab-15
Tab-16
Tab-17
Tab-18
Tab-19
Tab-20
Tab-21
Tab-22
Tab-23
Tab-24
Tab-25
Tab-26
Tab-27
Tab-28
Tab-29
Content of tab 1
滑动

可以左右、上下滑动，容纳更多标签。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of tab 1



You can also specify its direction or both side


Tab 1
Tab 2
Tab 3
Content of tab 1
附加内容

可以在页签两边添加附加操作。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of tab 1
Card Tab 1
Card Tab 2
Card Tab 3
Content of card tab 1
Tab 1
Tab 2
Tab 3
Content of editable tab 1
大小

大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab position:
Tab 1
Tab 2
Tab 3
Content of Tab 1
位置

有四个位置，tabPosition="left|right|top|bottom"。在移动端下，left|right 会自动切换成 top。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
卡片式页签

另一种样式的页签，不提供对应的垂直样式。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab 1
新增和关闭页签

只有卡片样式的页签支持新增和关闭选项。使用 closable={false} 禁止关闭。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Content of Tab Pane 1
自定义新增页签触发器

隐藏默认的页签增加图标，给自定义触发器绑定事件。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
自定义页签头

使用 react-sticky-box 和 renderTabBar 实现吸顶效果。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
可拖拽标签

使用 dnd-kit 实现标签可拖拽。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考：通用属性

Tabs

参数说明类型默认值版本
activeKey当前激活 tab 面板的 keystring-
addIcon自定义添加按钮，设置 type="editable-card" 时有效ReactNode<PlusOutlined />4.4.0
animated是否使用动画切换 Tabsboolean| { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }
centered标签居中展示booleanfalse4.4.0
defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeystring第一个面板的 key
hideAdd是否隐藏加号图标，在 type="editable-card" 时有效booleanfalse
indicator自定义指示条的长度和对齐方式{ size?: number | (origin: number) => number; align: start | center | end; }-5.13.0
items配置选项卡内容TabItemType[]4.23.0
more自定义折叠菜单属性MoreProps{ icon: <EllipsisOutlined /> , trigger: 'hover' }
removeIcon自定义删除按钮，设置 type="editable-card" 时有效ReactNode<CloseOutlined />5.15.0
popupClassName更多菜单的 classNamestring-4.21.0
renderTabBar替换 TabBar，用于二次封装标签头(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement-
size大小，提供 large middle 和 small 三种大小stringmiddle
tabBarExtraContenttab bar 上额外的元素ReactNode | {left?: ReactNode, right?: ReactNode}-object: 4.6.0
tabBarGuttertabs 之间的间隙number-
tabBarStyletab bar 的样式对象CSSProperties-
tabPosition页签位置，可选值有 top right bottom leftstringtop
destroyInactiveTabPane被隐藏时是否销毁 DOM 结构，使用 destroyOnHidden 代替booleanfalse
destroyOnHidden被隐藏时是否销毁 DOM 结构booleanfalse5.25.0
type页签的基本样式，可选 line、card editable-card 类型stringline
onChange切换面板的回调(activeKey: string) => void-
onEdit新增和删除页签的回调，在 type="editable-card" 时有效(action === 'add' ? event : targetKey, action) => void-
onTabClicktab 被点击的回调(key: string, event: MouseEvent) => void-
onTabScrolltab 滚动时触发({ direction: left | right | top | bottom }) => void-4.3.0

更多属性查看 rc-tabs tabs

TabItemType

参数说明类型默认值版本
closeIcon自定义关闭图标，在 type="editable-card" 时有效。5.7.0：设置为 null 或 false 时隐藏关闭按钮ReactNode-
destroyInactiveTabPane被隐藏时是否销毁 DOM 结构，使用 destroyOnHidden 代替booleanfalse5.11.0
destroyOnHidden被隐藏时是否销毁 DOM 结构booleanfalse5.25.0
disabled禁用某一项booleanfalse
forceRender被隐藏时是否渲染 DOM 结构booleanfalse
key对应 activeKeystring-
label选项卡头显示文字ReactNode-
icon选项卡头显示图标ReactNode-5.12.0
children选项卡头显示内容ReactNode-
closable是否显示选项卡的关闭按钮，在 type="editable-card" 时有效booleantrue

MoreProps

参数说明类型默认值版本
icon自定义折叠图标ReactNode-
DropdownProps

主题变量（Design Token）

组件 Token如何定制？
Token 名称描述类型默认值
cardBg卡片标签页背景色stringrgba(0,0,0,0.02)
cardGutter卡片标签间距number2
cardHeight卡片标签页高度number40
cardHeightLG大尺寸卡片标签页高度number48
cardHeightSM小尺寸卡片标签页高度number32
cardPadding卡片标签页内间距string8px 16px
cardPaddingLG大号卡片标签页内间距string11px 16px
cardPaddingSM小号卡片标签页内间距string4px 8px
horizontalItemGutter横向标签页标签间距number32
horizontalItemMargin横向标签页标签外间距string
horizontalItemMarginRTL横向标签页标签外间距（RTL）string
horizontalItemPadding横向标签页标签内间距string12px 0
horizontalItemPaddingLG大号横向标签页标签内间距string16px 0
horizontalItemPaddingSM小号横向标签页标签内间距string8px 0
horizontalMargin横向标签页外间距string0 0 16px 0
inkBarColor指示条颜色string#1677ff
itemActiveColor标签激活态文本颜色string#0958d9
itemColor标签文本颜色stringrgba(0,0,0,0.88)
itemHoverColor标签悬浮态文本颜色string#4096ff
itemSelectedColor标签选中态文本颜色string#1677ff
titleFontSize标签页标题文本大小number14
titleFontSizeLG大号标签页标题文本大小number16
titleFontSizeSM小号标签页标题文本大小number14
verticalItemMargin纵向标签页标签外间距string16px 0 0 0
verticalItemPadding纵向标签页标签内间距string8px 24px
zIndexPopup下拉菜单 z-indexnumber1050
全局 Token如何定制？