#App Shell 应用外壳

App Shell 在开放式产品画布旁提供持久任务上下文。它既可用于有边界的预览，也可独占整个可视视口。

npm install @a3s-lab/ui

<div class="app-shell" data-navigation="expanded">
  <aside data-app-navigation>...</aside>
  <main data-app-main>
    <header class="workspace-header">
      <button type="button" data-app-navigation-trigger>切换导航</button>
    </header>
    <div data-app-content>...</div>
  </main>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

<div class="app-shell" data-navigation="expanded">
  <aside data-app-navigation>...</aside>
  <main data-app-main>
    <header class="workspace-header">
      <button type="button" data-app-navigation-trigger>切换导航</button>
    </header>
    <div data-app-content>...</div>
  </main>
</div>

#HTML 结构

#JavaScript API

导入 @a3s-lab/ui/all，或者先导入 @a3s-lab/ui/runtime，再导入 @a3s-lab/ui/app-shell。控制器在外壳根元素上提供 expandNavigation()、collapseNavigation()、hideNavigation()、openNavigation()、closeNavigation()、toggleNavigation() 与 refresh()。状态变化后会派发 a3s:app-navigation-change，详情为 { navigation, mobileOpen, mode, source }。可用 data-app-navigation-open-label、data-app-navigation-close-label、data-app-navigation-expand-label 和 data-app-navigation-collapse-label 覆盖本地化标签。

#状态与变体

App Shell 支持展开、折叠、隐藏、全视口与移动端打开状态。低于 768px 时，导航会成为限制在外壳内部的浮层。控制器会为关闭状态设置 inert 与 aria-hidden="true"，打开后把焦点移到首个控件，并支持 Escape、遮罩和目的地选择关闭。导航与主内容分别拥有自己的滚动区域。宿主应用可以持久化 data-navigation 并与路由协调；程序化修改后若需要立即同步，可调用 refresh()。

#可访问性

使用 aside、nav、main 和 header 建立真实地标，并为每个导航区域提供可区分的名称。控制器同步触发器的 aria-expanded 与本地化名称；关闭移动导航时使导航 inert，打开时使主内容 inert，把焦点移入导航并在其中约束 Tab，最后把焦点还给触发器。导航必须是外壳的直接区域，遮罩只能覆盖当前外壳。宿主负责路由、权限与桌面折叠偏好；组件负责断点状态、焦点、Escape 和关闭行为。