Switch 开关
role="switch" 的开关按钮。
基础用法
基础用法
禁用与加载
disabled / loading
loading 显示加载动画并阻止切换,用于异步提交场景。
开关文案
checked-text / unchecked-text 在开关上显示对应文案:medium/large/xl 尺寸显示在轨道内滑块对侧,size="xs" / size="small" 时文案放到开关外侧。
开关文案
尺寸
size 支持 xs / small / medium(默认)/ large / xl 五档;非法值回落 medium 并提示告警。
五种尺寸
自定义颜色
color 覆盖开启态主色(默认走 --oas-color-primary)。
自定义颜色
事件
切换事件
监听 oas-change(detail: { checked }):
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
checked | 是否开启 | boolean | — |
checked-text | 开启时显示的文案;medium/large/xl 在轨道内,xs/small 在轨道外侧 | — | — |
color | 开启态自定义主色,覆盖 --oas-color-primary(CSS 颜色值) | — | — |
disabled | 禁用 | boolean | — |
loading | 加载态,阻止切换 | boolean | — |
size | 尺寸:xs / small / medium(默认)/ large / xl;非法值回落 medium 并告警 | string | medium |
unchecked-text | 关闭时显示的文案;medium/large/xl 在轨道内,xs/small 在轨道外侧 | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 切换,detail: { checked } |