SegmentedControl 分段控制器

分段控制器组件，用于在多个互斥选项中快速切换。支持图标、尺寸、垂直排列等。

基础用法

通过 v-model 绑定当前选中值，options 定义选项列表。

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { TSegmentedControl } from '@gulcc/tabler-vue'

const seg = ref('list')
const options = [
  { value: 'list', label: '列表' },
  { value: 'grid', label: '网格' },
  { value: 'card', label: '卡片' },
]
</script>

<template>
  <TSegmentedControl v-model="seg" :options="options" />
</template>

带图标

通过选项的 icon 属性传入图标组件（来自 @tabler/icons-vue）。

<TSegmentedControl
  v-model="seg"
  :options="[
    { value: 'day', label: '日视图', icon: IconPhoto },
    { value: 'week', label: '周视图', icon: IconVideo },
    { value: 'month', label: '月视图', icon: IconMusic },
  ]"
/>

填充宽度

设置 fill 使选项平均填充容器宽度。

<TSegmentedControl v-model="seg" fill :options="options" />

垂直方向

设置 vertical 切换为垂直排列，适合侧边栏场景。

<TSegmentedControl v-model="seg" vertical :options="options" />

尺寸变体

通过 size 属性控制尺寸：sm（小）、md（默认）、lg（大）。

<TSegmentedControl v-model="seg" size="sm" :options="options" />
<TSegmentedControl v-model="seg" size="lg" :options="options" />

禁用状态

设置 disabled 禁用所有交互，或通过选项的 disabled 属性禁用单项。

查看代码

<!-- 全部禁用 -->
<TSegmentedControl v-model="seg" disabled :options="options" />

<!-- 单项禁用 -->
<TSegmentedControl
  v-model="seg"
  :options="[
    { value: 'a', label: 'A' },
    { value: 'b', label: 'B', disabled: true },
    { value: 'c', label: 'C' },
  ]"
/>

API

Props

参数	类型	默认值	说明
v-model / modelValue	string	''	当前选中的值
options	SegmentedOption[]	[]	选项列表
name	string	'segmented'	表单 name 属性
size	'sm' | 'md' | 'lg'	'md'	尺寸
vertical	boolean	false	垂直方向
fill	boolean	false	填充容器宽度
disabled	boolean	false	全局禁用

SegmentedOption

参数	类型	默认值	说明
value	string	—	选项值
label	string	—	显示文本
icon	Component	—	图标组件（来自 @tabler/icons-vue）
disabled	boolean	false	单个选项禁用

Emits

事件名	参数	说明
update:modelValue	(value: string)	v-model 更新事件
change	(value: string)	选中值变化时触发