# 下拉菜单勾选项

## 使用方法

`DropdownMenuCheckboxItem` 是 [下拉菜单](/components/dropdown-menu) 里的一行可勾选操作，角色是 `menuitemcheckbox`。它切换自己的布尔值，并保持菜单打开，方便一次改好几项设置。多选一的场景用 [下拉菜单单选组](/components/dropdown-menu-radio-group)。

```vue
<script setup lang="ts">
import { DropdownMenu, DropdownMenuCheckboxItem } from '@astryx-vue/core/DropdownMenu'
import { ref } from 'vue'

const archived = ref(false)
</script>

<template>
  <DropdownMenu :button="{ label: '视图' }">
    <DropdownMenuCheckboxItem v-model="archived" label="显示已归档" />
  </DropdownMenu>
</template>
```

勾选标记是装饰，整行才是控件，选中状态写在 `aria-checked` 上。禁用的行仍留在菜单里，方向键会跳过它，点击也不会切换。

## 属性

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `modelValue` | `boolean` | - | 是否选中，配合 `v-model` 使用。数据数组里对应字段是 `checked`。 |
| `label` | `string \| number` | - | 行内的主要文字。需要富文本时改用 `label` 插槽。 |
| `description` | `string \| number` | - | 标签下方的次要说明。 |
| `icon` | `string \| Component` | - | 标签前的图标：一个 CSS 图标类，或一个绘制图标的组件。任意内容改用 `icon` 插槽。 |
| `isDisabled` | `boolean` | `false` | 禁用这一行。行仍留在无障碍树里，方向键会跳过它，点击不会切换。 |
| `hasCloseOnSelect` | `boolean` | `false` | 切换后是否收起菜单。勾选行默认保持打开。 |

行的角色是 `menuitemcheckbox`，选中状态写在 `aria-checked` 上。勾选标记是装饰，不单独接收点击。快捷键提示一类的尾部内容放在 `endContent` 插槽里。