使用方法

CheckboxList 是包着若干 CheckboxListItem 的字段。绑定 v-model 时，值是已勾选项的字符串数组。

<script setup lang="ts">
import { CheckboxList, CheckboxListItem } from '@astryx-vue/core/CheckboxList'
import { shallowRef } from 'vue'

const selected = shallowRef(['email'])
</script>

<template>
  <CheckboxList v-model="selected" label="通知">
    <CheckboxListItem label="邮件" value="email" />
    <CheckboxListItem label="短信" value="sms" />
  </CheckboxList>
</template>

全选这类行自己管勾选状态时，不要给列表绑值。那一行用自己的勾选状态。紧凑密度使用小号复选框。勾选的行使用强调色的浅底。只读和禁用时这层浅底会拿掉。

整组只读时，勾选状态还在，也不会变暗，但不能改。和禁用同时设置时按禁用处理。禁用并写上原因时，每一行仍可聚焦，悬停或用键盘停在上面能看到原因。某一行自己在加载，或者一次变更还没结束时，复选框里显示旋转指示，这一行不能再点。

解剖

部分	说明
组	带标签的复选框组的容器。
组标签	说明这些选项代表什么。
说明	组标签下面的辅助文字。
选项列表	装着可选复选框的列表。
选项行	装着一个选项的可选择行。
复选框	选项的选中指示。
选项标签	标识一个选项的主要内容。
选项说明	选项标签下面的次要文字。
尾部内容	使用方放在选项行末尾的内容。
转圈	还在等待结果的复选框里显示的加载指示。
状态消息	组下面的错误、警告或成功提示。

最佳实践

指引	实践
推荐	全选行不要给 value，它不属于集合里的某一项。
避免	用复选列表表示互斥选项。那种情况用 RadioList。

示例

全选

Include in export

• Select all
  Select all
• Transaction history
  Transaction history
• Account statements
  Account statements
• Tax documents
  Tax documents
• Invoices
  Invoices

没有全部选中时，全选行是半选。

尾部内容

Add-on packages

• Free tier
  Free tierBasic features included $0/mo
• Pro tier
  Pro tierAdvanced analytics and integrations $9/mo
• Enterprise
  EnterpriseCustom solutions and dedicated support Custom

每一行末尾可以放价格徽标。

只读、原因和加载

Saved export

• CSV
  CSV
• JSON
  JSON

Managed export

• CSV

  Ask an administrator
  CSV
• JSON

  Ask an administrator
  JSON

Ask an administrator

Live export

• CSV

  正在加载
  CSV
• JSON
  JSON

只读保留勾选且不变暗。禁用时写上原因，行仍然可以聚焦。正在加载的行不能再点。