标签页 Tabs

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

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

卡片式的页签，提供可关闭的样式，常用于容器顶部。既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。Radio.Button 可作为更次级的页签来使用。代码演示 API通用属性参考：通用属性

Tabs参数说明类型默认值版本全局配置activeKey当前激活 tab 面板的 keystring-×addIcon自定义添加按钮，设置 type="editable-card" 时有效ReactNode4.4.05.14.0animated是否使用动画切换 Tabsboolean| { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }×centered标签居中展示booleanfalse4.4.0×classNames用于自定义组件内部各语义化结构的 class，支持对象或函数Record | (info: { props })=> Record-6.0.0defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeystring第一个面板的 key×hideAdd是否隐藏加号图标，在 type="editable-card" 时有效booleanfalse×indicator自定义指示条的长度和对齐方式{ size?: number | (origin: number) => number; align: start | center | end; }-5.13.05.13.0items配置选项卡内容TabItemType[]4.23.0×more自定义折叠菜单属性MoreProps{ icon: , trigger: 'hover' }5.17.0removeIcon自定义删除按钮，设置 type="editable-card" 时有效ReactNode5.15.05.15.0popupClassName更多菜单的 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 | (info: { props })=> Record-6.0.0tabBarExtraContenttab 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.0destroyOnHidden被隐藏时是否销毁 DOM 结构booleanfalse5.25.0disabled禁用某一项booleanfalseforceRender被隐藏时是否渲染 DOM 结构booleanfalsekey对应 activeKeystring-label选项卡头部文字元素ReactNode-icon选项卡头部图标元素ReactNode-5.12.0children选项卡内容元素ReactNode-closable是否显示选项卡的关闭按钮，在 type="editable-card" 时有效booleantrueMoreProps参数说明类型默认值版本icon自定义折叠图标ReactNode-DropdownPropsSemantic DOMTab-0Tab-1Tab-2Tab-3Tab-4Tab-5Tab-6Tab-7Tab-8Tab-9Tab-10Tab-11Tab-12Tab-13Tab-14Tab-15Tab-16Tab-17Tab-18Tab-19Tab-20Tab-21Tab-22Tab-23Tab-24Tab-25Tab-26Tab-27Tab-28Tab-29Content of tab 1root根元素，包含标签页容器的基础样式、布局和方向控制header根元素，包含标签页容器的基础样式、布局和方向控制itemItem 元素，包含相对定位、内边距、颜色、文本省略、圆角、过渡动画等标签项的样式和交互效果remove6.4.0删除按钮元素，包含可编辑标签页关闭按钮的尺寸、颜色、悬浮态和交互反馈等样式indicator指示器元素，包含指示条的颜色、位置、尺寸、过渡动画等活跃状态指示样式content内容元素，包含标签页内容面板的布局、内边距等内容展示样式popup.root弹出菜单元素，包含下拉菜单的绝对定位、层级、显示控制、最大高度、滚动等样式主题变量（Design Token）组件 Token如何定制？Token 名称描述类型默认值cardBg卡片标签页背景色stringrgba(0,0,0,0.02)cardGutter卡片标签间距number2cardHeight卡片标签页高度number40cardHeightLG大尺寸卡片标签页高度number48cardHeightSM小尺寸卡片标签页高度number32cardPadding卡片标签页内间距string8px 16pxcardPaddingLG大号卡片标签页内间距string11px 16pxcardPaddingSM小号卡片标签页内间距string4px 8pxhorizontalItemGutter横向标签页标签间距number32horizontalItemMargin横向标签页标签外间距stringhorizontalItemMarginRTL横向标签页标签外间距（RTL）stringhorizontalItemPadding横向标签页标签内间距string12px 0horizontalItemPaddingLG大号横向标签页标签内间距string16px 0horizontalItemPaddingSM小号横向标签页标签内间距string8px 0horizontalMargin横向标签页外间距string0 0 16px 0inkBarColor指示条颜色string#1677ffitemActiveColor标签激活态文本颜色string#0958d9itemColor标签文本颜色stringrgba(0,0,0,0.88)itemHoverColor标签悬浮态文本颜色string#4096ffitemSelectedColor标签选中态文本颜色string#1677fftitleFontSize标签页标题文本大小number14titleFontSizeLG大号标签页标题文本大小number16titleFontSizeSM小号标签页标题文本大小number14verticalItemMargin纵向标签页标签外间距string16px 0 0 0verticalItemPadding纵向标签页标签内间距string8px 24pxzIndexPopup下拉菜单 z-indexnumber1050全局 Token如何定制？Token 名称描述类型默认值colorBgContainer组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。string#ffffffcolorBorder默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。string#d9d9d9colorBorderSecondary比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。string#f0f0f0colorIcon控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。

*stringrgba(0,0,0,0.45)colorPrimaryBorder主色梯度下的描边用色，用在 Slider 等组件的描边上。string#91caffcolorText最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。stringrgba(0,0,0,0.88)colorTextDisabled控制禁用状态下的字体颜色。stringrgba(0,0,0,0.25)colorTextHeading控制标题字体颜色。stringrgba(0,0,0,0.88)borderRadius基础组件的圆角大小，例如按钮、输入框、卡片等number6borderRadiusLGLG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。number8boxShadowSecondary控制元素二级阴影样式。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 中按钮和输入框等基础控件的高度number32controlHeightLG较高的组件高度number40controlItemBgHover控制组件项在鼠标悬浮时的背景颜色。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设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。number14fontSizeSM小号字体大小number12lineHeight文本行高number1.5714285714285714lineHeightLG大型文本行高number1.5lineType用于控制组件边框、分割线等的样式，默认是实线stringsolidlineWidth用于控制组件边框、分割线等的宽度number1lineWidthBold描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。number2lineWidthFocus控制线条的宽度，当组件处于聚焦态时。number3margin控制元素外边距，中等尺寸。number16marginSM控制元素外边距，中小尺寸。number12marginXS控制元素外边距，小尺寸。number8marginXXS控制元素外边距，最小尺寸。number4motionDurationMid动效播放速度，中速。用于中型元素动画交互string0.2smotionDurationSlow动效播放速度，慢速。用于大型元素如面板动画交互string0.3smotionEaseInOut预设动效曲率stringcubic-bezier(0.645, 0.045, 0.355, 1)motionEaseInQuint预设动效曲率stringcubic-bezier(0.755, 0.05, 0.855, 0.06)motionEaseOutQuint预设动效曲率stringcubic-bezier(0.23, 1, 0.32, 1)paddingLG控制元素的大内间距。number24paddingSM控制元素的小内间距。number12paddingXXS控制元素的极小内间距。number4