标签页 Tabs - Ant Design

添加链接

注册登录

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

微醺的红茶 · 殷正洋：90年代“三金歌王”，与周华健费玉清 ...· 2 周前 ·

慷慨大方的脸盆 · 博锐管理：获得巨额财产 ...· 1 月前 ·

光明磊落的眼镜 · 解决鼠标移入子元素触发父元素的mouseou ...· 2 月前 ·

爱旅游的小虾米 · 空间稀疏数据结构 | Taichi Docs· 4 月前 ·

追风的菠萝 · 琉璃-第1集-免費戲劇線上看｜ofiii 歐飛· 5 月前 ·

参数	说明	类型	默认值	版本
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
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`	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	切换面板的回调	(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

参数	说明	类型	默认值	版本
closeIcon	自定义关闭图标，在 `type="editable-card"` 时有效。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮	ReactNode	-
destroyInactiveTabPane	被隐藏时是否销毁 DOM 结构	boolean	false	5.11.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

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

Token 名称	描述	类型	默认值
cardBg	卡片标签页背景色	string	rgba(0, 0, 0, 0.02)
cardGutter	卡片标签间距	number	2
cardHeight	卡片标签页高度	string \| number	40
cardPadding	卡片标签页内间距	string	8px 16px
cardPaddingLG	大号卡片标签页内间距	string	8px 16px 6px
cardPaddingSM	小号卡片标签页内间距	string	6px 16px
horizontalItemGutter	横向标签页标签间距	number	32
horizontalItemMargin	横向标签页标签外间距	string
horizontalItemMarginRTL	横向标签页标签外间距（RTL）	string
horizontalItemPadding	横向标签页标签内间距	string	12px 0
horizontalItemPaddingLG	大号横向标签页标签内间距	string	16px 0
horizontalItemPaddingSM	小号横向标签页标签内间距	string	8px 0
horizontalMargin	横向标签页外间距	string	0 0 16px 0
inkBarColor	指示条颜色	string	#1677ff
itemActiveColor	标签激活态文本颜色	string	#0958d9
itemColor	标签文本颜色	string	rgba(0, 0, 0, 0.88)
itemHoverColor	标签悬浮态文本颜色	string	#4096ff
itemSelectedColor	标签选中态文本颜色	string	#1677ff
titleFontSize	标签页标题文本大小	number	14
titleFontSizeLG	大号标签页标题文本大小	number	16
titleFontSizeSM	小号标签页标题文本大小	number	14
verticalItemMargin	纵向标签页标签外间距	string	16px 0 0 0
verticalItemPadding	纵向标签页标签内间距	string	8px 24px
zIndexPopup	下拉菜单 z-index	number	1050

推荐文章

微醺的红茶 · 殷正洋：90年代“三金歌王”，与周华健费玉清同台，40岁淡出歌坛|记者|新歌|华语音乐_网易订阅

2 周前

慷慨大方的脸盆 · 博锐管理：获得巨额财产卓玛可能成亚洲女首富_财富人物_财经纵横_新浪网

1 月前

光明磊落的眼镜 · 解决鼠标移入子元素触发父元素的mouseout事件_winform一个控件上有多个子控件,鼠标指向子控件时避免触发父控件的mouseleave-CSDN博客

2 月前

爱旅游的小虾米 · 空间稀疏数据结构 | Taichi Docs

4 月前

追风的菠萝 · 琉璃-第1集-免費戲劇線上看｜ofiii 歐飛

5 月前

Link管理 · 51好读 · Sov5搜索 · 小百科

link管理 - 链接快照平台

Ant Design

Tabs

标签页

何时使用

代码演示

API

Tabs

TabItemType

MoreProps

主题变量（Design Token）

组件 Token 如何定制？

全局 Token 如何定制？

Tabs 标签页