# 顶部导航菜单

## 使用方法

`TopNavMenu` 是顶栏里的一个导航项。鼠标移上去会弹出一个菜单，菜单里的每一项都比较丰盛：一个图标、一行标题，还可以带一行说明。

每一项的标题写在 `label` 里，说明写在 `description` 里，图标 class 写在 `iconClass` 里。

```ts
import { TopNavMenu } from '@astryx-vue/core/TopNav'
```

## 示例

### 基础

顶栏里的下拉菜单，菜单由 items 数组生成，每一项都有图标和说明。相关去向可以收在同一个触发器下面。

```vue
<script setup lang="ts">
import { TopNav, TopNavHeading, TopNavItem, TopNavMenu } from '@astryx-vue/core/TopNav'
</script>

<template>
  <TopNav label="Main navigation">
    <template #heading>
      <TopNavHeading heading="Platform" />
    </template>
    <TopNavItem href="#" is-selected label="Home" />
    <TopNavMenu
      label="Tools"
      :items="[
        { description: 'View traffic and engagement metrics', href: '#analytics', iconClass: 'i-carbon-analytics', label: 'Analytics' },
        { description: 'Configure your workspace', href: '#settings', iconClass: 'i-carbon-settings', label: 'Settings' },
      ]"
    />
  </TopNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 触发器按钮上的文字。必填。 |
| `items` | `readonly TopNavMenuItem[]` | — | 弹出菜单里的条目。需要自定义内容时，改用默认插槽写 `NavMenuItem`。 |
| `showDelay` | `number` | `150` | 悬停多久之后打开菜单，毫秒。 |
| `hideDelay` | `number` | `200` | 指针离开后等多久关闭菜单，毫秒。 |

## TopNavMenuItem 字段

| 字段 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 条目文字。必填。 |
| `description` | `string` | — | 显示在文字下面的辅助说明。 |
| `href` | `string` | — | 有地址时这一项渲染成链接。没有地址就是一个普通的菜单项。 |
| `iconClass` | `string` | — | 文字前面那个图标的 CSS class。 |
| `isDisabled` | `boolean` | `false` | 禁用这一项。方向键和首字母跳转会跳过它。 |
| `id` | `string` | — | 这一项的固定 key。不填就用文字。 |

## 事件

- `openChange(isOpen: boolean)`：菜单打开时传 `true`，关闭时传 `false`。

## 插槽

- `default`：额外的菜单项，例如直接写 `NavMenuItem` 元素。