Preview Updated 2026-05-10

Segmented control

Semantic alias export of the Tabs segmented variant — purpose-built for view / time-range switching.

Basic usage

CfSegmentedControl is equivalent to <CfTabs variant="segmented" /> with a more intuitive export name; the API matches 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>

<script setup>
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: 'List' },
  { value: 'card', label: 'Card' },
  { value: 'kanban', label: 'Kanban' },
]}
/>

<CfSegmentedControl
value={view}
onChange={setView}
items={[
  { value: 'list', label: 'List' },
  { value: 'card', label: 'Card' },
  { value: 'kanban', label: 'Kanban' },
]}
/>

Three sizes

背景

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

<script setup>
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" />

<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" />

Four alignments

align — start (default) / center / end / stretch (distribute width to fill the parent container).

背景

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>

<script setup>
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" />

<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

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`string`	`—`	Currently selected value
`items`	`SegmentedItem[]`	`[]`	`{ value, label, disabled? }`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`	Alignment

If you need line / pill styles or multi-view switching, use Tabs directly.