标签页 Tabs - Ant Design

相关文章推荐

果断的火柴 · Log4j 1.x ...· 6 月前 ·

小胡子的李子 · css先倾斜抖动后反转180%再倾斜抖动反转 ...· 9 月前 ·

迷茫的煎鸡蛋 · 不解压直接查看tar包内容-CSDN博客· 1 年前 ·

腼腆的皮带 · Jenkins入门之执行Powershell ...· 1 年前 ·

打篮球的鼠标垫 · parent.relativepath' ...· 1 年前 ·

参数	说明	类型	默认值	版本
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

推荐文章

果断的火柴 · Log4j 1.x JDBCAppender记录日志失效问题详解 - nuccch - 博客园

6 月前

小胡子的李子 · css先倾斜抖动后反转180%再倾斜抖动反转回来 - CSDN文库

9 月前

迷茫的煎鸡蛋 · 不解压直接查看tar包内容-CSDN博客

1 年前

腼腆的皮带 · Jenkins入门之执行Powershell脚本_51CTO博客_jenkins构建后执行脚本

1 年前

打篮球的鼠标垫 · parent.relativepath' points at no local pom - OSCHINA - 中文开源技术交流社区

1 年前

今天看啥 · Py中国 · codingpro · 小百科 · link之家 · 卧龙AI搜索

删除内容请联系邮箱 2879853325@qq.com

Code - 代码工具平台

Ant Design

Tabs

标签页

何时使用

代码演示

API

Tabs

TabItemType

MoreProps

主题变量（Design Token）

组件 Token 如何定制？

全局 Token 如何定制？

Tabs 标签页

何时使用

代码演示

API

Tabs

TabItemType

MoreProps

主题变量（Design Token）

组件 Token 如何定制？

全局 Token 如何定制？

Tabs

标签页