# 多选组

多个选项中选择一个或多个时使用的组件,支持基于动态数据源和静态数据进行显示。

# 概念说明

# 多选组属性

组件通用属性请参见组件通用说明

  • 选中最小数:多选组可以勾选多选框的最小数量。

  • 选中最大数:多选组可以勾选多选框的最大数量。

  • 只读:正常显示,但禁止选择或输入。

  • 禁用:置灰显示,且禁止任何交互(焦点、点击、选择、输入等)。

  • 转换器:将选中的值以选择的符号作为连接符,转为字符串格式;选择“json”则转为JSON字符串格式。

  • 数据源:支持动态绑定集合类型变量(List<T>)或输出参数为集合类型的逻辑。

  • 数据类型:该属性为只读状态,当数据源动态绑定集合List<T>后,会自动识别T的类型并进行展示。

  • 选项文本:集合的元素类型中,用于显示选项文本的属性名称,支持自定义变更。

  • 选项值:集合的元素类型中,用于标识选中值的属性,支持自定义变更。

  • 值:多选组的选中项,返还结构为List<T>。

    image-20230306184543969

# 多选项属性

  • 文本:选项显示的文本内容。

  • 值:选项返还的选项值。

  • 只读:正常显示,但禁止选择或输入。

  • 禁用:置灰显示,且禁止任何交互(焦点、点击、选择、输入等)。

    image-20230306184725186
  • 自动获取焦点:设置某个多选项自动获取焦点。

# 组件事件

  • 多选组支持输入组件常见的事件:输入时,选中后,改变后。
事件名 触发条件
输入时 多选组输入时触发
选中后 多选组选项选中后触发
改变后 多选组改变选项后触发
  • 多选项支持的事件包括:选中前,输入时,选中后,改变后。
事件名 触发条件
输入时 多选项输入时触发
选中后 多选项选中后触发
改变后 多选项改变后触发

# 样式

样式说明请参见组件通用说明

# 主题样式

  • 间距
    • space-x:多选项之间的间距,如 1px。默认值80px。
  • 大小
    • size:多选项按钮大小,如 1px。默认值16px。
  • 圆角
    • button-radius:多选项按钮圆角,如 1px。border-radius包含4个值,按顺序是上圆角、右圆角、下圆角、左圆角,数值个数可以是1至4个。1个表示所有圆角值都相等,2个表示上下同一个值左右同一个值,3个表示左右同一个值。默认值4px。
  • 背景色
    • background:多选项按钮的背景色,如 #223325。默认值#337EFF。
  • 内容颜色
    • color:多选项按钮的内容颜色,如 #223325。默认值white。
  • 阴影效果
    • box-shadow-focus:鼠标聚焦到多选按钮时边框的阴影效果值,如 2px 2px 2px 1px rgba(0, 0, 0, 0.2)。默认值0 0 0 2px rgba(77, 136, 255, 0.2)。
上次更新: 2023年06月14日