弹出面板

ui.Popover 在一个 *bool 为 true 时,在其函数构建的面板显示于某个元素(其锚点)下方;在面板外部按下或按 Escape 会将其设为 false。按下事件会继续传递给指针下方的元素,如同 web 上的弹出面板:点击另一个按钮会关闭弹出面板并按下那个按钮;点击锚点会关闭它,因为锚点负责切换它的开合。当锚点下方没有足够空间时,面板会显示在其上方,并随窗口滚动而跟随锚点。

more := ui.Button(c, "More ▾")
if more.Clicked() {
	app.menu = !app.menu
}
ui.Popover(c, more, &app.menu, func() {
	if ui.Button(c, "Rename").Clicked() {
		app.menu, app.renaming = false, true
	}
	if ui.Button(c, "Duplicate").Clicked() {
		app.menu = false
		app.duplicate()
	}
})

Dismissed 会报告因外部按下或 Escape 而关闭弹出面板的那一帧;必须保持打开的弹出面板可以在那时把 *bool 重新设为 true。

当 Tab 移动时,弹出面板的元素会跟随其锚点;当焦点在面板内而面板关闭时, 它会把焦点归还给原先拥有焦点的元素。参见覆盖层。

若需要系统菜单,请使用菜单按钮;若需要在窗口内绘制、具备菜单按键行为的元素菜单,可用 PopoverMenu, 或在按钮下方使用 PopoverMenuButton; 若需要提示,请使用工具提示。弹出面板显示在其所属窗口内: 必须超出窗口边缘的弹出面板应显示在浮动窗口中—— 一个放置在锚点旁、独立成窗的面板。

不带外观

ui.PopoverBase 是一个不带外观的弹出面板:其函数为面板设置样式并构建其内容。上边距让面板与锚点保持距离,无论面板位于哪一侧:

ui.PopoverBase(c, anchor, &app.open, func(panel ui.Element) {
	panel.Margin(6, 0, 0, 0).Padding(8).Radius(12).Background(t.Background).Shadow(0, 8, 24, 0, ui.RGBA(0, 0, 0, 0.2))
	app.filters(c)
})

用 AttachTo 可以把面板放到其他位置:锚点右侧、两者垂直中线对齐,当右侧空间不足时改放左侧:

ui.PopoverBase(c, anchor, &app.open, func(panel ui.Element) {
	panel.AttachTo(anchor, ui.AnchorRight, ui.AnchorLeft).Margin(0, 0, 0, 6)
	app.details(c)
})

自定义的弹出面板,例如悬停卡片,可以在覆盖层中用 AttachTo 和 PressedOutside 构建:参见自定义覆盖层。

参见自定义控件。

无障碍

辅助技术把面板视为其锚点之后的弹出内容。

弹出面板 ​

不带外观 ​

无障碍 ​

弹出面板

不带外观

无障碍