定价

Segmented

Figma 源代码

将少量互斥选项并排展示，便于快速切换筛选条件或参数，并支持键盘与表单交互。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于多个互斥参数或过滤条件之间单选，使用 radiogroup 语义。切换不同内容面板或视图时使用 Tab。

  • 使用 bind:value 与稳定选项值；缺失或不匹配时只视觉回退到首项，不自动写回绑定值，表单请显式初始化。

  • 显式子项使用 Button as="item"；name 非空时提供隐藏表单字段，表单重置由应用恢复业务值。

导入

import { Segmented } from '@snowui-design-system/components';

用法

变体

尺寸

垂直布局

填充

组合

表单

API 参考

属性 类型 默认值 示例 描述
value string — value="all" 当前选项的唯一值，支持 bind:value；点击或方向键激活选项时更新。未指定或没有匹配项时，视觉回退到首个可用项，但不会自动写回绑定值；表单场景应显式初始化。
name string — name="frequency" 非空时输出同名隐藏字段，原生 FormData 读取当前 value；未定义值提交为空字符串。需置于表单内部；业务绑定初值的恢复由调用方在 reset 时处理。
children Snippet — <Segmented value="all"><Button as="item" value="all">All</Button><Button as="item" value="component">Component</Button></Segmented> 无参数的显式子项内容，使用 Button as="item" 与唯一 value；优先于 items，逐项直接配置 Button Props。
class string "" class="my-component" 合并到真实 Tab 根节点的外部 class，保留 Segmented 自身标识；不作用于隐藏表单字段。
parts ComponentPartsOf<{ Button: typeof Button }> — parts={{ Button: { scaleOnHover: false } }} 通过 parts.Button 批量配置 items 模式生成的 Button，例如 scaleOnHover；不覆盖显式 children 子项，不提供 parts.Tab。