Selector 选择组

在一组选项中选择一个或多个

何时使用

提供多个选项供用户选择,一般在筛选和表单中使用

注意事项

  • 当作为表单组件,配合 Form/FormItem 组件使用时,需要设置 mode 的值为 form

代码示例

基本使用

属性

type SelectorItem = {
text: string;
value: string|number;
subText?: srting;
disabled?: boolean;
}

属性类型必填默认值说明
valuestring | number | string[] | number[]-已选择项, 取 items 每一项的 value
itemsSelectorItem[]-可选项
activeItemClassNamestring-每一项激活时新加类名
multiplebooleanfalse是否允许多选,标签栏显示的时候会显示当前单选/多选的状态
titlestring''标签栏标题
descstring''标签栏说明
idstring-表单元素 id
namestring-表单元素 name
disabledbooleanfalse是否禁用
maxSelectedCountnumber-最大选择数量
minSelectedCountnumber-最小选择数量
mode'noraml' | 'form''normal'配合From/FormItem组件使用时,需设置为 from
classNamestring-类名

事件

事件名说明类型
onChange选中值发生变化,触发回调(v: string | string[], selectedItem: SelectItem | SelectItem[], event: Event) => void
onSelectMax触发最大限制(v: string, item: SelectItem, event: Event) => void
onSelectMin触发最小限制(v: string, item: SelectItem, event: Event ) => void

样式类

类名说明
amd-selector整体样式
amd-selector-disabled禁用状态下的整体样式
amd-selector-content单个选项样式
amd-selector-item单个选项样式
amd-selector-item-active激活状态下单个样式
amd-selector-item-disabled禁用状态下单个选项样式
amd-selector-item-text文本样式
amd-selector-item-subtext副文本样式
amd-selector-item-badge-active激活状态下徽标样式