ant-design/components/tabs/index.zh-CN.md
Peach 6236e356b5
docs: update all site anchors (#39687)
* docs: update all site anchors

* docs: handle hash change from Link component
2022-12-22 14:12:26 +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 middlesmall 三种大小 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 页签的基本样式,可选 linecard 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 -