# 下拉菜单分组

## 使用方法

`DropdownMenuGroup` 是复合菜单里一组带标题的行。它渲染成 `role="group"`，并用标题作为这一组的无障碍名称；标题只是普通文字，不是 `menuitem`，所以方向键和首字母查找都会跳过它。数据数组里的等价写法是在 `items` 里放一条 `{type: "section", title, items}`；两种写法的标题用同一套字号和主题。

```ts
import { DropdownMenuGroup } from '@astryx-vue/core/DropdownMenu'
```

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

<template>
  <DropdownMenu :button="{ label: '视图' }">
    <DropdownMenuGroup title="显示">
      <DropdownMenuItem label="显示已归档" />
      <DropdownMenuItem label="紧凑行高" />
    </DropdownMenuGroup>
  </DropdownMenu>
</template>
```

## DropdownMenuGroup 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `title` | `string \| number` | — | 分组上方的标题，同时作为这一组的无障碍名称。留空时分组没有名字。 |

## 插槽

- `default`：这一组的行，可以放动作行、勾选行、单选组、子菜单和分隔线。
- `title`：分组标题的富文本内容，会替代 `title` 属性的纯文字，并且仍然作为这一组的无障碍名称。

## 原生属性

属性会落到分组的外层元素上，也就是带 `role="group"` 的那个元素，所以 `class` 和 `style` 直接写就行。标题会拿到一个自动生成的 id，供 `aria-labelledby` 指向；没有标题的分组不写 `aria-labelledby`。