# 侧边导航收起按钮

## 使用方法

侧边导航的收起开关。放在 `SideNav` 里面时，它自己就能找到收起状态；放在外面时，要用 `v-model:is-collapsed` 或者 `collapsible`（`{ isCollapsed, onCollapsedChange }`，同一个对象也交给侧栏）和侧栏绑同一个值，两边才一致。默认是一个只有图标的幽灵按钮。

`label` 一传，方形的图标按钮就变成带文字的按钮。不传时，文字跟着状态在「展开侧栏」和「收起侧栏」之间切换，读屏读到的就是这句话。

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

## 示例

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

### 基础

把收起按钮放进侧边导航的页脚，用户就能在展开和收起之间切换。自己安排按钮位置时，用 collapsible={{hasButton: false}} 关掉内置的那个。

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

<template>
  <SideNav :collapsible="{ hasButton: false }">
    <SideNavItem href="#home" icon-class="i-carbon-home" is-selected label="Home" />
    <SideNavItem href="#projects" icon-class="i-carbon-folder" label="Projects" />
    <template #footer>
      <SideNavCollapseButton />
    </template>
  </SideNav>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 按钮文字。传了就把只有图标的方块变成带文字的按钮，箭头在文字前面。不传时，读屏读到的名字跟着状态走：展开侧栏或收起侧栏。 |
| `collapsible` | `SideNavControlledCollapsible` | — | 受控的 `{ isCollapsed, onCollapsedChange }` 配置。按钮渲染在 `SideNav` 外面、读不到侧栏上下文时用它，并把同一个对象交给 `SideNav`。它优先于 `isCollapsed`。 |
| `isCollapsed` | `boolean` | — | 受控的收起状态，给放在 `SideNav` 外面的按钮用。用 `v-model:is-collapsed` 绑上，并给侧栏同一个值，两边才不会打架。 |
| `size` | `'sm' \| 'md' \| 'lg'` | 在 `SideNav` 里是 `'sm'`，外面是 `'md'` | 按钮大小。默认跟着容器走。 |

这个按钮就是一个 ghost 的 <code>Button</code>：按解析出来的尺寸渲染成方形，箭头放在按钮的图标插槽里。

## 事件

- `update:isCollapsed(isCollapsed: boolean)`：绑了 `isCollapsed` 时，点按钮触发。在 `SideNav` 里面时，点击交给侧栏自己的开关处理；传了 `collapsible` 时，点击会调 `collapsible.onCollapsedChange`。

## 插槽

- `default`：替换箭头图标。看得见的文字仍然来自 `label`。