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

category	subtitle	group	title	cover	demo
Components	标签页	数据展示	Tabs	https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg	cols 2

选项卡切换组件。

何时使用

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

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

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

4.23.0 用法升级

// >=4.23.0 可用，推荐的写法 ✅
const items = [
  { label: '项目 1', key: 'item-1', children: '内容 1' }, // 务必填写 key
  { label: '项目 2', key: 'item-2', children: '内容 2' },
];
return <Tabs items={items} />;

// <4.23.0 可用，>=4.23.0 时不推荐 🙅🏻‍♀️
<Tabs>
  <Tabs.TabPane tab="项目 1" key="item-1">
    内容 1
  </Tabs.TabPane>
  <Tabs.TabPane tab="项目 2" key="item-2">
    内容 2
  </Tabs.TabPane>
</Tabs>;

代码演示

基础用法（废弃的语法糖） 基本 禁用 居中 图标 滑动 附加内容 大小 位置 卡片式页签 新增和关闭页签 卡片式页签容器 自定义新增页签触发器 自定义页签头 可拖拽标签 动画 嵌套

API

Tabs

参数	说明	类型	默认值	版本
activeKey	当前激活 tab 面板的 key	string	-
addIcon	自定义添加按钮	ReactNode	-	4.4.0
animated	是否使用动画切换 Tabs, 仅生效于 tabPosition="top"	boolean| { inkBar: boolean, tabPane: boolean }	{ inkBar: true, tabPane: false }
centered	标签居中展示	boolean	false	4.4.0
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	string	第一个面板
hideAdd	是否隐藏加号图标，在 type="editable-card" 时有效	boolean	false
items	配置选项卡内容	TabItemType	[]	4.23.0
moreIcon	自定义折叠 icon	ReactNode	<EllipsisOutlined />	4.14.0
popupClassName	更多菜单的 className	string	-	4.21.0
renderTabBar	替换 TabBar，用于二次封装标签头	(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement	-
size	大小，提供 large middle 和 small 三种大小	string	middle
tabBarExtraContent	tab bar 上额外的元素	ReactNode | {left?: ReactNode, right?: ReactNode}	-	object: 4.6.0
tabBarGutter	tabs 之间的间隙	number	-
tabBarStyle	tab bar 的样式对象	CSSProperties	-
tabPosition	页签位置，可选值有 top right bottom left	string	top
destroyInactiveTabPane	被隐藏时是否销毁 DOM 结构	boolean	false
type	页签的基本样式，可选 line、card editable-card 类型	string	line
onChange	切换面板的回调	function(activeKey) {}	-
onEdit	新增和删除页签的回调，在 type="editable-card" 时有效	(action === 'add' ? event : targetKey, action): void	-
onTabClick	tab 被点击的回调	function(key: string, event: MouseEvent)	-
onTabScroll	tab 滚动时触发	function({ direction: left | right | top | bottom })	-	4.3.0

更多属性查看 rc-tabs tabs

TabItemType

参数	说明	类型	默认值
closeIcon	自定义关闭图标，在 type="editable-card"时有效	ReactNode	-
disabled	禁用某一项	boolean	false
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey	string	-
label	选项卡头显示文字	ReactNode	-
children	选项卡头显示内容	ReactNode	-