生成精致的切换开关样式,支持尺寸、颜色和状态控制。
使用可访问状态和用于设置面板、表单和交互式控件的复制就绪 CSS 构建可自定义的切换开关样式。
它为开关控件生成可配置尺寸、颜色和动效的 UI 样式。
它有助于标准化产品设置界面的切换外观。
它支持焦点、禁用和选中状态的可访问交互样式。
基本尺寸
轨道:44x24,拇指:20,间隙:2
颜色状态
关闭:#94A3B8,打开:#2563EB,对焦环:#93C5FD
运动配置
拇指过渡:180毫秒缓出
开关 CSS
.switch[data-checked='true'] { background: #2563EB; }拇指变换
transform:translateX(20px);
辅助功能说明
确保控件映射到语义复选框或开关角色。
开关看起来处于活动状态,但语义状态错误
将视觉状态绑定到实际检查值和 ARIA 属性。
缺少焦点指示器
为键盘用户添加清晰的焦点可见样式。
拇指移动卡顿
使用基于 transform 的动画,避免触发布局的属性。
关闭状态下的低对比度
增加与背景表面的关闭状态对比度。
CSS 开关样式生成器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
我应该使用复选框还是按钮作为开关?
基于复选框的语义对于二进制设置状态很常见。
开关触摸目标应该有多大?
移动端点击目标建议至少接近 44 像素,以保证操作舒适。
我可以分别为拇指和轨迹设置动画吗?
是的,但要保持时间连贯以避免动作尴尬。
开关需要文本标签吗?
是的,始终将开关与清晰的标签配对,以实现可访问性和清晰度。