Tab 选项卡

基本用法

Loading demo...

APIs

Tab

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

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

可选值:
'pure', 'wrapped', 'text', 'capsule'
Enum'pure'
defaultActiveKey初始化时被激活的选项卡的 keyNumber/String-
animation是否开启动效Booleantrue
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-
disableKeyboard禁止键盘事件,设置后无法通过键盘的上下左右按键,切换当前选中的tabBooleanfalse
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-
icons自定义组件内 iconObject{}

Tab.Item

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

Demos

不同模式

shape 属性设置不同场景 Tab 样式

Loading demo...

不同尺寸

size 属性设置 Tab 大小尺寸

Loading demo...

Tab 摆放位置

tabPosition 属性设置 Tab 位置

Loading demo...

Tab 触发方式

triggerType 属性设置 Tab 触发方式

Loading demo...

Tab 自定义

Loading demo...

Tab 导航栏附加内容

Extra 属性设置 Tab 附加内容

Loading demo...

可编辑 Tab

Loading demo...

嵌套模式 Tab

Loading demo...

可关闭 Tab

closeable 属性设置 Tab 可关闭

Loading demo...