复选列表
@astryxdesign/core v0.7.1 · CheckboxList
CheckboxList 属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
v-model | string[] | — | 已勾选的值。独立行不要传。 |
label | string | — | 必填。这一组的无障碍名称。 |
description | string | — | 标签下的说明。 |
density | 'compact' | 'balanced' | 'spacious' | 'balanced' | 行距。紧凑时用小号复选框。 |
hasDividers | boolean | false | 行与行之间画分隔线。 |
status | FieldStatusInput | — | 错误、警告或成功。 |
statusVariant | 'attached' | 'detached' | 'tooltip' | 'detached' | 状态消息的位置。 |
isDisabled | boolean | false | 禁用每一行。 |
disabledMessage | string | — | 整组被禁用的原因。和 isDisabled 一起用时,悬停或键盘聚焦会显示这段提示,每一行仍可聚焦(带 aria-disabled)。旧名 disabledReason 同样可用。 |
isReadOnly | boolean | false | 整组只读。勾选还在,不变暗,但不能改。和禁用同时设置时按禁用处理。 |
changeAction | (values) => void | Promise<void> | — | 勾选变化之后执行。进行中的那一行显示加载,并且不能再点。 |
containerClass | string | — | 加到字段外壳上的 class。横向标签的表单里没有外壳,这时不生效。 |
containerStyle | StyleValue | — | 加到字段外壳上的行内样式。落点同 containerClass。 |
controlClass | string | — | 加到选项组(role="group")上的 class,不会落到每一行的复选框上。 |
controlStyle | StyleValue | — | 加到选项组上的行内样式。 |
CheckboxListItem 属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | — | 必填。行标题,也是复选框的名称。需要链接等富内容时用 label 插槽,复选框的名字取可见文字。 |
ariaLabel | string | — | 覆盖复选框的无障碍名称。富文本标题没有可读文字时使用。 |
value | string | — | 集合模式必填。独立行不要传。 |
description | string | — | 次要文字,同时作为复选框的说明。富内容用 description 插槽,仍然通过 aria-describedby 关联。 |
isChecked | boolean | 'indeterminate' | — | 独立行的勾选状态。集合模式忽略它。 |
isDisabled | boolean | false | 禁用这一行。 |
isLoading | boolean | false | 这一行自己的加载。复选框里显示旋转指示,并且不能切换。 |
CheckboxListItem 事件和插槽
独立行通过 check 发出下一个布尔值。label 和 description 插槽放富文本。end 插槽画在标题后面。