Brutalist Switch
机械式 Switch 状态与交互合约
Switch
Section titled “Switch”参考 Switch 源码 使用胶囊轨道与白色圆形 thumb,两者均为 2px 黑边、无阴影。根字号为 16px 时,轨道为 24×48px,thumb 为 16px。
- 关闭时为中性轨道,开启时为 main 蓝色;thumb 始终保持白色
- 只有 thumb 移动,行程为 1.25rem(根字号为 16px 时为 20px,两端外侧留白对称为 6px)
- transform/颜色过渡为 150ms;reduced motion 下 Thumb 位置立即切换
- press 不闪珊瑚色、不移动轨道,也不增加阴影
- 键盘 focus 保留 offset ring;disabled 保持形状并阻止 activation
Prototype 使用物理 left/right 定位,确保 RTL 父级下同样的几何仍居中且不越界;这不代表镜像 RTL switch 语义。可见 caption 位于 Switch Root 内,Base 在四种 Web runtime 中从同一文本推导 accessible name。点击 caption 走同一 activation 路径;disabled 示例保持不可操作。DM Sans 字体由 prototype 拥有,不支持的字形使用宿主 fallback。
拖动暂不支持:draggable 仅接受 false 或省略;原始输入 true 会回退为 false。点击与键盘激活仍可使用。后续拖动扩展需要让输入和 thumb 跟手显示使用同一份端点声明,并保持这些参考尺寸。
正在加载交互示例… 正文和源码已可阅读,交互控件就绪后会显示在这里。