工具栏
@astryxdesign/core v0.7.1 · Toolbar
使用方法
Toolbar 是 role="toolbar"。label 必填。start、center、end 分成三组，方向键在组与组之间移动焦点，Home 和 End 跳到两端。焦点在输入框里时，方向键先留给输入框，直到光标顶到边界。
放不下的操作交给 OverflowList，多出来的项收进「更多」菜单。工具栏自己不测量宽度。
vue
<script setup lang="ts">
import { Toolbar } from '@astryx-vue/core/Toolbar'
</script>
<template>
<Toolbar label="格式">
<template #start>
<button type="button">
加粗
</button>
<button type="button">
斜体
</button>
</template>
</Toolbar>
</template>解剖
| 部分 | 说明 |
|---|---|
| 外框 | 由分区拥有的容器，提供工具栏表面、内边距，以及选中的那些分隔边。 |
| 工具栏 | 带工具栏语义的一行，拥有起始、可选的中间和末尾布局。 |
最佳实践
| 指引 | 实践 |
|---|---|
| 推荐 | 给工具栏一个能说明用途的 label，例如「格式」。 |
| 推荐 | 项很多时把它们放进 OverflowList，不要让按钮换行挤出容器。 |
| 避免 | 不要在工具栏里再套一个工具栏。方向键会停在内层边界上。 |
示例
批量操作
选中多项后，起始边显示数量，结束边放批量操作。
卡片标题
卡片标题在左，图标操作在右。
尺寸
小、中、大三档并排。尺寸会传给里面的按钮。
表格筛选
搜索在最前面，旁边是状态、优先级和客户，末尾是当前结果数量。
标签导航
起始区是标签，结束区是一个操作。