Skip to content

复选列表

@astryxdesign/core v0.7.1 · CheckboxList

CheckboxList 属性 ​

名称类型默认值说明
v-modelstring[]—已勾选的值。独立行不要传。
labelstring—必填。这一组的无障碍名称。
descriptionstring—标签下的说明。
density'compact' | 'balanced' | 'spacious''balanced'行距。紧凑时用小号复选框。
hasDividersbooleanfalse行与行之间画分隔线。
statusFieldStatusInput—错误、警告或成功。
statusVariant'attached' | 'detached' | 'tooltip''detached'状态消息的位置。
isDisabledbooleanfalse禁用每一行。
disabledMessagestring—整组被禁用的原因。和 isDisabled 一起用时,悬停或键盘聚焦会显示这段提示,每一行仍可聚焦(带 aria-disabled)。旧名 disabledReason 同样可用。
isReadOnlybooleanfalse整组只读。勾选还在,不变暗,但不能改。和禁用同时设置时按禁用处理。
changeAction(values) => void | Promise<void>—勾选变化之后执行。进行中的那一行显示加载,并且不能再点。
containerClassstring—加到字段外壳上的 class。横向标签的表单里没有外壳,这时不生效。
containerStyleStyleValue—加到字段外壳上的行内样式。落点同 containerClass。
controlClassstring—加到选项组(role="group")上的 class,不会落到每一行的复选框上。
controlStyleStyleValue—加到选项组上的行内样式。

CheckboxListItem 属性 ​

名称类型默认值说明
labelstring—必填。行标题,也是复选框的名称。需要链接等富内容时用 label 插槽,复选框的名字取可见文字。
ariaLabelstring—覆盖复选框的无障碍名称。富文本标题没有可读文字时使用。
valuestring—集合模式必填。独立行不要传。
descriptionstring—次要文字,同时作为复选框的说明。富内容用 description 插槽,仍然通过 aria-describedby 关联。
isCheckedboolean | 'indeterminate'—独立行的勾选状态。集合模式忽略它。
isDisabledbooleanfalse禁用这一行。
isLoadingbooleanfalse这一行自己的加载。复选框里显示旋转指示,并且不能切换。

CheckboxListItem 事件和插槽 ​

独立行通过 check 发出下一个布尔值。label 和 description 插槽放富文本。end 插槽画在标题后面。