开发预览更新于 2026-05-10

SegmentedControl 分段控件

Tabs 的 segmented variant 语义化别名导出，专门用于「视图切换 / 时段切换」场景。

基础用法

CfSegmentedControl 等价于 <CfTabs variant="segmented" />，只是导出名更直观，API 与 Tabs 的 value / items / size / align 一致。

view = list

<CfSegmentedControl
v-model="view"
:items="[
  { value: 'list', label: '列表' },
  { value: 'card', label: '卡片' },
  { value: 'kanban', label: '看板' },
]"
/>

<CfSegmentedControl
value={view}
onChange={setView}
items={[
  { value: 'list', label: '列表' },
  { value: 'card', label: '卡片' },
  { value: 'kanban', label: '看板' },
]}
/>

三档尺寸

<CfSegmentedControl v-model="a" :items="items" size="sm" />
<CfSegmentedControl v-model="b" :items="items" size="md" />
<CfSegmentedControl v-model="c" :items="items" size="lg" />

<CfSegmentedControl value={a} onChange={setA} items={items} size="sm" />
<CfSegmentedControl value={b} onChange={setB} items={items} size="md" />
<CfSegmentedControl value={c} onChange={setC} items={items} size="lg" />

4 种对齐方式

align —— start（默认）/ center / end / stretch（按宽度均分撑满父容器）。

align = start（默认）

align = center

align = end

align = stretch（撑满）

<CfSegmentedControl v-model="a" :items="items" align="start" />
<CfSegmentedControl v-model="b" :items="items" align="center" />
<CfSegmentedControl v-model="c" :items="items" align="end" />
<CfSegmentedControl v-model="d" :items="items" align="stretch" />

<CfSegmentedControl value={a} onChange={setA} items={items} align="start" />
<CfSegmentedControl value={b} onChange={setB} items={items} align="center" />
<CfSegmentedControl value={c} onChange={setC} items={items} align="end" />
<CfSegmentedControl value={d} onChange={setD} items={items} align="stretch" />

API

属性	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`string`	`—`	当前选中 value
`items`	`SegmentedItem[]`	`[]`	`{ value, label, disabled? }`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`	对齐方式

如果你需要 line / pill 样式或多视图切换，请直接使用 Tabs。