# 顶部导航项

## 使用方法

`TopNavItem` 是顶部导航里的一条链接，放在 `TopNav` 的 `start` 插槽或默认插槽里。它渲染成一个链接，带悬停和选中两种样式。

写了 `href` 就是链接。没有地址，或者设置了 `isDisabled`，它就渲染成按钮，点不动也跳不走。

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

## 示例

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

### 基础

顶部导航里的几条链接，其中一条标记为选中。当作应用的一级页面入口。

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

<template>
  <TopNav label="Main navigation">
    <template #heading>
      <TopNavHeading heading="App" />
    </template>
    <TopNavItem href="#" is-selected label="Dashboard" />
    <TopNavItem href="#" label="Projects" />
    <TopNavItem href="#" label="Reports" />
  </TopNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 这条导航的名字，默认显示成可见文字。打开 `isIconOnly` 后改成读屏用的 `aria-label`。必填。 |
| `href` | `string` | — | 要跳去的地址。 |
| `as` | `NavLinkComponent` | `'a'` | 链接换成别的根组件时用，例如 `RouterLink`，它还会一并收到 `to`。只有写了地址才会用到。 |
| `target` | `string` | — | 链接的 `target`。指明在新窗口打开时，会自己补上 `noopener noreferrer`。 |
| `rel` | `string` | — | 链接的 `rel`。和上面自动补的 `noopener noreferrer` 合并，不会互相顶掉。 |
| `iconClass` | `string` | — | 文字前面那个图标，传 CSS icon 的类名，例如 `i-carbon-home`。 |
| `isSelected` | `boolean` | `false` | 是不是当前这一页。会写上 `aria-current="page"`，并套上选中样式。 |
| `isDisabled` | `boolean` | `false` | 禁用这一项。会写上 `aria-disabled`，去掉 href 和 target，让它既跳不走也点不动。 |
| `isIconOnly` | `boolean` | `false` | 只显示图标，做成一个方形的按钮，文字收进 `aria-label`。收进移动端抽屉时文字会重新显示出来。 |
| `size` | `NavItemSize` | `'md'` | 这一项的高和左右内边距：`'sm'` 是 28px，`'md'` 是 32px，`'lg'` 是 36px。 |

## 事件

- `click(event: MouseEvent)`：点击时触发。禁用的项会先挡掉默认行为，也不会触发事件。