# 顶部导航大菜单

## 使用方法

鼠标移上去就往下弹出一整块面板的导航项。面板内容用插槽写：格子里的链接放默认插槽，右侧的推荐卡放 `featured` 插槽。每个链接都用 `TopNavMegaMenuItem` 写，桌面面板和手机抽屉共用同一份写法。放进手机抽屉时，它自己会变成一行可以展开收起的小标题。

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

<template>
  <TopNav label="Main navigation">
    <template #heading>
      <TopNavHeading heading="DevTools" href="#home" />
    </template>
    <TopNavItem href="#overview" label="Overview" />
    <TopNavMegaMenu label="Products">
      <TopNavMegaMenuItem title="Deploy" description="Ship to production in seconds" href="#deploy" />
      <TopNavMegaMenuItem title="Documentation" description="Guides, references, and tutorials" href="#documentation" />
      <template #featured>
        <TopNavMegaMenuFeaturedCard
          title="What's New"
          description="Check out our latest features and improvements in the Q2 release."
          link-label="Read the changelog"
          link-href="#changelog"
        />
      </template>
    </TopNavMegaMenu>
  </TopNav>
</template>
```

## 示例

### 基础

顶栏里一个大菜单入口，点开是带说明的链接格子。一个栏目下有多个去处、而且每个去处都值得解释一句时用它。

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

<template>
  <TopNav label="Main navigation">
    <template #heading>
      <TopNavHeading heading="DevTools" href="#home" />
    </template>
    <TopNavItem href="#overview" is-selected label="Overview" />
    <TopNavMegaMenu label="Products">
      <TopNavMegaMenuItem
        description="Ship to production in seconds"
        href="#deploy"
        icon-class="i-carbon-rocket"
        title="Deploy"
      />
      <TopNavMegaMenuItem
        description="Guides, references, and tutorials"
        href="#documentation"
        icon-class="i-carbon-book"
        title="Documentation"
      />
      <TopNavMegaMenuItem
        description="Programmatic access to all features"
        href="#api"
        icon-class="i-carbon-code"
        title="API"
      />
      <TopNavMegaMenuItem
        description="Enterprise-grade protection"
        href="#security"
        icon-class="i-carbon-security"
        title="Security"
      />
      <template #featured>
        <TopNavMegaMenuFeaturedCard
          description="Check out our latest features and improvements in the Q2 release."
          link-href="#changelog"
          link-label="Read the changelog"
          title="What's New"
        />
      </template>
    </TopNavMegaMenu>
  </TopNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 触发按钮上显示的文字。必填。 |
| `showDelay` | `number` | `150` | 鼠标移上去之后，等多少毫秒才展开面板。 |
| `hideDelay` | `number` | `250` | 鼠标移开之后，等多少毫秒才收起面板。 |

## 事件

- `openChange(isOpen: boolean)`：面板展开或收起时触发。想把外层样式跟展开状态绑在一起时用它。

## 插槽

- `default`：面板里的链接，一般写 `TopNavMegaMenuItem`，写别的内容也可以。
- `featured`：推荐内容。桌面上面板排在右侧，手机抽屉里排在链接下面。