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

SegmentedControl 分段控件

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

基础用法

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

背景

view = list

<script setup lang="ts">
import { ref } from 'vue';
import { CfSegmentedControl } from '@chufix-design/vue';

const view = ref('list');
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfSegmentedControl
      v-model="view"
      :items="[
        { value: 'list', label: '列表' },
        { value: 'card', label: '卡片' },
        { value: 'kanban', label: '看板' },
      ]"
    />
    <span style="font-size: 12px; color: var(--fg-3);">view = <code>{{ view }}</code></span>
  </div>
</template>

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

三档尺寸

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfSegmentedControl } from '@chufix-design/vue';

const a = ref('day');
const b = ref('day');
const c = ref('day');

const items = [
  { value: 'day', label: '日' },
  { value: 'week', label: '周' },
  { value: 'month', label: '月' },
];
</script>

<template>
  <div class="demo-stack" style="align-items: flex-start;">
    <CfSegmentedControl v-model="a" :items="items" size="sm" />
    <CfSegmentedControl v-model="b" :items="items" size="md" />
    <CfSegmentedControl v-model="c" :items="items" size="lg" />
  </div>
</template>

<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（撑满）

<script setup lang="ts">
import { ref } from 'vue';
import { CfSegmentedControl } from '@chufix-design/vue';

const a = ref('day');
const b = ref('day');
const c = ref('day');
const d = ref('day');

const items = [
  { value: 'day', label: '日' },
  { value: 'week', label: '周' },
  { value: 'month', label: '月' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">align = start（默认）</div>
      <CfSegmentedControl v-model="a" :items="items" align="start" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">align = center</div>
      <CfSegmentedControl v-model="b" :items="items" align="center" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">align = end</div>
      <CfSegmentedControl v-model="c" :items="items" align="end" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">align = stretch（撑满）</div>
      <CfSegmentedControl v-model="d" :items="items" align="stretch" />
    </div>
  </div>
</template>

<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。