logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.27.5
  • 组件总览
  • 更新日志
    v5.27.5
  • 通用
    • 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
何时使用
代码演示
基本
禁用
居中
图标
指示条
滑动
附加内容
大小
位置
卡片式页签
新增和关闭页签
自定义新增页签触发器
自定义页签头
可拖拽标签
API
Tabs
TabItemType
MoreProps
主题变量(Design Token)

Tabs
标签页

选项卡切换组件。
使用import { Tabs } from "antd";
源码components/tabs
文档
编辑此页
文档贡献者
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
更新日志
常见问题
报告 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.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如何定制?
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 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 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
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
Hitu Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Hitu Icon
Hitu Icon