#活动栏

活动栏是 A3S 工作区使用的紧凑、持久的导航表面。它支持标签模式和仅图标模式，而无需更改语义导航。

npm install @a3s-lab/ui

<aside class="activity-bar" aria-label="工作区导航">
  <header>
    <img src="/logo.png" alt="" width="28" height="28" />
    <span data-navigation-label>A3S 控制台</span>
  </header>
  <nav aria-label="主要导航">
    <ul>
      <li><a href="/overview" aria-current="page">…</a></li>
    </ul>
  </nav>
  <footer>…</footer>
</aside>

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

#用法

<aside class="activity-bar" aria-label="工作区导航">
  <header>
    <img src="/logo.png" alt="" width="28" height="28" />
    <span data-navigation-label>A3S 控制台</span>
  </header>
  <nav aria-label="主要导航">
    <ul>
      <li><a href="/overview" aria-current="page">…</a></li>
    </ul>
  </nav>
  <footer>…</footer>
</aside>

#HTML 结构

#状态与变体

独立使用时，在根节点添加 data-labels="hidden" 进入仅图标模式；放在 App Shell 中时，由外壳的 data-navigation="collapsed" 统一控制。折叠只改变标签的视觉呈现，不改变链接数量、顺序或名称。页面目标使用链接，切换当前视图内部模式才使用按钮和 aria-pressed，两者不能混用。

#可访问性

每个导航地标都必须有能区分用途的名称；当前页面使用 aria-current="page"，不能只靠蓝色背景表示。仅图标模式仍把可读标签保留在 DOM 中，图标本身设置 aria-hidden="true"。折叠后保持链接顺序与键盘顺序不变，并为粗指针提供至少 44px 的命中区域。宿主负责路由、权限与当前项；活动栏只呈现导航结构，不应自行隐藏用户仍可访问的目标。