Tabs 选项卡

选项卡1
选项卡2
选项卡3

基础选项卡

使用选项卡切换内容模块,操作后不会进行页面跳转。

选项卡1
选项卡2
选项卡3

选项卡1的内容,使用 t-tab-panel 渲染

选项卡一
选项卡二
选项卡三

这是选项卡一的内容,使用 t-tabs 渲染

带图标的选项卡

在基础选项卡基础上,在每个标签前添加图标,方便用户快速理解。

首页
日程
事项

首页的内容

增删选项卡

用户可添加、删除选项卡,满足自定义场景。

原有选项卡
原有选项卡

原有选项卡内容

不同尺寸的选项卡

提供 大、中(默认)两种尺寸。

选项卡1
选项卡2
选项卡3

选项卡1

选项卡1
选项卡2
选项卡3

选项卡1

不同风格的选项卡

提供 默认 和 卡片 两种风格。

选项卡1
选项卡2
选项卡3

选项卡1

选项卡1
选项卡2
选项卡3

选项卡1

不同位置的选项卡

提供 上、右、下、左 不同位置的选项卡。

选项卡1
选项卡2
选项卡3

选项卡1

可滑动的选项卡

当选项卡数量超出最大宽度,可通过滑动展示选项卡。

选项卡1
选项卡2
选项卡3
选项卡4
选项卡5
选项卡6
选项卡7
选项卡8
选项卡9
选项卡10
选项卡11
选项卡12
选项卡13
选项卡14
选项卡15
选项卡16
选项卡17
选项卡18
选项卡19
选项卡20
选项卡21
选项卡22
选项卡23
选项卡24
选项卡25
选项卡26
选项卡27
选项卡28
选项卡29
选项卡30

选项卡22

带禁用状态的选项卡

提供了选项卡的禁用状态。

选项卡1
选项卡2
选项卡3

选项卡1的内容

可拖拽的选项卡

提供了可拖拽的选项卡。

DEMO (🚧建设中)...

懒加载

通过设置 lazy,可以实现懒加载,只在选中tab时才进行渲染。

DEMO (🚧建设中)...

Tabs Props

名称类型默认值描述必传
actionString / Slot / Function-【开发中】选项卡右侧的操作区域。TS 类型:string | TNode通用类型定义N
addableBooleanfalse选项卡是否可增加N
disabledBooleanfalse是否禁用选项卡N
dragSortBooleanfalse是否开启拖拽调整顺序N
listArray-选项卡列表。TS 类型:Array<TdTabPanelProps>N
placementStringtop选项卡位置。可选项:left/top/bottom/rightN
scrollPositionStringautoTab较多的时候,选中滑块滚动最终停留的位置。可选项:auto/start/center/endN
sizeStringmedium组件尺寸。可选项:medium/largeN
themeStringnormal选项卡风格,包含 默认风格 和 卡片风格两种。可选项:normal/cardN
valueString / Number-激活的选项卡值。支持语法糖 v-model。TS 类型:TabValue type TabValue = string | number详细类型定义N
defaultValueString / Number-激活的选项卡值。非受控属性。TS 类型:TabValue type TabValue = string | number详细类型定义N
onAddFunctionTS 类型:(context: { e: MouseEvent }) => void
添加选项卡时触发
N
onChangeFunctionTS 类型:(value: TabValue) => void
激活的选项卡发生变化时触发
N
onDragSortFunctionTS 类型:(context: TabsDragSortContext) => void
拖拽排序时触发。详细类型定义
interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }
N
onRemoveFunctionTS 类型:(options: { value: TabValue; index: number; e: MouseEvent }) => void
删除选项卡时触发
N

Tabs Events

名称参数描述
add(context: { e: MouseEvent })添加选项卡时触发
change(value: TabValue)激活的选项卡发生变化时触发
drag-sort(context: TabsDragSortContext)拖拽排序时触发。详细类型定义
interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }
remove(options: { value: TabValue; index: number; e: MouseEvent })删除选项卡时触发

TabPanel Props

名称类型默认值描述必传
defaultSlot / Function-用于自定义选项卡导航,同 panel。TS 类型:TNode通用类型定义N
destroyOnHideBooleantrue选项卡内容隐藏时是否销毁N
disabledBooleanfalse是否禁用当前选项卡N
labelString / Slot / Function-选项卡名称,可自定义选项卡导航内容。TS 类型:string | TNode通用类型定义N
panelString / Slot / Function-用于自定义选项卡面板内容。TS 类型:string | TNode通用类型定义N
removableBooleanfalse当前选项卡是否允许移除N
valueString / Number-选项卡的值,唯一标识。TS 类型:TabValueN
onRemoveFunctionTS 类型:(options: { value: TabValue; e: MouseEvent }) => void
点击删除按钮时触发
N
lazyBooleanfalse标签内容是否延迟渲染N

TabPanel Events

名称参数描述
remove(options: { value: TabValue; e: MouseEvent })点击删除按钮时触发

何时使用

当内容过多时需要将不同类型内容进行扁平化收纳。

与页面布局相关

可根据实际使用情况(空间有限,或有特殊诉求的场景等),在内容模块的上下左右不同位置放置选项卡。

图示:居于上方

图示:居于下方

图示:居于左侧

图示:居于右侧

组件搭配使用

不同层级选项卡搭配使用,可以更好区分不同主次内容的层级。

推荐/慎用示例

当标签过多无法在一行展示完整时,不要让选项卡换行,可以考虑使用滑动展示。

选项卡内的图标需要结合文字展示,不能只使用图标。

切换选项卡时在同一页面内进行,建议不要跳转新启页面。
  • left
  • top
  • bottom
  • right
  • medium
  • large
  • normal
  • card