组件操作

Split Button分离按钮

查看源码components/split_button.go

保存与更多操作#

点击左侧执行主操作，点击右侧展开状态；两个热区共享同一外观但保留独立语义。

单独打开

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

用法
result := components.BeginSplitButton(canvas, theme, bounds, components.SplitButtonOptions{
    PrimaryID: save, MenuID: more, Label: "Save",
    Variant: components.ButtonOutline, Open: open,
}).Paint()
primary, menu := result.Clicked()

安装

将组件源码复制到自己的项目，直接修改。

仓库命令
go run ./cmd/viva add --out ./components/local split-button

两个独立操作#

SplitButton 用一个相连外观绘制主操作与菜单触发区，同时声明两个稳定 ID。调用 Paint 后通过 Clicked 分别读取结果。

  • 主操作与菜单两半具有独立的悬停、焦点、按下和禁用语义。
  • Open 由调用方持有，并作为菜单触发区的展开状态暴露。
  • 当菜单用于选择一个主要结果的不同方式时使用 SplitButton。

键盘与可访问性#

Tab 分别到达每个可用半区；Enter 与空格通过和鼠标相同的命中路径激活当前焦点。

  • 没有可见文字的菜单触发区必须设置 MenuLabel。
  • 禁用控件仍然可见并暴露禁用语义。
  • 菜单内容、关闭与焦点恢复由应用负责。

键盘操作

Tab 在控件间移动；Ctrl/⌘ K 搜索组件。进入预览后，键盘事件由 Go 运行时处理。