Switch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
基础用法
自定义大小
文字描述
显示自定义图标
扩展的 value 类型
禁用状态
加载状态
阻止切换
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 开关选中状态 | any | false |
| size | 开关按钮的尺寸，默认单位为 px | number | string | 26px |
| loading | 是否为加载状态 | boolean | false |
| disabled | 是否为禁用状态 | boolean | false |
| active-value | 打开时对应的值 | any | true |
| inactive-value | 关闭时对应的值 | any | false |
| inline-prompt | 控制文本是否显示在点内 | boolean | false |
| active-text | 打开时的文字描述 | string | - |
| inactive-icon | 关闭时的文字描述 | string | - |
| active-icon | 打开时所显示图标，设置此项会忽略 active-text | string | Component | - |
| inactive-icon | 关闭时所显示图标，设置此项会忽略 inactive-text | string | Component | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 开关状态切换时触发 | value: any |
| click | 点击时触发 | event: MouseEvent |
Slots
| 名称 | 说明 | 参数 |
|---|---|---|
| node | 自定义按钮的内容 | - |
| background | 自定义开关的背景内容 | - |
类型定义
组件导出以下类型定义：
ts
import type { SwitchProps } from 'ryxon'主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --r-switch-size | 26px | - |
| --r-switch-width | calc(2em + 4px) | - |
| --r-switch-height | calc(1em + 4px) | - |
| --r-switch-node-size | 1em | - |
| --r-switch-node-background | var(--r-white) | - |
| --r-switch-node-shadow | 0 3px 1px 0 rgba(0, 0, 0, 0.05) | - |
| --r-switch-background | rgba(120, 120, 128, 0.16) | - |
| --r-switch-on-background | var(--r-primary-color) | - |
| --r-switch-duration | var(--r-duration-base) | - |
| --r-switch-disabled-opacity | var(--r-disabled-opacity) | - |