Skip to content

Tabs 标签页

Tabs(标签页)组件是一种常见的界面模式,用于在有限空间内组织和切换多个内容面板,使信息呈现更具条理且易于浏览。用户通过点击或滑动标签快速在不同内容区域间切换,提升交互效率。

引入

typescript
// 引入组件
import { Tab, TabItem } from '@versakit/vue'

基础用法

使用TabTabItem组件可以灵活地自定义标签页内容。

loading

API

Tab Props

属性说明类型默认值
initialIndex初始选中的标签索引number0
size标签页尺寸'sm' | 'md' | 'lg''md'
disabled是否禁用所有标签booleanfalse
block是否块级显示(宽度100%)booleanfalse
unstyled是否使用无样式模式booleanfalse
pt自定义样式TabsPT-

TabItem Props

属性说明类型默认值
label标签文本string-
disabled是否禁用该标签booleanfalse
icon图标URLstring-

Events

事件名说明回调参数
change当前激活的标签改变时触发(index: number) => void

TabsPT 类型定义

typescript
type TabsPT = {
	container?: string
	trigger?: string
	panel?: string
	icon?: string
}