# 侧边导航标题

## 使用方法

产品名、套件名或账户名，放在 `SideNav` 的 `header` 插槽里。它按「哪里能点」自动分工：标志、标题、上下两行小字可以各自成链接，再加一个菜单时标题旁边会长出箭头。

`icon` 放在文字前面。`superheading` 是标题上面那行小字，`subheading` 是下面那行，两行都能单独带链接。给了 `menu` 插槽，标题就变成弹出菜单的开关并出现箭头；只给 `headingHref` 没有菜单时，整段标题是一个大链接。`end` 靠在这一行的末尾。

```ts
import { SideNavHeading } from '@astryx-vue/core/SideNav'
```

## 示例

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

### 基础

侧边导航的标题：一个应用图标加一个带链接的名字。传进 SideNav 的 header 插槽，用来标明这个导航属于哪个产品或工作区。

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

<template>
  <SideNav>
    <template #header>
      <SideNavHeading heading="Analytics" heading-href="#home">
        <template #icon>
          <NavIcon icon-class="i-carbon-grid" />
        </template>
      </SideNavHeading>
    </template>
  </SideNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `heading` | `string` | — | 产品或应用的名字。侧栏收起后只剩图标时，它也是读屏读到的名字。必填。 |
| `headingHref` | `string` | — | 标题的链接，一般指向产品首页。没有菜单时，整段标题是一个大链接。 |
| `superheading` | `string` | — | 标题上面那行小字，例如套件名。 |
| `superheadingHref` | `string` | — | 上方小字的链接。和菜单一起用时，这行小字自己是一个独立链接。 |
| `subheading` | `string` | — | 标题下面那行小字，例如当前账户。 |
| `subheadingHref` | `string` | — | 下方小字的链接。和菜单一起用时，这行小字自己是一个独立链接。 |
| `logoLabel` | `string` | `heading` | 图标单独成链接、旁边又没有可读文字时，给读屏用的名字。 |
| `as` | `NavLinkComponent` | `'a'` | 链接换成别的根组件时用，例如 `RouterLink`，它还会一并收到 `to`。只有写了地址才会用到。 |

## 插槽

- `icon`：文字前面的标志，可以是 `NavIcon`、图片或者任意元素。侧栏收起后，它就是整个标题。
- `menu`：标题的弹出菜单内容。给了它，标题旁边会自动出现箭头。没有地址时点整段标题打开菜单；有地址时链接各管各的。插槽参数有 `close` 和 `focusRequest`。
- `end`：标题这一行的末尾，例如放一个徽标。