使用方法

MobileNav 是从屏幕一侧滑入的对话框抽屉，不是底部弹层。MobileNavToggle 和它绑同一个 v-model:is-open。打开后焦点留在抽屉里，Escape 或点遮罩关闭，并回到原来的焦点。抽屉里面再开一层浮层时，Escape 先关最上面那一层。双指缩放留给浏览器，内容区仍可以竖着滚。

side 可以是 start、end 或 auto。auto 按打开时焦点的位置决定从哪一侧进入。顶栏的窄屏模式会自己创建这一对组件。

<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" />
  <MobileNav id="app-nav" v-model:is-open="open" header="菜单" side="start">
    <!-- 导航项 -->
  </MobileNav>
</template>

解剖

部分	说明
导航遮罩	铺满视口、承载移动导航抽屉的对话框遮罩。
抽屉	从解析出的视口边缘滑入的着色面板。
页眉	固定的一行，装着可选的页眉内容和关闭按钮。
内容	装着导航内容的可滚动区域。
关闭按钮	关闭导航抽屉的按钮。
开关按钮	能配合 AppShell 的 Button，在移动视口上打开或关闭抽屉。

最佳实践

指引	实践
推荐	开关的 controls 指向抽屉的 id，读屏能把按钮和对话框连起来。
推荐	抽屉里放普通链接。不要再套一层 role="menu"。
避免	不要用底部弹层来做这套导航。它是侧边抽屉。

示例

基本抽屉

Navigation

Main

Dashboard

Projects

Analytics

Settings

General

Team

菜单按钮打开分组导航。

结束边抽屉

Settings

Settings

General

Team

同一套抽屉从结束边滑入。

无标题

Main

Dashboard

Projects

不传标题时，抽屉里只剩导航项和关闭按钮。