logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.27.4
  • 组件总览
  • 更新日志
    v5.27.4
  • 通用
    • 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 开源社区

    何时使用

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

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

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

    代码演示

    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
    Hitu 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
    滑动

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

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    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
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    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
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Tab position:
    Tab 1
    Tab 2
    Tab 3
    Content of Tab 1
    位置

    有四个位置，tabPosition="left|right|top|bottom"。在移动端下，left|right 会自动切换成 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} 禁止关闭。

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Tab 1
    Tab 2
    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 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
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon

    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如何定制？