DropdownMenu

从菜单中选择操作。

实时预览

正在加载预览…

参数配置

触发文字 label禁用 disabled否

全部字段 6

DropdownMenuItems

列表项 · 3

MenuItem

ID

Label

Description

Shortcut

Kind

Icon

Color

Disabled

Radio

Checked

Children

列表项 · 0

OnSelect

Build

MenuItem

ID

Label

Description

Shortcut

Kind

Icon

Color

Disabled

Radio

Checked

Children

列表项 · 0

OnSelect

Build

MenuItem

ID

Label

Description

Shortcut

Kind

Icon

Color

Disabled

Radio

Checked

Children

列表项 · 0

OnSelect

Build

MenuOptions

Label

Width

MaxHeight

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.
anchor := nui.Button(c.Key("trigger"), t, "Actions", nui.ButtonOptions{AccessibleLabel: cmp.Or("Actions", "Example action"), Variant: nui.Outline})
nui.DropdownMenu(c.Key("menu"), t, anchor, &s.Menu, []nui.MenuItem{{ID: "edit", Label: "Edit", Icon: lucide.Pencil(), OnSelect: func() { s.Action = "Edit" }}, {ID: "copy", Label: "Duplicate", Icon: lucide.Copy(), OnSelect: func() { s.Action = "Duplicate" }}, {ID: "archive", Label: "Archive", Disabled: false, OnSelect: func() { s.Action = "Archive" }}}, nui.MenuOptions{Label: "Project actions"})
ui.Text(c, s.Action)

使用说明

点击按钮打开菜单，选择 Edit 或 Duplicate 后查看下方操作名称。禁用参数作用于 Archive 项；菜单项目使用稳定 ID，回调只更新应用状态。

API 参考

DropdownMenu

源码

func DropdownMenu(c *ui.Context, t Theme, anchor ui.Element, state *MenuState, items []MenuItem, o MenuOptions) ui.Element

MenuOptions

源码

type MenuOptions struct {
	Label            string
	Width, MaxHeight Optional[float32]
	Decoration
}

字段	类型	说明
`Label`	`string` Go 零值: `""`	控件标签或可访问名称。
`Width`	`Optional[float32]` Go 零值: `unset`	宽度，单位为 DIP。
`MaxHeight`	`Optional[float32]` Go 零值: `unset`	最大高度，单位为 DIP。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。

MenuItem

源码

type MenuItem struct {
	ID, Label, Description, Shortcut string
	Kind                             MenuItemKind
	Icon                             *ui.SVG
	Color                            Color
	Disabled, Radio                  bool
	Checked                          Optional[bool]
	Children                         []MenuItem
	OnSelect                         func()
	// Build supplies non-interactive visual content; Label is still required for semantics/typeahead.
	Build func(*ui.Context, Theme)
}

字段	类型	说明
`ID`	`string` Go 零值: `""`	唯一且稳定的业务标识。
`Label`	`string` Go 零值: `""`	控件标签或可访问名称。
`Description`	`string` Go 零值: `""`	补充说明文字。
`Shortcut`	`string` Go 零值: `""`	展示给用户的快捷键说明。
`Kind`	`MenuItemKind` Go 零值: `zero value`	组件图型或项目种类。
`Icon`	`*ui.SVG` Go 零值: `nil`	组件使用的 SVG 图标。
`Color`	`Color` Go 零值: `ColorDefault`	语义颜色；默认值继承主题或组件配色。
`Disabled`	`bool` Go 零值: `false`	禁用组件及其交互。
`Radio`	`bool` Go 零值: `false`	以单选菜单项样式展示。
`Checked`	`Optional[bool]` Go 零值: `unset`	菜单项的勾选状态。
`Children`	`[]MenuItem` Go 零值: `nil`	子项目列表。
`OnSelect`	`func()` Go 零值: `nil`	激活或选择项目时通知应用的回调。
`Build`	`func(*ui.Context, Theme)` Go 零值: `nil`	同步构建当前项目的视觉内容。