Tabs 选项卡

选项卡切换组件。

何时使用

用户需要通过平级的区域将大块内容进行收纳和展现，保持界面整洁。

Tabs基本用法

Tabs卡片风格的标签

Tabs带有边框的卡片风格

Tabs自定义标签页标题

Tabs标签位置的设置

Tabs参数

参数	类型	默认	说明
v-model	ModelValueType	-	绑定值，选中选项卡的 name
type	TabsType	-	风格类型
tab-position	ITabPositionType	top	选项卡所在位置

Tabs事件

事件	类型	说明
change	BeforeChangeType	activeName 改变时触发

tabs类型定义

ModelValueType

export type ModelValueType = string | number

ITabsType

export type ITabsType = '' | 'card' | 'border-card'

ITabPositionType

export type ITabPositionType = 'top' | 'right' | 'bottom' | 'left'

BeforeChangeType

export type Active = string | number | null
export type BeforeChangeType = (id: Active) => boolean

Tabs插槽

默认插槽

Tab参数

参数	类型	默认	说明
label	LabelType	-	选项卡标题
name	NameType	-	与选项卡绑定值 value 对应的标识符，表示选项卡别名

tab类型定义

LabelType

export type LabelType = string | number

NameType

export type NameType = string | number

Tab插槽

插槽名	说明
title	标签页标题
-	默认插槽