# 顶部导航大菜单项

## 使用方法

`TopNavMegaMenuItem` 是大菜单（`TopNavMegaMenu`）里的一项，一项就是一个去处。桌面端它排在弹出面板的网格里，手机端排在抽屉的列表里，用哪种形态跟着所在菜单走，你不用自己切换。

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

传了 `href` 这一项就是链接，不传就是一个 `<button type="button">` 按钮，两种样子一样。左边的图标用 `iconClass` 给一个 CSS 图标类名，或者用 `icon` 插槽放自己的图标，两个都给时插槽优先。`description` 可以不传，传了就显示在标题下面一行小字。

点一下会关掉它所在的大菜单。单独拿出来用也能正常显示标题、描述和图标，只是身边没有菜单可关。

## 示例

### 基础

带图标、标题和描述的链接项。放进 TopNavMegaMenu 的默认插槽里，用来介绍每个去处。

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

<template>
  <div class="top-nav-mega-menu-item-preview__grid">
    <TopNavMegaMenuItem
      description="Run serverless code at the network edge"
      href="#edge"
      icon-class="i-carbon-flash"
      title="Edge Functions"
    />
    <TopNavMegaMenuItem
      description="Object and file storage for your application"
      href="#storage"
      icon-class="i-carbon-data-base"
      title="Storage"
    />
  </div>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | — | 这一项的标题。必填。 |
| `description` | `string` | — | 标题下面的一行说明文字。不传就不显示。 |
| `href` | `string` | — | 点击后跳转的地址。不传这一项就渲染成按钮。 |
| `as` | `NavLinkComponent` | — | 有链接时用来替换 `<a>` 的组件，优先于 `LinkProvider` 给的默认值。 |
| `iconClass` | `string` | — | 左侧图标框里的 CSS 图标类名，例如 `i-carbon-flash`。同时有 `icon` 插槽时以插槽为准。 |

## 事件

这一项自己不发出事件。点击时会关闭外层的大菜单（<code>TopNavMegaMenu</code>），跳转由 <code>href</code> 或 <code>as</code> 指定的组件负责。

## 插槽

- `icon`：标题前面的图标，会替代 `iconClass` 的字形。这块对读屏隐藏，含义由标题承担。