#Ribbon 功能区

Ribbon 把标签页导航与分组应用命令组合在一起。该模式源自 A3S Office，并被泛化到编辑器、拓扑工具与运维工作台。

npm install @a3s-lab/ui

<div class="ribbon tabs" data-accent="blue">
  <div role="tablist" aria-label="Editor commands">...</div>
  <div role="tabpanel">
    <fieldset data-ribbon-group>
      <legend>Clipboard</legend>
      ...
    </fieldset>
  </div>
</div>

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

#用法

加载 Tabs 控制器，并在根节点同时使用 ribbon 与 tabs 类名。

<div class="ribbon tabs" data-accent="blue">
  <div role="tablist" aria-label="Editor commands">...</div>
  <div role="tabpanel">
    <fieldset data-ribbon-group>
      <legend>Clipboard</legend>
      ...
    </fieldset>
  </div>
</div>

#参数

#状态和变体

当前 A3S 工作区使用蓝色。绿色和橙色保留给旧版文档类型集成，兼容值 purple 也映射为 A3S 蓝。禁用的标签页与命令使用原生 disabled。默认 36 像素标签栏与 74 像素命令区保持紧凑；窄视口保持标签不收缩并允许横向滚动。

#JavaScript API

功能区行为来自 Tabs 控制器。window.a3sUI.refresh(ribbon) 重新扫描动态添加的选项卡。不需要功能区特定的 JavaScript。

#可访问性

使用完整的标签键盘合约。使用 <fieldset> 和可见或仅屏幕阅读器的 <legend> 对命令进行分组。如果色带变得太密，请允许水平滚动，而不是将标签缩小到可见尺寸以下。