Toolbar
浮动工具条的容器。外框、内边距、间距、圆角与里面按钮的默认外观都由它定,用的地方只摆内容——浮动工具条、创建腰带、缩放条不再各写一份外框。
行为是 Reka UI 的 Toolbar(WAI-ARIA 工具条):整条只占一个 Tab 位,方向键在条目间移动。条目用 XToolbarItem 包一层登记进漫游焦点;输入框这类不登记的控件照常按 Tab 进出。
基础
里面的 XButton 经 XConfigProvider 默认幽灵外观、不上移:拼成一组时,悬停上移会让指到的那个跳出对齐线。
工具选择
当前工具:select
字段与显式外观
XInput / XSelect / XCombobox 在工具条里默认 ghost 外观:外框只留工具条这一层描边,每格再描一圈叠在一起很难看。字段不登记进方向键漫游,照常按 Tab 进出。工具条给的只是默认值,实例上显式传的 prop 优先。
文字格式
示例文字
方向与尺寸
size 只有 mini / small 两档(工具条是紧凑容器),经 data-size 环境传给里面的控件。内边距与间距都是 2px,外框圆角 = 子项圆角 + 2px,内外同心,换档时一起缩放。
竖排 / mini
class 经 cn() 合并在外框上,其余属性与监听(aria-label、@pointerenter)也落在外框上。XToolbarItem 不渲染元素,属性与漫游焦点都落在插槽里唯一的子元素上。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | "mini" | "small" | undefined | "small" | 工具条与里面控件的档位,经 `data-size` 环境传下去;工具条是紧凑容器,只有两档 |
orientation | "vertical" | "horizontal" | undefined | "horizontal" | — |
Slots
| 插槽 | 说明 |
|---|---|
default | — |
Slots
| 插槽 | 说明 |
|---|---|
default | — |