Tabs 选项卡

用于在同一页面切换不同内容视图的水平标签栏，支持下划线滑动指示器、横向无限滚动 (scrollable) 与胶囊浮动变体 (pill)。

---

代码示例

1. 基础选项卡 (Basic Tabs)

<template>
  <mu-tabs v-model="active" :items="items" @change="onChange" />
</template>

<script setup>
import { ref } from 'vue'

const active = ref(0)
const items = ref(['精选推荐', '数码极客', '服装美妆', '户外运动'])

const onChange = ({ index, item }) => {
  console.log('切换选项卡:', index, item)
}
</script>

---

2. 横向滚动与胶囊形态 (Scrollable & Pill)

<template>
  <!-- 超出无限横向滚动 -->
  <mu-tabs v-model="active1" :items="longItems" scrollable />

  <!-- 胶囊样式变体 -->
  <mu-tabs v-model="active2" :items="items" variant="pill" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model / modelValue / current / value	当前激活选中的选项索引	Number | String	-	0
items / tabs	选项卡标签数组 (字符串数组或对象数组 [{label}])	Array	-	[]
scrollable	是否开启超长选项横向滑动	Boolean	true | false	false
variant	外观形态变体	String	line (下划线) | pill (胶囊)	'line'
showLine	是否展示底部高亮指示线条 (line 变体下生效)	Boolean	true | false	true
lineColor	指示线条颜色 (留空使用全局主题色)	String	-	''
lineWidth	指示线条宽度 (rpx/px)	String	-	'36rpx'
lineHeight	指示线条高度 (rpx/px)	String	-	'6rpx'
activeColor / color	激活态文字与高亮颜色	String	-	''
bold	激活项文字是否加粗	Boolean	true | false	true
center	是否居中排列	Boolean	true | false	false
align	对齐方式	String	left | center | right | space-around	'center'
gutter	选项卡项目之间的横向间距 (rpx)	Number | String	-	24
jelly	是否开启“Q弹果冻”拉伸滑动动画	Boolean	true | false	true
sticky	是否开启吸顶置顶效果	Boolean	true | false	false
offsetTop	吸顶时的顶部偏移高度 (rpx/px)	Number | String	-	0
zIndex	吸顶层级 z-index	Number | String	-	99

---

事件说明 (Events)

事件名	说明	回调参数
update:modelValue / update:current / update:value	双向绑定索引改变时触发	(index: Number)
change	切换当前选项卡时触发	(index: Number, item: String | Object)