# 侧边导航项

## 使用方法

侧栏里的一条导航：可以有图标、选中状态、末尾内容，也能带下级。

`SideNavItem` 放在 `SideNav` 或 `SideNavSection` 的默认插槽里。带下级时这一项变成一个分组，箭头负责展开和收起；如果它同时有 `href`，点文字是跳转，点箭头才展开分组。侧栏收成窄栏后，带下级的项会在侧面的弹层里列出下级。`end` 在这一行的末尾。

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

## 示例

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

### 基础

侧边导航里的几条链接，每条有名字、图标和地址。当前页面这一项用 isSelected 标出来。

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

<template>
  <SideNav>
    <SideNavItem href="#inbox" icon-class="i-carbon-email" is-selected label="Inbox" />
    <SideNavItem href="#documents" icon-class="i-carbon-document" label="Documents" />
  </SideNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 这一项显示的名字。收起后只剩图标时，以及弹层标题，也用它当读屏名。必填。 |
| `href` | `string` | — | 要跳去的地址。不写就渲染成按钮，只触发 `click`。 |
| `as` | `NavLinkComponent` | `'a'` | 链接换成别的根组件时用，例如 `RouterLink`，它还会一并收到 `to`。只有写了地址才会用到。 |
| `target` | `string` | — | 链接的 `target`。指明在新窗口打开时，会自己补上 `noopener noreferrer`。 |
| `rel` | `string` | — | 链接的 `rel`。和自动补的 `noopener noreferrer` 合并。 |
| `iconClass` | `string` | — | 文字前面的图标，传 CSS icon 的类名，例如 `i-carbon-home`。侧栏收起后，没有图标的项会被省略。 |
| `selectedIconClass` | `string` | — | 选中时换成这个图标，不写就用 `iconClass`。 |
| `isSelected` | `boolean` | `false` | 是不是当前这一页。会写上 `aria-current="page"`，并套上选中样式。 |
| `isDisabled` | `boolean` | `false` | 禁用这一项。会挡掉默认行为，也不触发事件。 |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 这一项的高和左右内边距。 |
| `collapsible` | `boolean \| { defaultIsCollapsed?: boolean, isCollapsed?: boolean }` | — | 下级能不能折叠。不传时，有下级就能折；传 `false` 则一直展开。写成对象可以设初始状态或者受控状态。 |

## 事件

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

## 插槽

- `default`：下级导航项。有下级的行会把它收成一个分组。
- `icon`：文字前面的图标元素，和 `iconClass` 二选一。
- `selectedIcon`：选中时的图标元素，不写就用 `icon`。
- `end`：这一行末尾的内容，例如徽标或计数。