Dropdown Menu下拉菜单

查看源码components/dropdown_menu.go

账户菜单#

生产 DropdownMenu 绘制动作、快捷键和分隔线。

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

menu := components.BeginDropdownMenu(canvas, theme, bounds, components.DropdownMenuOptions{Layer: 1})
menu.AddLabel("[email protected]", false)
menu.AddItem(components.DropdownMenuItem{ID: tree.ID(page, "profile"), Label: "Profile", Shortcut: "⇧⌘P"})
menu.AddItem(components.DropdownMenuItem{
    ID: toggleID, Label: "Compact mode", Kind: components.DropdownMenuCheckbox, Checked: compact,
})
menu.AddSeparator()
menu.AddItem(components.DropdownMenuItem{
    ID: tree.ID(page, "sign-out"), Label: "Sign out", Variant: components.DropdownMenuItemDestructive,
})
menu.End()
if canvas.Clicked(toggleID) { compact = !compact }

选择状态#

复选、单选、子菜单与禁用项。

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

items := tree.Sub(page, tree.Name("item"))
menu := components.BeginDropdownMenu(canvas, theme, bounds, components.DropdownMenuOptions{Layer: 1})
menu.AddItem(components.DropdownMenuItem{
    ID: items.At(0), Label: "Team", Kind: components.DropdownMenuSubmenu, Expanded: true,
})
for index, label := range []string{"Personal", "Organization"} {
    menu.AddItem(components.DropdownMenuItem{
        ID: items.At(index + 1), Label: label, Kind: components.DropdownMenuRadio, Selected: scope == index+1,
    })
}
menu.AddItem(components.DropdownMenuItem{ID: items.At(3), Label: "Unavailable", Disabled: true})
menu.End()
if index, ok := canvas.ClickedIn(items); ok && index > 0 && index < 3 { scope = int(index) }

安装

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

go run ./cmd/viva add --out ./components/local dropdown-menu

源码组件用法#

此预览直接调用生产 Go 组件。稳定 ID、值与打开状态仍由应用持有；组件只负责绘制并声明交互语义。

标题旁的源码链接列出了全部选项与视觉决策。
请使用原生命令验证系统文本、焦点、无障碍与平台集成。
浏览器预览验证共享布局和场景行为，不代表原生性能。

验证边界#

示例覆盖当前 API 的代表性状态，但不表示每个桌面后端都已完成真机验证。

键盘操作

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