选项卡切换组件。
TAB 让用户可以在不同子任务、视图、模式之间切换,它具有全局导航的作用,是全局功能的主要展示和切换区域,一个TAB标记一个核心功能,TAB之间可以快速点击切换。该窗口包含2个以上的选项卡,所有选项卡可以排列在一行中,即使该用户界面被本地化后也是如此。提供平级的区域将大块内容进行收纳和展现,保持界面整洁。
Fusion 提供了三级选项卡,分别用于不同的场景。
如果您不想开启动效,可以通过设置 animation
属性值为 false
来关闭。
根据使用场景及触发控件的类型,可以通过 shape
属性配置选项卡的类型,主要包括:
pure
普通选项卡(默认)wrapped
包裹型选项卡text
文本型选项卡capsule
胶囊型选项卡默认情况 Tab 不会提前渲染好所有的内容,而是根据 Tab 的激活情况依次进行渲染。
lazyLoad={false}
一次渲染所有 TabItem 内容。unmountInactiveTabs
在切换选项卡时自动卸载其他 TabItem。当 Tab 标签非常多时,组件会自动增加滑动支持(可以左右、上下滑动)。可以用过 excessMode
属性切换滑动模式,该属性仅在tabPosition
为top
或者bottom
时生效。
Tab 允许开发者在上层进行自由的行为控制,例如用户可以基于 Tab 开发一个标题部分双击可编辑的 Tab , 此时用户只要传入自定义组件给 TabPane 即可,Tab 可以将底层事件对象传递给用户的自定义组件。
当 Tab 位于 Grid 组件的布局中时,由于 Grid 默认使用 flex
布局方式,当选项卡数量过多时,会导致内层元素撑起整个 flex
容器,此时需要给容器添加自定义样式 overflow: hidden
。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
activeKey | 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换 | Number/String | - |
size | 尺寸 可选值: 'small', 'medium' |
Enum | 'medium' |
shape | 外观形态 可选值: 'pure', 'wrapped', 'text', 'capsule' |
Enum | 'pure' |
defaultActiveKey | 初始化时被激活的选项卡的 key | Number/String | - |
animation | 是否开启动效 | Boolean | true |
excessMode | 选项卡过多时的滑动模式 可选值: 'slide', 'dropdown' |
Enum | 'slide' |
tabPosition | 导航选项卡的位置,只适用于包裹型(wrapped)选项卡 可选值: 'top', 'bottom', 'left', 'right' |
Enum | 'top' |
triggerType | 激活选项卡的触发方式 可选值: 'hover', 'click' |
Enum | 'click' |
lazyLoad | 是否延迟加载 TabItem 的内容, 默认开启, 即不提前渲染 | Boolean | true |
unmountInactiveTabs | 是否自动卸载未处于激活状态的选项卡 | Boolean | false |
navStyle | 导航条的自定义样式 | Object | - |
navClassName | 导航条的自定义样式类 | String | - |
contentStyle | 内容区容器的自定义样式 | Object | - |
contentClassName | 内容区容器的自定义样式类 | String | - |
extra | 导航栏附加内容 | ReactNode | - |
disableKeyboard | 禁止键盘事件,设置后无法通过键盘的上下左右按键,切换当前选中的tab | Boolean | false |
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 | 自定义组件内 icon | Object | {} |
showAdd | 新增按钮 | Boolean | - |
onAdd | 新增的事件回调 签名: Function() => void |
Function | - |
addIcon | 自定义添加按钮 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 选项卡标题 | ReactNode | - |
closeable | 单个选项卡是否可关闭 | Boolean | false |
disabled | 选项卡是否被禁用 | Boolean | - |
按键 | 说明 |
---|---|
Right Arrow | 切换至前一项Tab.Item |
Left Arrow | 切换至后一项Tab.Item |