图示
DiagramToolbar 图工具条
一排属于它下面那个界面的动作。
来自@misoto22/design/diagrams
什么时候用它
FloatingIconButton 是一个钉住的动作。这个是装好几个的容器，让它们读起来像一个物件，而不是散落的几颗按钮。
示例
default
说明
一排属于它下面那个界面的动作。
这个包里已经有 FloatingIconButton 来放一个钉住的动作。这个是装好几个的容器——那是另一个问题，因为几颗钉住的按钮需要读起来像一个物件而不是一堆散落：一块底、一条边框、组与组之间的细线，以及一个 role="toolbar"，让读屏软件播报的是一个工具条而不是六个互不相干的按钮。
role="toolbar" 同时也改变了键盘约定，调用方应该知道自己选了什么：方向键被期待在控件之间移动，Tab 被期待离开这一条。这个组件不替你实现漫游焦点——一条三颗按钮、Tab 逐个访问的工具条是诚实且够用的——所以如果这不是你要的，就传 placement="inline"，并用一个普通的 <div> 跳过这个 role。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| label必填 | string | — | |
| align | 'start' | 'end' | 'end' | 浮动的一条钉在哪个角。 |
| placement | 'inline' | 'floating' | 'inline' | 它坐在哪。`floating` 会把它钉在它所作用的界面之上。 |
同时接受 Omit<ComponentProps<'div'>, 'children'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
组成部分
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
DiagramToolbarGroup
工具条内部一组相关控件。
用一条细线而不是留白来分隔，因为一段大到能读成组边界的间距，也大到会让这一条不再读成一个物件——而把这些控件收进一条工具条，本来就是为了这个。
这个组件没有自己的属性。
无障碍
- role="toolbar" 播报的是一个工具条，而不是六个互不相干的按钮。它不实现漫游焦点——Tab 会逐个访问，对只有三个控件的一条来说这是诚实的做法。