TSegmentedControl / 分段控制器

SegmentedControl displays a group of options as segmented buttons. Supports vertical layout, fill width, and multiple sizes. / 分段控制器以分段按钮形式展示一组选项，支持垂直布局、填充宽度和多种尺寸。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
v-model	string	—	Selected value
options	SegmentedOption[]	—	Options (required)
size	'sm' | 'md' | 'lg'	'md'	Size
vertical	boolean	false	Vertical layout
fill	boolean	false	Fill container width
disabled	boolean	false	Disabled

Basic Usage / 基础用法

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

const active = ref('vue')
const options = [
  { label: 'Vue.js', value: 'vue' },
  { label: 'React', value: 'react' },
  { label: 'Svelte', value: 'svelte' },
]
</script>

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

Tips / 避坑指南

• options is required — each option needs label and value
• fill adds w-100 class to make buttons fill the container
• vertical changes the layout from horizontal to stacked