@xwink/ui

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—