Tabs

何时使用 {#when-to-use}

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

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

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

代码演示 {#examples}

<code src="./demo/basic.tsx">基本</code> <code src="./demo/disabled.tsx">禁用</code> <code src="./demo/centered.tsx">居中</code> <code src="./demo/icon.tsx">图标</code> <code src="./demo/custom-indicator.tsx">指示条</code> <code src="./demo/slide.tsx">滑动</code> <code src="./demo/extra.tsx">附加内容</code> <code src="./demo/size.tsx">大小</code> <code src="./demo/placement.tsx">位置</code> <code src="./demo/card.tsx">卡片式页签</code> <code src="./demo/editable-card.tsx">新增和关闭页签</code> <code src="./demo/card-top.tsx" compact background="grey" debug>卡片式页签容器</code> <code src="./demo/custom-add-trigger.tsx">自定义新增页签触发器</code> <code src="./demo/custom-tab-bar.tsx">自定义页签头</code> <code src="./demo/custom-tab-bar-node.tsx">可拖拽标签</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/animated.tsx" debug>动画</code> <code src="./demo/nest.tsx" debug>嵌套</code> <code src="./demo/component-token.tsx" debug>组件 Token</code>

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本
activeKey	当前激活 tab 面板的 key	string	-
addIcon	自定义添加按钮，设置 `type="editable-card"` 时有效	ReactNode	`<PlusOutlined />`	4.4.0
animated	是否使用动画切换 Tabs	boolean\| { inkBar: boolean, tabPane: boolean }	{ inkBar: true, tabPane: false }
centered	标签居中展示	boolean	false	4.4.0
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	string	`第一个面板的 key`
hideAdd	是否隐藏加号图标，在 `type="editable-card"` 时有效	boolean	false
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~~	更多菜单的 `className`, 请使用 `classNames.popup` 替换	string	-	4.21.0
renderTabBar	替换 TabBar，用于二次封装标签头	(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement	-
size	大小，提供 `large` `medium` 和 `small` 三种大小	string	`medium`
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
tabBarExtraContent	tab bar 上额外的元素	ReactNode \| {left?: ReactNode, right?: ReactNode}	-	object: 4.6.0
tabBarGutter	tabs 之间的间隙	number	-
tabBarStyle	tab bar 的样式对象	CSSProperties	-
tabPlacement	页签位置，可选值有 `top` `end` `bottom` `start`	string	`top`
~~tabPosition~~	页签位置，可选值有 `top` `right` `bottom` `left`，请使用 `tabPlacement` 替换	string	`top`
~~destroyInactiveTabPane~~	被隐藏时是否销毁 DOM 结构，使用 `destroyOnHidden` 代替	boolean	false
destroyOnHidden	被隐藏时是否销毁 DOM 结构	boolean	false	5.25.0
type	页签的基本样式，可选 `line`、`card` `editable-card` 类型	string	`line`
onChange	切换面板的回调	(activeKey: string) => void	-
onEdit	新增和删除页签的回调，在 `type="editable-card"` 时有效	(action === 'add' ? event : targetKey, action) => void	-
onTabClick	tab 被点击的回调	(key: string, event: MouseEvent) => void	-
onTabScroll	tab 滚动时触发	({ 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` 代替	boolean	false	5.11.0
destroyOnHidden	被隐藏时是否销毁 DOM 结构	boolean	false	5.25.0
disabled	禁用某一项	boolean	false
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey	string	-
label	选项卡头部文字元素	ReactNode	-
icon	选项卡头部图标元素	ReactNode	-	5.12.0
children	选项卡内容元素	ReactNode	-
closable	是否显示选项卡的关闭按钮，在 `type="editable-card"` 时有效	boolean	true

MoreProps

参数	说明	类型	默认值	版本
icon	自定义折叠图标	ReactNode	-
DropdownProps

Semantic DOM

主题变量（Design Token）{#design-token}