logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.22.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
      步骤条
  • 数据录入
    • 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
      表格
    • Tabs
      标签页
    • 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 Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
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 开源社区
loading

何时使用

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

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

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

代码演示

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

默认选中第一项。

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

禁用某一项。

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

标签居中展示。

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

有图标的标签。

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

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

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

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

CodeSandbox Icon
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
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
卡片式页签

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

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tab Title 1
Tab Title 2
Tab Title 3

Content of Tab Pane 1

Content of Tab Pane 1

Content of Tab Pane 1

卡片式页签容器

用于容器顶部，需要一点额外的样式覆盖。

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

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

CodeSandbox Icon
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
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
可拖拽标签

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Bamboo
Little
Light
Hello Bamboo!
动画

动画切换。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
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
TTTT 1
嵌套

默认选中第一项。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tab 1
Tab 2
Tab 3
Content of tab 1
Tab 1
Tab 2
Tab 3
Content of tab 1
Tab 1
Tab 2
Tab 3
Content of tab 1
Tab 1
Tab 2
Tab 3
Content of tab 1
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
组件 Token

Component Token Debug.

CodeSandbox Icon
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 结构booleanfalse
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 结构booleanfalse5.11.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卡片标签页高度string | number40
cardPadding卡片标签页内间距string8px 16px
cardPaddingLG大号卡片标签页内间距string8px 16px 6px
cardPaddingSM小号卡片标签页内间距string6px 16px
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如何定制？