Checkbox 复选框

在一组可选项中进行多选

何时使用

  • 在一组可选项中进行多项选择时
  • 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合

代码示例

基本使用

属性

属性说明类型默认值
checked是否选中booleanfalse
disabled是否禁用booleanfalse
color选中的颜色,同 CSS 色值stringfalse
valuecheckbox 携带的 value 值, 在原生 form 表单提交的时候有用string-
icon自定义未选中图标,支持Icon和图片路径string-
checkedIcon自定义选中状态的图标,支持Icon和图片路径string-
disabledIcon自定义禁用状态的图标,支持Icon和图片路径string-
disabledCheckedIcon自定义禁用选中状态的图标,支持Icon和图片路径string-
id表单元素 idstring-
name表单元素 namestring-
className类名string-

事件

事件名说明类型
onChange选中状态改变,触发回调(checked: boolean, event: Event) => void

插槽

名称说明
default内容区

样式类

类名说明
amd-checkbox标签样式
amd-checkbox-disabledcheckbox 组件禁用样式
amd-checkbox-checkedcheckbox 组件禁用样式
amd-checkbox-base原始 checkbox 样式
amd-checkbox-fakecheckbox 组件未选中样式
amd-checkbox-fake-custom自定义图标时的样式
amd-checkbox-content内容区样式