Tabs 标签页

分隔内容上等同层级的视图。

基础用法

用户管理内容

配置管理内容

角色管理内容

定时任务内容

<script setup>
import { ref } from 'vue'
import { DanTabs, DanTabPane } from '@dandan-ui/ui'

const active = ref('profile')
</script>

<template>
  <DanTabs v-model="active">
    <DanTabPane label="用户管理" name="user">用户管理内容</DanTabPane>
    <DanTabPane label="配置管理" name="config">配置管理内容</DanTabPane>
    <DanTabPane label="角色管理" name="role" disabled>角色管理内容</DanTabPane>
    <DanTabPane label="定时任务" name="profile">定时任务内容</DanTabPane>
  </DanTabs>
</template>

卡片样式

卡片样式选项一

卡片样式选项二

卡片样式选项三

<script setup>
import { ref } from 'vue'
import { DanTabs, DanTabPane } from '@dandan-ui/ui'

const active = ref('a')
</script>

<template>
  <DanTabs v-model="active" type="card">
    <DanTabPane label="选项一" name="a">卡片样式选项一</DanTabPane>
    <DanTabPane label="选项二" name="b">卡片样式选项二</DanTabPane>
    <DanTabPane label="选项三" name="c">卡片样式选项三</DanTabPane>
  </DanTabs>
</template>

Tabs Props

属性	说明	类型	默认值
modelValue / v-model	当前激活 tab 的 name	string | number	—
type	风格	'line' | 'card'	'line'

Tabs Events

事件	说明	参数
change	激活项变化时	(name)
tabClick	点击 tab 时	(name)

TabPane Props

属性	说明	类型	默认值
name	唯一标识	string | number	—
label	标题	string	''
disabled	禁用	boolean	false