# 工具条 Toolbar

分类：导航 · React：Toolbar

编辑器的格式工具栏这类：一组小按钮，← → 在项之间移动（roving tabindex）。

## 示例
```html
<div class="xxd-toolbar" role="toolbar" aria-label="格式" data-framed>
  <button class="xxd-toolbar__item" aria-label="加粗" aria-pressed="true" data-tooltip="加粗 ⌘B"><i data-xxd-icon="Bold" data-size="16"></i></button>
  <button class="xxd-toolbar__item" aria-label="斜体" data-tooltip="斜体 ⌘I"><i data-xxd-icon="Italic" data-size="16"></i></button>
  <button class="xxd-toolbar__item" aria-label="标题" data-tooltip="标题"><i data-xxd-icon="Heading1" data-size="16"></i></button>
  <span class="xxd-toolbar__sep"></span>
  <button class="xxd-toolbar__item" aria-label="链接" data-tooltip="链接 ⌘K"><i data-xxd-icon="Link" data-size="16"></i></button>
  <button class="xxd-toolbar__item" aria-label="图片" data-tooltip="图片"><i data-xxd-icon="Image" data-size="16"></i></button>
  <span class="xxd-toolbar__spacer"></span>
  <button class="xxd-toolbar__item"><i data-xxd-icon="Eye" data-size="14"></i>预览</button>
</div>
```

## 属性与类名
- `role="toolbar"`：开启键盘移动
- `data-framed`：带框
- `data-size`：sm | lg
- `aria-pressed`：切换态（加粗等）
- 类名：`xxd-toolbar` `xxd-toolbar__item` `xxd-toolbar__sep` `xxd-toolbar__spacer`

## 键盘与读屏
- ← → Home End 在项之间移动；Tab 进出整个工具条只停一次