ant-design/components/tabs/index.zh-CN.md

category, group, title, subtitle, description, cover, coverDark

category	group	title	subtitle	description	cover	coverDark
Components	导航	Tabs	标签页	选项卡切换组件。	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8HMoTZUoSGoAAAAAAAAAAAAADrJ8AQ/original

何时使用

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

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

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

代码演示

基本 禁用 居中 图标 指示条 滑动 附加内容 大小 位置 卡片式页签 新增和关闭页签 卡片式页签容器 自定义新增页签触发器 自定义页签头 可拖拽标签 自定义语义结构的样式和类 动画 嵌套 组件 Token

API

通用属性参考：通用属性

Tabs

参数	说明	类型	默认值	版本
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 middle 和 small 三种大小	string	middle
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）