分段选择器

用途

互斥单选(2–5 项),选中项可染语义色、可附图标。用例参考:类型(角色 / 弧盘)、稀有度(3 / 4 / 5 ★,即本例)、点数 / 集点赠礼 三组表单行。预览可点击切换。

设计规范 · macOS 26 / 27

• 对应 segmented control(NSSegmentedControl / 分段 Picker)在 macOS 26 的形态:选中指示为一块「浮起的玻璃」——fill 灰 rgba(120,120,128,.2) + 白描边 + 阴影;WWDC25:分段控件交互时选中块升起为液态玻璃并随手势滑动。
• 切换缓动 cubic-bezier(.2,.8,.2,1) 200ms,先快后缓的弹性滑感;指示块 rounded-lg 与选项圆角同心。
• 选中项才染语义色,未选中统一中性灰(#919191 / 暗 #ACAEAF),指示块保持中性不抢色。

语义色示例(稀有度)

选项染色是可选能力(逐项传入 color),不限于稀有度——任何互斥项需要语义色时皆可用;本例取抽卡游戏常用的稀有度配色。建议同一语义色板贯穿全应用(列表行文字、输入框同步染色),保持语义处处一致。

参考实现

Web 参考:SegSlider.vue(items: value / label / color? / icon?,defineModel)——把本例的三等宽 33.333% 泛化为按选中钮实测 offsetLeft / offsetWidth 定位,支持不等宽选项组;无色项选中改加粗 + label 色。原生对应 NSSegmentedControl。演示状态机提供 value / setValue。