# 移动端导航开关

## 使用方法

窄屏上打开 [移动端导航](/components/mobile-nav) 抽屉的那个按钮。它画的是两道杠的菜单图标，抽屉打开时变成关闭的样子，`aria-expanded` 也跟着改。

```ts
import { MobileNavToggle } from '@astryx-vue/core/MobileNav'
```

开关和抽屉绑同一个 `v-model:is-open`，`controls` 指向抽屉的 id，按钮和对话框就关联起来了：

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

const open = ref(false)
</script>

<template>
  <MobileNavToggle v-model:is-open="open" controls="app-nav" label="打开导航" />
  <MobileNav id="app-nav" v-model:is-open="open" header="导航" side="start">
    <!-- 导航项 -->
  </MobileNav>
</template>
```

### 结构

- **开关按钮**: 在移动视口上打开或关闭抽屉的按钮。

## 最佳实践

| 指引 | 实践 |
| --- | --- |
| 推荐 | 开关和抽屉绑同一个 `v-model:is-open`，图标状态才不会和抽屉对不上。 |
| 推荐 | 移动端导航和侧边导航用同一份导航项，把它抽成一个变量共用。 |
| 推荐 | 页面上不止一处导航时给它一个 `label`，让按钮说清自己打开的是哪个。 |
| 避免 | 在桌面上用移动端导航。桌面该用常驻的侧边导航。 |

## 示例

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

### 基本用法

带无障碍名称的导航开关，旁边是页面标题。它打开一个绑着同一份状态的移动端导航抽屉。

```vue
<script setup lang="ts">
import { MobileNav, MobileNavToggle } from '@astryx-vue/core/MobileNav'
import { SideNavItem, SideNavSection } from '@astryx-vue/core/SideNav'
import { HStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <div>
    <HStack align="center" :gap="3">
      <MobileNavToggle v-model:is-open="open" controls="mobile-nav-toggle-demo" label="Open menu" />
      <Text weight="bold">
        Page title
      </Text>
    </HStack>
    <MobileNav id="mobile-nav-toggle-demo" v-model:is-open="open" header="Navigation" side="start">
      <SideNavSection title="Pages">
        <SideNavItem href="#home" is-selected label="Home" />
        <SideNavItem href="#settings" label="Settings" />
      </SideNavSection>
    </MobileNav>
  </div>
</template>
```

## MobileNavToggle 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `isOpen` | `boolean` | `false` | 抽屉的展开状态，配合 `v-model:is-open` 使用。图标和 `aria-expanded` 都跟着它变。 |
| `label` | `string` | — | 按钮的无障碍名称，写到 `aria-label` 上。不传时用文案表里的默认值：打开时是「打开菜单」，抽屉已打开时是「关闭」。 |
| `controls` | `string` | — | 抽屉的 id，写到 `aria-controls` 上。 |

## 事件

| 名称 | 载荷 | 说明 |
| --- | --- | --- |
| `update:isOpen` | `boolean` | 按钮被按下，驱动 `v-model:is-open`。 |

## 插槽

`MobileNavToggle` 没有插槽。它画的是内置的菜单图标，里面没有地方放别的东西。