SwSegmented

SwSegmented 是单选选项组（segmented / pill-group）：一组 { value, label } 选项平铺全可见，点击或方向键选中一个。受控 v-model，选中变化 emit update:modelValue。

薄壳套 reka-ui 的 RadioGroup，方向键 roving tabindex 无障碍（← → / Home End 在选项间移动并选中）开箱自带。视觉走「最小必要基础样式」——active 态默认主色填充、肉眼可辨，颜色 / 圆角 / 间距由 applier 覆盖。

选型：选项少（2–5 个）、要全部可见、省一次点击时用本组件（筛选 pills / tab / 排序）。选项多、要省横向空间、可接受点开收起时用 SwSelect（下拉）。二者互补。

基础用法

基础单选（排序切换）

加载中...
<script setup lang="ts">
const sort = ref('hot')
</script>

<template>
  <SwSegmented
    v-model="sort"
    :options="[
      { value: 'hot', label: '最热播' },
      { value: 'new', label: '最新上线' },
      { value: 'rating', label: '评分最高' },
    ]"
    aria-label="排序"
  />
</template>

禁用

支持单项 disabled（禁用列表中某一项）或整组 disabled：

单项禁用 / 整组禁用

加载中...

自定义选项视觉

#option 插槽全权控制单个选项的内容，作用域暴露 { option, selected, disabled }：

#option 插槽自定义视觉

加载中...

Props

名称类型必填默认值说明
modelValue（v-model）string | numberundefined当前选中值（受控）。undefined 为未选
optionsSwSegmentedOption[]✓—选项列表，每项 { value, label, disabled? }
disabledbooleanfalse整组禁用

SwSegmentedOption：{ value: string \| number; label: string; disabled?: boolean }

Events

名称携带说明
update:modelValuevalue: string | number选中变化，payload 为被选中项的 value

Slots

名称作用域参数说明
option{ option, selected, disabled }自定义单个选项视觉。不传则渲染 option.label

样式定制 Token

视觉品牌经 --sw-segmented-* token 覆盖（fallback 即默认视觉），无需 :deep 穿透：

Token默认值作用点
--sw-segmented-gap0.25remtrack 内选项间距
--sw-segmented-padding0.125remtrack 内边距
--sw-segmented-bgvar(--muted)track 底色（灰槽，业界通例形态）
--sw-segmented-bordertransparenttrack 描边色（1px 宽度常驻，设色值即得描边 track）
--sw-segmented-radiusvar(--radius)track 圆角
--sw-segmented-min-heightvar(--control-height)track 最小高（表单控件族统一高度）
--sw-segmented-font-sizevar(--control-font-size)选项字号
--sw-segmented-option-padding0.125rem 0.875rem选项内边距
--sw-segmented-option-radiuscalc(var(--radius) - 0.25rem)选项圆角
--sw-segmented-option-colorvar(--muted-foreground)未选中文字色
--sw-segmented-hover-colorvar(--foreground)未选中项 hover 文字色（选中项 hover 保持激活色 + filter: brightness(0.92) 变暗）
--sw-segmented-active-colorvar(--primary-foreground)激活文字色
--sw-segmented-active-bgvar(--primary)激活底色
--sw-segmented-active-bordertransparent激活描边（inset box-shadow 实现，零 reflow）
/* 「tinted 淡底 + 描边」激活形态（替代 :deep 穿透） */
.filter-bar {
  --sw-segmented-active-bg: color-mix(in srgb, var(--primary) 12%, transparent);
  --sw-segmented-active-color: var(--primary);
  --sw-segmented-active-border: var(--primary);
}

高度 / 字号默认吃表单控件族语义 token --control-height（32px）/ --control-font-size（14px）——SwInput / SwSelect / SwSegmented 同行混排默认等高；覆盖这两个 token 全站控件同步缩放，组件级 token 优先级更高。

注意事项

  • 无内置视觉品牌：组件只给最小必要基础样式（active 态可辨）；颜色 / 圆角 / 间距经上表 --sw-segmented-* token 覆盖，无需 :deep 穿透选择器。
  • 方向键 a11y 自带：← → / Home End 在选项间 roving 移动并选中，无需额外代码。
  • 单选专用：本组件只做单选；要下拉收起或多选请用 SwSelect。

相关