ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

SegmentedControl 分段控件

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

基础用法

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

背景 视口
view = list
src/App.vue 
<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>
import { useState } from 'react';
import { CfSegmentedControl } from '@chufix-design/react';

export default function Demo() {
  const [view, setView] = useState('list');
  const [view, setView] = useState('list');
  return (
    <>
      <CfSegmentedControl
      value={view}
      onChange={setView}
      items={[
        { value: 'list', label: '列表' },
        { value: 'card', label: '卡片' },
        { value: 'kanban', label: '看板' },
      ]}
      />
    </>
  );
}
import { useState } from 'react';
import { CfSegmentedControl } from '@chufix-design/react';

export default function Demo() {
  const [view, setView] = useState('list');
  const [view, setView] = useState('list');
  return (
    <>
      <CfSegmentedControl
      value={view}
      onChange={setView}
      items={[
        { value: 'list', label: '列表' },
        { value: 'card', label: '卡片' },
        { value: 'kanban', label: '看板' },
      ]}
      />
    </>
  );
}

三档尺寸

背景 视口
src/App.vue 
<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>
import { useState } from 'react';
import { CfSegmentedControl } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('day');
  const [a, setA] = useState('day');
  const items = [
    { value: 'day', label: '日' },
    { value: 'week', label: '周' },
    { value: 'month', label: '月' },
  ];
  const [b, setB] = useState('day');
  const [b, setB] = useState('day');
  const [c, setC] = useState('day');
  const [c, setC] = useState('day');
  return (
    <>
      <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" />
    </>
  );
}
import { useState } from 'react';
import { CfSegmentedControl } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('day');
  const [a, setA] = useState('day');
  const items = [
    { value: 'day', label: '日' },
    { value: 'week', label: '周' },
    { value: 'month', label: '月' },
  ];
  const [b, setB] = useState('day');
  const [b, setB] = useState('day');
  const [c, setC] = useState('day');
  const [c, setC] = useState('day');
  return (
    <>
      <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（按宽度均分撑满父容器）。

背景 视口
src/App.vue 
<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>
      <CfSegmentedControl v-model="a" :items="items" align="start" />
    </div>
    <div>
      <CfSegmentedControl v-model="b" :items="items" align="center" />
    </div>
    <div>
      <CfSegmentedControl v-model="c" :items="items" align="end" />
    </div>
    <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>
      <CfSegmentedControl v-model="a" :items="items" align="start" />
    </div>
    <div>
      <CfSegmentedControl v-model="b" :items="items" align="center" />
    </div>
    <div>
      <CfSegmentedControl v-model="c" :items="items" align="end" />
    </div>
    <div>
      <CfSegmentedControl v-model="d" :items="items" align="stretch" />
    </div>
  </div>
</template>
import { useState } from 'react';
import { CfSegmentedControl } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('day');
  const [a, setA] = useState('day');
  const items = [
    { value: 'day', label: '日' },
    { value: 'week', label: '周' },
    { value: 'month', label: '月' },
  ];
  const [b, setB] = useState('day');
  const [b, setB] = useState('day');
  const [c, setC] = useState('day');
  const [c, setC] = useState('day');
  const [d, setD] = useState('day');
  const [d, setD] = useState('day');
  return (
    <>
      <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" />
    </>
  );
}
import { useState } from 'react';
import { CfSegmentedControl } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('day');
  const [a, setA] = useState('day');
  const items = [
    { value: 'day', label: '日' },
    { value: 'week', label: '周' },
    { value: 'month', label: '月' },
  ];
  const [b, setB] = useState('day');
  const [b, setB] = useState('day');
  const [c, setC] = useState('day');
  const [c, setC] = useState('day');
  const [d, setD] = useState('day');
  const [d, setD] = useState('day');
  return (
    <>
      <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
itemsSegmentedItem[][]{ value, label, disabled? }
size'sm' | 'md' | 'lg''md'尺寸
align'start' | 'center' | 'end' | 'stretch''start'对齐方式

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

反馈与讨论

SegmentedControl 分段控件 的讨论

0
0 / 600
正在加载评论...