Popover

在触发控件旁展示补充内容。

实时预览

正在加载预览…

参数配置

触发文字 label允许关闭 dismissible

全部字段 12

PopoverOptions

Label无障碍名称

Placement

Width

MaxHeight

Offset

MatchAnchor

Mode

OpenDelayms仅悬停

CloseDelayms仅悬停

Dismissible

UI

Styles · 0

Style

Go 代码

// Inside a view; c is *ui.Context, t is nui.Theme.
// Keep s (example state) outside the view. See the complete example.
options := nui.PopoverOptions{Dismissible: nui.Optional[bool]{}}
ui.Column(c.Key("popover-stage")).Fill().Center().Children(func() {
	anchor := nui.Button(c.Key("trigger"), t, "Open details", nui.ButtonOptions{AccessibleLabel: cmp.Or("Open details", "Example action")}).OnClick(func() {
		if options.Mode == nui.PopoverClick {
			s.Open = !s.Open
		}
	})
	nui.Popover(c.Key("popover"), t, anchor, &s.Open, options, func(t nui.Theme) {
		ui.Text(c, "Additional information")
		nui.Button(c.Key("close"), t, "Close", nui.ButtonOptions{Variant: nui.Outline}).OnClick(func() { s.Open = false })
	})
})

使用说明

点击按钮打开弹层；切换为 PopoverHover 后用悬停触发。OpenDelay、CloseDelay 仅影响悬停，面板输入单位为毫秒，例如 2000 为 2 秒。Placement 空间不足时自动避让；MaxHeight 是高度上限；MatchAnchor 使用触发按钮的宽度作为最小宽度。Label 只设置无障碍名称。Dismissible=false 禁止 Esc 和外部点击关闭，Close 按钮仍可主动关闭。

API 参考

Popover

源码

func Popover(c *ui.Context, t Theme, anchor ui.Element, open *bool, opts PopoverOptions, content func(Theme)) ui.Element

PopoverOptions

源码

type PopoverOptions struct {
	Label                    string
	Placement                Placement
	Width, MaxHeight, Offset Optional[float32]
	MatchAnchor              bool
	Mode                     PopoverMode
	OpenDelay, CloseDelay    time.Duration
	Dismissible              Optional[bool]
	Decoration
}

字段	类型	说明
`Label`	`string` Go 零值: `""`	弹层的无障碍名称，不改变按钮文字或面板内容。
`Placement`	`Placement` Go 零值: `zero value`	弹层相对触发控件的位置；空间不足时会自动翻转或避让。
`Width`	`Optional[float32]` Go 零值: `unset`	宽度，单位为 DIP。
`MaxHeight`	`Optional[float32]` Go 零值: `unset`	弹层最大高度（DIP），仅在内容超过此高度时起作用。
`Offset`	`Optional[float32]` Go 零值: `unset`	弹层与触发控件的距离。
`MatchAnchor`	`bool` Go 零值: `false`	弹层最小宽度取触发控件宽度；内容更宽时仍可扩展。
`Mode`	`PopoverMode` Go 零值: `zero value`	组件行为模式或主题明暗模式。
`OpenDelay`	`time.Duration` Go 零值: `0`	仅 PopoverHover 模式生效；网站输入单位为毫秒（1000 ms = 1 秒），Go 使用 time.Duration。
`CloseDelay`	`time.Duration` Go 零值: `0`	仅 PopoverHover 模式下离开触发控件与面板后生效；网站输入单位为毫秒。
`Dismissible`	`Optional[bool]` Go 零值: `unset`	允许 Escape 或外部点击关闭。
`UI`	`Styles` Go 零值: `zero value`	弹层部件样式，可用部件为 panel。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	最终部件样式回调，可用部件为 panel。