#工具栏

工具栏将紧凑、常用的命令分组。它支持水平滚动、环绕布局、逻辑分隔符和密集的 Office 风格控件。

npm install @a3s-lab/ui@0.4.1

<div class="toolbar" role="toolbar" aria-label="Formatting">
  <div role="group" aria-label="Text style">...</div>
  <hr role="separator" />
  <div role="group" aria-label="Insert">...</div>
</div>

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

#用法

<div class="toolbar" role="toolbar" aria-label="Formatting">
  <div role="group" aria-label="Text style">...</div>
  <hr role="separator" />
  <div role="group" aria-label="Insert">...</div>
</div>

#参数

#状态和变体

对于切换按钮使用 aria-pressed，对于不可用的命令使用 disabled。默认行高和命令尺寸与 A3S Office 编辑器外壳一致；窄屏非换行工具栏中的命令不会收缩，键盘焦点会将当前命令滚动到可视区域。Ribbons 内部适合使用紧凑的工具栏；包装适用于响应式检查器面板。

#可访问性

命名工具栏和每个不明确的组。原生按钮保留在文档选项卡序列中。在应用程序层提供键盘快捷键，并使用 Kbd 或工具提示文本公开它们。