多选
WdCheckboxList
适用场景
页面中平铺选项，用户可进行多项选择操作。
基础能力说明
1、绑定「枚举」类型字段，表单容器绑定数据模型后，模型中的枚举-多选会自动渲染为多选组件，支持用户进行数据多选。可配置默认选中值（配置默认选中值时需要输入选项值，非选项名称）、组件尺寸（PC 端生效，在移动端不生效）
2、支持标题的个性化配置，包含标题的内容、对齐方式、是否换行（开启时，标题字数超过一行时换行展示；关闭时，标题字数超过一行时省略展示）、标题位置、宽度、和标题的提示语
3、支持选项的个性化配置，包含选项的下方提示、排版方向、移动端是否展示下划线
注：
- 多选组件的选项排版方向支持横向和纵向排列，默认纵向，选择横向时，会根据选项长度自动换行；
- 多选组件的默认选中值支持配置多个默认选项值；
- 如果组件在表单容器中，组件尺寸，标题对齐、位置、换行、宽度默认会跟随表单容器的属性配置
了解更多的表单组件使用场景，可查阅 表单常见场景实践指南
示例
交互式预览
不同类型的多选
样式 API 自定义样式
#wd-page-root .wd-form-item .wd-checkbox-wrap.checkbox1 .wd-checkbox-label {
color: green;
}
#wd-page-root .wd-form-item .wd-checkbox-wrap.checkbox2 .wd-checkbox-label {
color: red;
}
属性
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 标题内容 | label | string | 标题 | "标题" | - |
| 显示标题 | labelVisible | boolean | 标题 | true | - |
| 标题对齐 | labelAlign | ""|"left"|"right" | 标题 | "" | 表单场景下默认会跟随表单容器的标题对齐配置 |
| 标题换行 | labelWrap | boolean | 标题 | false | 如果标题内容过长关闭时只显示一行、溢出省略；开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置 |
| 标题位置 | layout | ""|"horizontal"|"vertical" | 标题 | "" | 设置标题在表单组件的展示位置，表单场景下默认会跟随表单容器的标题的位置配置 |
| 标题宽度 | labelWidth | string | 标题 | - | 表单场景下默认会跟随表单容器的标题宽度配置 |
| 标题提示(移动端,PC端,WEB端) | labelTips | string | 标题 | - | 配置标题的工具提示内容 |
| 下方提示 | extra | string | 选项 | - | 配置后提示内容常显在组件下方 |
| 选项排列方式 | direction | "vertical"|"inline" | 选项 | "vertical" | - |
| 移动端显示下划线 | borderedH5 | boolean | 选项 | true | 关闭后移动端不显示底部下划线 |
| 状态 | status | "edit"|"disabled"|"readOnly" | 状态/校验 | "edit" | - |
| 必填 | required | boolean | 状态/校验 | false | 启用后该组件强制必填，值不可为空 |
| 必填标识 | requiredFlag | boolean | 状态/校验 | true | 启用后，组件若要求必填，则会显示必填星号标记 |
| 必填校验提示 | requiredMsg | string | 状态/校验 | "该项为必填项" | 启用必填，但组件值为空时的提示信息 |
| 绑定字段 | name | string | 通用 | "formCheckbox" | 提交表单时会将组件值提交保存到所配置的字段中 |
| 选项 | range | array | 通用 | [{"label":"选项1","value":"1"},{"label":"选项2","value":"2"}] | 供用户进行选择的选项列表 |
| 选中值 | value | array | 通用 | [] | 默认选中的选项 |
| 组件尺寸(PC端) | size | ""|"lg"|"md"|"sm" | 通用 | "" | 多选组件的尺寸宽度，仅在PC端生效 |
| 选项 | tipBlock | string | 通用 | "" | - |
事件
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 值改变 | change |
| 兼容三端 | - |
属性 API
通过属性 API，可以获取组件内部的状态和属性值
只读属性名 | 属性标识 | 类型 | 说明 |
|---|
| 绑定字段 | name | string | 表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。 |
| 输入值 | value | string | |
| 标题内容 | label | string | |
| 必填 | required | boolean | |
| 是否展示 | visible | boolean | 组件是否展示 |
| 是否禁用 | disabled | boolean | 组件是否禁用 |
| 是否只读 | readOnly | boolean | 组件是否只读 |
方法 API
通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等
方法名 | 方法标识 | 方法说明 |
|---|
| 设置值 | setValue | 通过 $w.id1.setValue("weda") 设置组件值 |
| 设置显隐 | setVisible | 通过 $w.id1.setVisible(false) 设置组件为隐藏 |
| 设置禁用 | setDisabled | 通过 $w.id1.setDisabled(true) 设置组件为禁用 |
| 清空值 | clearValue | 通过 $w.id1.clearValue() 清空组件值 |
| 设置只读 | setReadOnly | 通过 $w.id1.setReadOnly(true) 设置组件为只读 |
| 触发校验 | handleValidate | 通过 $w.id1.handleValidate() 校验组件值 |
| 清除校验 | clearValidate | 通过 $w.id1.clearValidate() 清除组件校验 |
样式 API
通过样式 API，可以覆盖组件中内部元素的样式来实现自定义
名称 | 类名 | 说明 |
|---|
| 根元素 | .wd-checkbox-root | 组件最外层元素 |
| H5 端根元素 | .wd-h5-checkbox-root | 可设定 H5 端的根元素样式 |
| PC 端根元素 | .wd-pc-checkbox-root | 可设定 PC 端的根元素样式 |
| 小程序端根元素 | .wd-mp-checkbox-root | 可设定小程序端的根元素样式 |
| 无边框状态 | .wd-checkbox-root.is-borderless | 设置组件无边框状态样式 |
| 必填状态 | .wd-checkbox-root.is-required | 设置组件必填状态样式 |
| 标题 | .wd-checkbox__label | 组件标题元素 |
| 标题禁用状态 | .wd-checkbox__label.is-disabled | 设置组件标题禁用状态样式 |
| 标题不换行 | .wd-checkbox__label.is-nowrap | 设置组件标题不换行时状态样式 |
| 提示文字 | .wd-checkbox__help | 设置组件提示文字样式 |
| 校验信息 | .wd-checkbox__error | 设置组件校验信息样式 |
| 组件本身 | .wd-checkbox-group | 组件本身元素 |
| 行内排版 | .wd-checkbox-group--inline | 组件行内排版样式 |
| 选项样式 | .wd-checkbox-wrap | 选项样式 |
| 选项禁用状态 | .wd-checkbox-wrap.is-disabled | 选项禁用状态 |
| 选项只读状态 | .wd-checkbox-wrap.is-disabled | 选项只读状态 |
| 小尺寸 | .wd-checkbox-wrap.size-sm | 小尺寸样式（仅PC端有效） |
| 默认尺寸 | .wd-checkbox-wrap.size-md | 默认、中尺寸样式（仅PC端有效） |
| 大尺寸 | .wd-checkbox-wrap.size-lg | 大尺寸样式 |
| 勾选状态 | .wd-checkbox-wrap.is-checked | 选项勾选状态 |
| 所有状态 | .wd-checkbox-wrap.is-indeterminate | 选项所有状态 |
| 按钮背景样式 | .wd-checkbox-inner | 选项按钮背景样式 |
| 按钮样式 | .wd-checkbox-inner::after | 选项按钮样式 |
| 文本样式 | .wd-checkbox-label | 选项内部文本样式 |
版本变化
- 属性变化
- 样式变化
- widget api 变化