Switch
开关选择器，表示两种互斥状态的即时切换，支持加载态与自定义文案。
如何引入
import { Switch } from '@chenzy-design/svelte';基本用法
通过 bind:value 双向绑定开关状态。
关
尺寸
提供 large / default / small 三种尺寸。
带文字
通过 checkedChildren / uncheckedChildren 显示开关文案。
状态
支持禁用与加载中状态。
加载中
loading 锁定交互并展示 spinner。
外部文本(推荐)
相比内嵌文字,更推荐将说明文本放在 Switch 外部。
已关闭
受控
value 完全受控,配合 onChange 使用。
API 参考
Switch
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 受控值；提供则为受控 | boolean | undefined |
defaultValue | 非受控初始值 | boolean | false |
checkedValue | 开态映射的实际值（onChange.nativeValue 与表单提交值） | string | number | boolean | true |
uncheckedValue | 关态映射的实际值 | string | number | boolean | false |
size | — | 'small'|'default'|'large' | default |
status | — | 'default'|'warning'|'error' | default |
disabled | — | boolean | false |
loading | — | boolean | false |
checkedChildren | 开态内嵌文字/图标（size=small 时无效） | string | Snippet | undefined |
uncheckedChildren | 关态内嵌文字/图标（size=small 时无效） | string | Snippet | undefined |
checkedText | checked 时显示的文字（checkedChildren 的字符串别名；size=small 时无效） | string | undefined |
uncheckedText | unchecked 时显示的文字（size=small 时无效） | string | undefined |
checkedContent | checked 时的 Snippet（checkedChildren 的 Snippet 别名；size=small 时无效） | Snippet | undefined |
uncheckedContent | unchecked 时的 Snippet（size=small 时无效） | Snippet | undefined |
name | — | string | undefined |
required | 表单必填校验（须为开态） | boolean | false |
ariaLabel | — | string | undefined |
ariaLabelledby | 关联外部可见文本 id（优先于 ariaLabel） | string | undefined |
announceOnChange | 切换后用 live region 播报新状态 | boolean | false |
autofocus | 挂载后自动聚焦 | boolean | false |
onChange | — | (v: boolean, detail?: { value: boolean; nativeValue: string|number|boolean; event: Event }) => void | undefined |
onFocus | 获得焦点 | (event: FocusEvent) => void | undefined |
onBlur | 失去焦点 | (event: FocusEvent) => void | undefined |
onKeydown | 键盘按下（自定义快捷键扩展） | (event: KeyboardEvent) => void | undefined |
onMouseEnter | 鼠标进入 | (e: MouseEvent) => void | undefined |
onMouseLeave | 鼠标离开 | (e: MouseEvent) => void | undefined |
Accessibility
| ARIA role | switch |
| 键盘交互 | EnterSpace |
- 原生 button role=switch
- aria-checked 反映状态
- loading 时 aria-busy
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-motion-switch-transitionduration | var(--cd-motion-duration-mid) | 开关动画时长 |
--cd-switch-spinner-duration | var(--cd-motion-duration-slow) | 加载 spinner 旋转时长（组件消费） |
--cd-switch-transition-duration | var(--cd-motion-switch-transitionduration) | 开关过渡动画时长（组件消费） |
--cd-switch-transition-easing | var(--cd-motion-ease-standard) | 开关过渡动画曲线（组件消费） |