MujicaUI

Navigation · #067

Toolbar 浅色主题渲染快照
浅色 · 渲染快照
Toolbar 深色主题渲染快照
深色 · 渲染快照

067 Toolbar 工具栏

用途

一行操作按钮:分组、分隔线;宽度不足时,放不下的按钮从末尾起移入溢出菜单。基于 MyGo ui.Toolbar,保留其焦点组与溢出行为。

最小示例

navigation.Toolbar(c, navigation.ToolbarOptions{Label: "Format"}, func() {
	navigation.ToolbarGroup(c, func() {
		navigation.ToolbarButton(c, "Bold", navigation.ToolbarButtonOptions{Icon: icons.Must("bold")})
		navigation.ToolbarButton(c, "Italic", navigation.ToolbarButtonOptions{Icon: icons.Must("italic")})
	})
	navigation.ToolbarSeparator(c)
	if navigation.ToolbarButton(c, "Copy", navigation.ToolbarButtonOptions{Icon: icons.Must("copy"), ShowLabel: true}).Clicked() {
		fmt.Println("copy")
	}
})

签名:

  • func Toolbar(c *ui.Context, opts ToolbarOptions, fn func()) *ui.Element
  • func ToolbarButton(c *ui.Context, label string, opts ToolbarButtonOptions) *ui.Element
  • func ToolbarGroup(c *ui.Context, fn func()) *ui.Element
  • func ToolbarSeparator(c *ui.Context)

参数

ToolbarOptions

字段类型默认值含义
Labelstring""工具栏的无障碍名称。

ToolbarButton 的 label 必填(为空时 panic):它是按钮名称、仅图标时的提示文字和溢出菜单中的文字。

ToolbarButtonOptions

字段类型默认值含义
Icon*ui.SVGnil16 DIP 图标。
ShowLabelboolfalse图标旁显示文字;没有图标时总是显示。
Disabledboolfalse禁用;溢出菜单中同样禁用。

状态

  • 工具栏:Surface 背景、Border 边框、4 DIP 圆角。
  • 按钮:无底色,悬停 SurfaceHover,按下 Selection,焦点环 2 DIP。
  • 分隔线:旧金细竖线,不进入无障碍树。
  • 溢出:末尾显示 “»” 按钮,菜单中按原顺序列出被收起的操作,组之间以分隔线隔开。

事件

  • ToolbarButton(...).Clicked():点击、Enter / Space,或在溢出菜单中选择。

键盘操作

  • Tab:进入工具栏(一个停靠点),再按 Tab 离开。
  • ←/→:在操作之间移动(跳过禁用项并循环);Home / End 到首末。
  • Enter / Space:执行。溢出按钮用 Enter、Space 或 ↓ 打开菜单。

限制

  • 溢出菜单是 MyGo 打开的系统菜单(ui/toolbar.go:45),外观为系统样式,不是 MujicaUI 自绘。
  • 溢出按钮的无障碍名称固定为英文 “More”(ui/toolbar.go:44),按钮样式来自 MyGo 主题。