大号 Switch · 文字样式
轨道内显示"开启"/"关闭"文字,开启 DB60 + G0白字,关闭 G40 + G0白字
开启态
开启 关闭
关闭态
开启 关闭
开启 · 禁用
开启 关闭
关闭 · 禁用
开启 关闭
大号 Switch · 图标样式
轨道内显示对勾(✓)/叉叉(×)图标,开启 DB60 + G0白图标,关闭 G40 + G0白图标
开启态
×
关闭态
×
开启 · 禁用
×
关闭 · 禁用
×
大号 Switch · 纯色样式
仅用颜色区分开启/关闭,轨道内无文字和图标
开启态
关闭态
开启 · 禁用
关闭 · 禁用
小号 Switch · 文字样式
48×20px 轨道,12px 文字"开启"/"关闭",14px 滑块
开启态
开启 关闭
关闭态
开启 关闭
开启 · 禁用
开启 关闭
关闭 · 禁用
开启 关闭
小号 Switch · 图标样式
48×20px 轨道,10px 对勾/叉叉图标,16px 滑块
开启态
×
关闭态
×
开启 · 禁用
×
关闭 · 禁用
×
小号 Switch · 纯色样式
48×20px 轨道,仅用颜色区分,无文字和图标
开启态
关闭态
开启 · 禁用
关闭 · 禁用
应用场景 · 卡片内开启关闭
开启关闭通常与文字标签搭配使用,放在卡片右侧
消息通知
接收应用推送消息
自动更新
Wi-Fi 环境下自动更新应用
深色模式
跟随系统自动切换
位置服务
允许应用获取位置信息
尺寸参数 — 大号
轨道宽度64px--sw-lg-w
轨道高度28px--sw-lg-h
滑块直径22px--sw-lg-thumb
轨道圆角14px--sw-lg-radius
滑块间距3px--sw-lg-gap
文字字号14px--sw-lg-font
图标尺寸12px--sw-lg-icon-size
尺寸参数 — 小号
轨道宽度48px--sw-sm-w
轨道高度20px--sw-sm-h
滑块直径14px--sw-sm-thumb
轨道圆角10px--sw-sm-radius
滑块间距3px--sw-sm-gap
文字字号12px--sw-sm-font
图标尺寸10px--sw-sm-icon-size
颜色 — 开启态
开启轨道背景#3388FF DB60--DB60
开启滑块#FFFFFF G0--G0
开启文字/图标#FFFFFF G0--G0
开启·禁用轨道#9EBFFF DB30--DB30
开启·禁用滑块#FFFFFF G0--G0
颜色 — 关闭态
关闭轨道背景#A8B4C8 G40--G40
关闭滑块#FFFFFF G0--G0
关闭文字/图标#FFFFFF G0--G0
关闭·禁用轨道#DDE1EB G20--G20
关闭·禁用滑块#FFFFFF G0--G0
滑块阴影
阴影0 1px 3px rgba(0,0,0,0.12)thumb_shadow
动画
背景过渡0.25s easetransition_bg
滑块滑动0.25s easetransition_thumb
返回组件首页