logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
YouMindTRACTIANLobeHubCodeRabbit
6.5.0
  • 组件总览
  • 更新日志
    v6.5.0
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
    • Grid栅格
    • Layout布局
    • Masonry瀑布流
      6.0.0
    • Space间距
    • Splitter分隔面板
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
    • 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二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
  • 其他
    • Affix固钉
    • App包裹组件
    • BorderBeam边框流光
      6.4.0
    • ConfigProvider全局化配置
    • Util工具类
何时使用
代码演示
基本
禁用
居中
图标
指示条
滑动
附加内容
大小
位置
卡片式页签
新增和关闭页签
自定义新增页签触发器
自定义页签头
可拖拽标签
自定义语义结构的样式和类
API
Tabs
TabItemType
MoreProps
Semantic DOM
主题变量（Design Token）

Tabs
标签页

选项卡切换组件。
使用import { Tabs } from 'antd';
反馈
components/tabs提交问题待解决
文档
编辑此页LLMs.md
Steps步骤条AutoComplete自动完成

相关资源

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
X
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

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

Ant XTech logo更多产品

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

何时使用

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

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

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

代码演示

API

通用属性参考：通用属性

Tabs

参数说明类型默认值版本全局配置
activeKey当前激活 tab 面板的 keystring-×
addIcon自定义添加按钮，设置 type="editable-card" 时有效ReactNode<PlusOutlined />4.4.05.14.0
animated是否使用动画切换 Tabsboolean| { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }×
centered标签居中展示booleanfalse4.4.0×
classNames用于自定义组件内部各语义化结构的 class，支持对象或函数Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-6.0.0
defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeystring第一个面板的 key×
hideAdd是否隐藏加号图标，在 type="editable-card" 时有效booleanfalse×
indicator自定义指示条的长度和对齐方式{ size?: number | (origin: number) => number; align: start | center | end; }-5.13.05.13.0
items配置选项卡内容TabItemType[]4.23.0×
more自定义折叠菜单属性MoreProps{ icon: <EllipsisOutlined /> , trigger: 'hover' }5.17.0
removeIcon自定义删除按钮，设置 type="editable-card" 时有效ReactNode<CloseOutlined />5.15.05.15.0
popupClassName更多菜单的 className, 请使用 classNames.popup 替换string-4.21.0×
renderTabBar替换 TabBar，用于二次封装标签头(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement-×
size大小，提供 large medium 和 small 三种大小large | medium | smallmedium×
styles用于自定义组件内部各语义化结构的行内 style，支持对象或函数Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-6.0.0
tabBarExtraContenttab bar 上额外的元素ReactNode | {left?: ReactNode, right?: ReactNode}-object: 4.6.0×
tabBarGuttertabs 之间的间隙number-×
tabBarStyletab bar 的样式对象CSSProperties-×
tabPlacement页签位置，可选值有 top end bottom starttop | end | bottom | starttop×
tabPosition页签位置，可选值有 top right bottom left，请使用 tabPlacement 替换top | right | bottom | lefttop×
destroyInactiveTabPane被隐藏时是否销毁 DOM 结构，使用 destroyOnHidden 代替booleanfalse×
destroyOnHidden被隐藏时是否销毁 DOM 结构booleanfalse5.25.0×
type页签的基本样式，可选 line、card editable-card 类型line | card | editable-cardline×
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-component/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

Semantic DOM

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
  • root
    根元素，包含标签页容器的基础样式、布局和方向控制
  • header
    头部元素，包含标签页头部导航的布局、背景、边框等样式
  • item
    Item 元素，包含相对定位、内边距、颜色、文本省略、圆角、过渡动画等标签项的样式和交互效果
  • remove
    6.4.0
    删除按钮元素，包含可编辑标签页关闭按钮的尺寸、颜色、悬浮态和交互反馈等样式
  • indicator
    指示器元素，包含指示条的颜色、位置、尺寸、过渡动画等活跃状态指示样式
  • body
    内容区域元素，包含标签页面板容器的布局、动画和尺寸控制
  • content
    内容元素，包含单个标签页面板的布局、内边距等内容展示样式
  • popup.root
    弹出菜单元素，包含下拉菜单的绝对定位、层级、显示控制、最大高度、滚动等样式

主题变量（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如何定制？
Token 名称描述类型默认值
colorBgContainer组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。string#ffffff
colorBorder默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。string#d9d9d9
colorBorderSecondary比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。string#f0f0f0
colorIcon控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 *stringrgba(0,0,0,0.45)
colorPrimaryBorder主色梯度下的描边用色，用在 Slider 等组件的描边上。string#91caff
colorText最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。stringrgba(0,0,0,0.88)
colorTextDisabled控制禁用状态下的字体颜色。stringrgba(0,0,0,0.25)
colorTextHeading控制标题字体颜色。stringrgba(0,0,0,0.88)
borderRadius基础组件的圆角大小，例如按钮、输入框、卡片等number6
borderRadiusLGLG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。number8
boxShadowSecondary控制元素二级阴影样式。string 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)
controlHeightAnt Design 中按钮和输入框等基础控件的高度number32
controlHeightLG较高的组件高度number40
controlItemBgHover控制组件项在鼠标悬浮时的背景颜色。stringrgba(0,0,0,0.04)
fontFamilyAnt Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。number14
fontSizeSM小号字体大小number12
lineHeight文本行高number1.5714285714285714
lineHeightLG大型文本行高number1.5
lineType用于控制组件边框、分割线等的样式，默认是实线stringsolid
lineWidth用于控制组件边框、分割线等的宽度number1
lineWidthBold描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。number2
lineWidthFocus控制线条的宽度，当组件处于聚焦态时。number3
margin控制元素外边距，中等尺寸。number16
marginSM控制元素外边距，中小尺寸。number12
marginXS控制元素外边距，小尺寸。number8
marginXXS控制元素外边距，最小尺寸。number4
motionDurationMid动效播放速度，中速。用于中型元素动画交互string0.2s
motionDurationSlow动效播放速度，慢速。用于大型元素如面板动画交互string0.3s
motionEaseInOut预设动效曲率string
Cubic Bezier Visualizer
cubic-bezier(0.645, 0.045, 0.355, 1)External Link Icon
motionEaseInQuint预设动效曲率string
Cubic Bezier Visualizer
cubic-bezier(0.755, 0.05, 0.855, 0.06)External Link Icon
motionEaseOutQuint预设动效曲率string
Cubic Bezier Visualizer
cubic-bezier(0.23, 1, 0.32, 1)External Link Icon
paddingLG控制元素的大内间距。number24
paddingSM控制元素的小内间距。number12
paddingXXS控制元素的极小内间距。number4
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
基本

默认选中第一项。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Tab 1
禁用

禁用某一项。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
居中

标签居中展示。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 2
图标

有图标的标签。

CodeSandbox Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
指示条

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
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
滑动

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

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
附加内容

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

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
大小

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

Tab placement:
Tab 1
Tab 2
Tab 3
Content of Tab 1
位置

有四个位置，tabPlacement="start|end|top|bottom"。在移动端下，start|end 会自动切换成 top。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
卡片式页签

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Content of Tab 1
新增和关闭页签

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

Tab 1
Tab 2
Content of Tab Pane 1
自定义新增页签触发器

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

CodeSandbox Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
自定义页签头

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
可拖拽标签

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

CodeSandbox Icon
codepen icon
External Link Icon
Expand Icon
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Tabs 的语义化结构样式。

CodeSandbox Icon
codepen icon
External Link Icon
Expand Icon
6.0.0
Hitu Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Hitu Icon
Hitu Icon
Hitu Icon