# 顶部导航标题

## 使用方法

`TopNavHeading` 是顶部导航里的那块名字，写产品名、套件名或账户名。它按「有没有链接」自动决定点哪里起作用：左边可以放标志，中间是标题，标题上面和下边还能各放一行小字，这两行小字可以单独成链接；再给一个菜单，标题旁边就会自己长出箭头。

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

## 示例

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

### 基础

顶部导航里带标志的产品名，链接到首页。放在顶栏最前面当品牌用。

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

<template>
  <TopNav label="Product navigation">
    <template #heading>
      <TopNavHeading heading="Acme Platform" heading-href="#home">
        <template #logo>
          <NavIcon icon-class="i-carbon-cube" />
        </template>
      </TopNavHeading>
    </template>
  </TopNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `heading` | `string` | — | 产品或应用的名字，就是标题本身。只有标志、没有文字时可以不传。 |
| `href` | `string` | — | 和 `headingHref` 是同一个意思，写出来是为了让顶栏和侧栏的标题用同样的属性名。两个都写时以 `headingHref` 为准。 |
| `headingHref` | `string` | — | 标题的链接，一般指向产品首页。没有菜单、而且只有这一处链接时，整段标题是一个大链接。 |
| `superheading` | `string` | — | 标题上面那行小字，例如套件名。字号更小、颜色更淡。 |
| `superheadingHref` | `string` | — | 上方小字的链接，例如套件首页。和菜单一起用时，这行小字自己是一个独立链接。 |
| `subheading` | `string` | — | 标题下面那行小字，例如当前账户。字号更小、颜色更淡。 |
| `subheadingHref` | `string` | — | 下方小字的链接。和菜单一起用时，这行小字自己是一个独立链接。 |
| `logoLabel` | `string` | `heading` | 标志单独成链接、旁边又没有可读文字时，给读屏用的名字。不传就用标题文字。标志不是链接时这个属性不起作用。 |
| `as` | `NavLinkComponent` | `'a'` | 链接换成别的根组件时用，例如 `RouterLink`。只有写了地址才会用到。 |

## 插槽

- `logo`：标题左边的标志，可以是图片、`NavIcon`，或者任意元素。
- `icon`：和 `logo` 是同一个位置。两个都写时用 `logo`。
- `end`：标题这一行的末尾，例如放一个徽章。
- `menu`：弹出菜单的内容。给了它，标题旁边会自动出现箭头。没有链接时点整段标题打开菜单；有链接时链接各管各的，只有箭头打开菜单。插槽参数有 `close` 和 `focusRequest`。