# 复选列表项

## 使用方法

复选列表里的一行，有名字、说明，末尾还能再放点东西。它有两种用法：跟着 `CheckboxList` 一起用，勾选状态存在父组件的数组里；或者自己单独用，比如放进 `List`，或者放进一个没有绑数组的 `CheckboxList`，做「全选」那行。

```ts
import { CheckboxListItem } from '@astryx-vue/core/CheckboxList'
```

跟着 [复选列表](/components/checkbox-list) 用时，`value` 就是这一行的身份证，父组件靠它在数组里找这一行，漏写会直接报错。单独用时没有数组，就用 `isChecked` 决定勾不勾，勾选变化通过 `check` 事件告诉你。放在 [列表](/components/list) 里，或者做「全选」行，都是这种单独用法。

## 示例

常见的用法和不同的状态。

### 基础

复选列表里的复选项，每行有名字和说明，状态跟着外面的数组走。适合通知偏好这类多选一组。

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

const value = shallowRef(['updates'])
</script>

<template>
  <CheckboxList v-model="value" label="Email preferences">
    <CheckboxListItem label="Product updates" value="updates" description="New features and improvements" />
    <CheckboxListItem label="Security alerts" value="security" description="Important account security notifications" />
    <CheckboxListItem label="Marketing" value="marketing" description="Tips, offers, and promotions" />
  </CheckboxList>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 这一行的名字。它同时也是复选框的无障碍名，不用再另外起名。必填。 |
| `value` | `string` | — | 这一行的身份，父组件拿它去数组里找。跟着 `CheckboxList` 用时必填，单独用时不用写。 |
| `description` | `string` | — | 名字下面的一行小字。它也是复选框的说明，读屏会先读名字再读这句。 |
| `isChecked` | `CheckboxValue`（`boolean \| 'indeterminate'`） | `false` | 单独用时决定勾不勾。父组件传了数组时这个属性不起作用。 |
| `isDisabled` | `boolean` | `false` | 把这一行禁用。行还在，文字照样看得到，就是点不动了。 |
| `isLoading` | `boolean` | `false` | 这一行正在处理。复选框里转圈，也点不动。跟着 `CheckboxList` 用时，父组件的 `changeAction` 还没完成，它也会自动转圈。 |

## 事件

- `check(checked: boolean)`：单独用时，勾选状态变了就发出下一个状态。跟着 <code>CheckboxList</code> 用时这个事件不走，变化由父组件的 <code>change</code> 事件报出来。

## 插槽

- `end`：名字和说明的后面，比如放个徽章或者数量。