# 命令面板分组

## 使用方法

在结果里加一行小标题，把命令分成几段。要放在 `CommandPaletteList` 里面用。

```ts
import { CommandPaletteGroup } from '@astryx-vue/core/CommandPalette'
```

## 示例

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

### 基础

用 CommandPaletteGroup 自己拼，把一条条命令按标题分组。想把相关的命令拆成带标题的几段时用它。

```vue
<script setup lang="ts">
import { CommandPaletteGroup, CommandPaletteItem, CommandPaletteList } from '@astryx-vue/core/CommandPalette'
</script>

<template>
  <CommandPaletteList>
    <CommandPaletteGroup heading="Navigation">
      <CommandPaletteItem value="home">
        Go to Home
      </CommandPaletteItem>
      <CommandPaletteItem value="dashboard">
        Go to Dashboard
      </CommandPaletteItem>
    </CommandPaletteGroup>
    <CommandPaletteGroup heading="Actions">
      <CommandPaletteItem value="new-file">
        New File
      </CommandPaletteItem>
      <CommandPaletteItem value="save-all">
        Save All
      </CommandPaletteItem>
    </CommandPaletteGroup>
  </CommandPaletteList>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `heading` | `string` | — | 分组显示出来的标题。它同时是这个分组给读屏用的名字，写在 `aria-label` 上。必填。 |

## 插槽

- `default`：这个分组里的行，一般放 `CommandPaletteItem`。