Tab 选项卡

在同一个模块内快速切换多个内容。

Tab 选项卡

Guide

TAB 让用户可以在不同子任务、视图、模式之间切换,它具有全局导航的作用, 是全局功能的主要展示和切换区域,一个TAB标记一个核心功能,TAB之间可以快速点击切换。 该窗口包含2个以上的选项卡,所有选项卡可以排列在一行中,即使该用户界面被本地化后也是如此。 提供平级的区域将大块内容进行收纳和展现,保持界面整洁。

何时使用

AT 提供了三级选项卡,分别用于不同的场景。

  • 普通选项卡,引领整页面的内容,起导航的作用。

  • 文本型选项卡。

  • 包裹型选项卡,在页面结构中,只是局部展示,需要和其他内容结合出现。

  • 胶囊型选项卡。

关于动效

如果您想开启动效,可以通过设置 animation 属性值为 true 来打开。

...
切换选项 A 内容

简单用法

使用 Tab 最简单的例子。

...
首页内容

带徽标

使用 Tab 带有徽标,需结合组件 Badge 使用。

...
首页内容

带图标

使用 Tab 带有图标,需结合组件 Icon 使用。

邮件 content

可关闭选项卡

可关闭选项卡,可以通过在 Tab.Item 上设置 closeable 属性设置该选项卡是否可关闭。

首页内容

首页内容

首页内容

首页内容

尺寸

组件尺寸,可以通过size属性设置,提供medium(默认)和small两种尺寸, small尺寸的选项卡组件可以用在弹出框等较狭窄的容器内。

渲染所有tab内容
首页内容
卸载未激活tab
首页内容

按需加载和自动卸载

默认情况 Tab 不会提前渲染好所有的内容,而是根据 Tab 的激活情况依次进行渲染。某些时候,如果你想一次渲染好所有内容,可以设置 lazyLoad={false} 进行关闭。此外,某些时候,如果你想每次切换选项卡时自动卸载未激活的 Tab,可以设置 unmountInactiveTabs 开启。



Tab 1 Content

位置

包裹型选项卡支持通过 tabPosition 属性设置选项卡的位置,支持 top | right | bottom | left 四个方向。

首页内容
首页内容
首页内容
首页内容

形态

根据使用场景及触发控件的类型,可以通过 shape 属性配置选项卡的类型,主要包括:

面板2内容

禁用

可以通过 disabled 属性禁用某一个选型卡。

使用contentStyle 或 contentClassName自定义样式
待做任务
对 Tab.Item 设置 className 和 style
待做任务
等宽Tabs
待做任务

自定义样式

在 Tab 已有样式的基础上,可以通过 contentStyle, contentClassName 等属性自由的进行样式自定义。

Extra in Horizontal
Tab 1 Content
Extra in Vertical
Tab 1 Content

附加额外内容

通过 extra 属性添加附加内容,请确保只在有限选项卡的情况下才使用附加内容, 该功能在选项卡溢出时会和溢出导航的按钮冲突。

API

Tab

参数说明类型默认值
activeKey被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换Number/String-
size尺寸

可选值:
'small', 'medium'
Enum'medium'
shape外观形态

可选值:
'pure', 'wrapped', 'text', 'capsule'
Enum'pure'
defaultActiveKey初始化时被激活的选项卡的 keyNumber/String-
animation是否开启动效Booleanfalse
excessMode选项卡过多时的滑动模式

可选值:
'slide', 'dropdown'
Enum'slide'
tabPosition导航选项卡的位置,只适用于包裹型(wrapped)选项卡

可选值:
'top', 'bottom', 'left', 'right'
Enum'top'
triggerType激活选项卡的触发方式

可选值:
'hover', 'click'
Enum'click'
lazyLoad是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染Booleantrue
unmountInactiveTabs是否自动卸载未处于激活状态的选项卡Booleanfalse
navStyle导航条的自定义样式Object-
navClassName导航条的自定义样式类String-
contentStyle内容区容器的自定义样式Object-
contentClassName内容区容器的自定义样式类String-
extra导航栏附加内容ReactNode-
onClick点击单个选项卡时触发的回调

签名:
Function() => void
Function() => {}
onChange选项卡发生切换时的事件回调

签名:
Function(key: String/Number) => void
参数:
key: {String/Number} 改变后的 key
Function() => {}
onClose选项卡被关闭时的事件回调

签名:
Function(key: String/Number) => void
参数:
key: {String/Number} 关闭的选项卡的 key
Function() => {}
tabRender自定义选项卡模板渲染函数

签名:
Function(key: String, props: Object) => ReactNode
参数:
key: {String} 当前 Tab.Item 的 key 值
props: {Object} 传给 Tab.Item 的所有属性键值对
返回值:
{ReactNode} 返回自定义组件
Function-
popupProps弹层属性透传, 只有当 excessMode 为 dropdown 时生效Object-

Tab.Item

参数说明类型默认值
title选项卡标题ReactNode-
closeable单个选项卡是否可关闭Booleanfalse
badge单个选项卡带有的徽标ReactNode-
icon单个选项卡带有的图标ReactNode-
disabled选项卡是否被禁用Boolean-

ARIA and KeyBoard

按键说明
Right Arrow切换至前一项Tab.Item
Left Arrow切换至后一项Tab.Item