Switch 开关

开关选择器,相比较于原生switch实现了ios跟android端体验一致

何时使用

  • 需要表示开关状态/两种状态之间的切换时
  • 和 checkbox 的区别是,切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合

代码示例

基本使用

属性

属性类型必填默认值说明
checkedboolean否-是否勾选
disabledboolean否false是否禁用
loadingboolean否false是否加载状态
colorstring否'#1677ff'选中背景色
checkedTextstring否-选中时的内容
uncheckedTextstring否-非选中时的内容
size'medium' | 'small' | 'x-small'否medium组件尺寸
controlledboolean否false是否受控
mode'normal' |'form'否'normal'配合From/FormItem组件使用时,需设置为 from
classNamestring否-类名

事件

事件名说明类型
onChange点击 switch ,触发此回调(checked: boolean, event: Event) => void

插槽

名称说明
checked选中时的内容插槽
unchecked非选中时的内容插槽

样式类

类名说明
amd-switch整体样式
amd-switch-checked选中时的样式
amd-switch-disabled禁用时的样式