参考
拆分按钮 Split Button
SplitButton:拆分按钮。主按钮触发 `click`,旁边的箭头打开同风格浮层;浮层中的条目会携带自己的值发出 `select`。箭头由菜单状态机的触发器通过 `asChild` 挂接我们的按钮;状态机保留元素行为(定位、焦点、`data-state`),按钮样式负责外观。弹层保持 menu 部件不变。
Item · Root · Trigger
#SplitButton
SplitButton:拆分按钮。主按钮触发 click,旁边的箭头打开同风格浮层;浮层中的条目会携带自己的值发出 select。箭头由菜单状态机的触发器通过 asChild 挂接我们的按钮;状态机保留元素行为(定位、焦点、data-state),按钮样式负责外观。弹层保持 menu 部件不变。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
label | String | 主操作的标签 | |
items | Array as PropType<SplitButtonEntry[]> | () => [] | 下拉菜单条目 |
variant | String | "solid" | 主按钮和箭头的静止样式;箭头与主按钮保持同一个控件的整体感 |
tone | String | "ink" | 两部分的用色;默认墨色,固定语义色表达各自含义 |
size | String | "md" | 主按钮和箭头共用的高度档位 |
disabled | Boolean | false | — |
| 事件 | 载荷 |
|---|---|
click | () => true |
select | (value: string) => typeof value === "string" |