ButtonTabs 按钮式标签

以按钮样式呈现的选项卡栏。未选中项使用 normal（次要）按钮外观，选中项使用 primary（主操作）按钮外观且呈现按下态，并在按钮底部居中显示一条 1/3 宽度的白色横条作为选中指示。

标签会在组件可用宽度内等分排列，不继承普通按钮的固定宽度；窄容器中会继续收缩，超长文字以省略号显示，因此不会横向溢出。完整标签仍保留在按钮的可访问名称中。

基础用法

当前标签：video

import { ref } from 'vue'
const tab = ref('video')
const titleTab = ref('profile')
const colorTab = ref('world')

带标题

个人中心

当前选中：profile

import { ref } from 'vue'
const tab = ref('video')
const titleTab = ref('profile')
const colorTab = ref('world')

通过 title 属性在组件左上角放置标题文本，标题不占用按钮区域。

自定义颜色

每个标签项可通过 color 指定按钮背景色，该项的选中/未选中按钮都会使用该颜色。

当前维度：world

import { ref } from 'vue'
const tab = ref('video')
const titleTab = ref('profile')
const colorTab = ref('world')

API

Props

名称	类型	默认	说明
items	McButtonTabItem[]	[]	标签项 { label, value, disabled?, color? }
modelValue	string | number	''	当前选中值（v-model）
title	string	''	左上角标题

Events

事件	参数	说明
update:modelValue	string | number	v-model 更新
change	string | number	选中项变化

Slots

名称	说明
default	面板内容，插槽参数 { active }