ant-design/index.zh-CN.md at b554e061ee67b3ab145d2d8c32db0790976f1d99

mirror of https://github.com/ant-design/ant-design.git synced 2024-12-02 15:59:38 +08:00

* 做重复了

* Revert "做重复了"

This reverts commit 79c59e79ea66c6592df9dca0e41e10399044ec7a.

* site(theme): demo block supports no inner margin configuration

ref: https://d.umijs.org/guide/write-demo#%E4%B8%8D%E9%9C%80%E8%A6%81%E5%86%85%E8%BE%B9%E8%B7%9D

* docs(tabs): update demo styles

* chore: update style

* test: update snapshot

* Revert "site(theme): demo block supports no inner margin configuration"

This reverts commit ee2ff25796.

* chore: update

* Revert "chore: update"

This reverts commit bbe449cb3f.

* Revert "Revert "site(theme): demo block supports no inner margin configuration""

This reverts commit 5eac19e7f2.

* chore: convert to debug demo

* chore: use emotion

* test: update snapshot

2022-12-23 12:12:24 +08:00

4.4 KiB

Raw Blame History

category	subtitle	group	title	cover
Components	标签页	数据展示	Tabs	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original

选项卡切换组件。

何时使用

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

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

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

代码演示

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

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	-

4.4 KiB Raw Blame History Unescape Escape

何时使用

代码演示

API

Tabs

TabItemType

4.4 KiB

Raw Blame History