Component DropdownMenu

DropdownMenu

A menu widget built on top of Popover.

Use this for simple action menus (MenuItem + Separator).

适用场景

• “更多操作”菜单（Open / Rename / Delete）
• 轻量的 command/action list

不适合：

• 需要复杂键盘导航/搜索的菜单（这类通常需要更强的 widget/ManagedView）
• 大量选项（用 ComboBox）

API

• dropdown_menu()：构造器
• id(...) / key(...)：稳定 identity
• label(...)：触发器按钮文字
• items([...])：
  • DropdownItem::Item(DropdownMenuItem)
  • DropdownItem::Separator
• DropdownMenuItem::new(id, label)：
  • id: String：你的业务 id
  • label: SharedString
  • .disabled(true)：禁用
• on_select(|id, ev, window, cx| ...)：点击某项触发（会先自动关闭菜单）

交互与行为说明

• DropdownMenu 内部会自己维护“打开/关闭”状态。
• 点击触发器会 toggle。
• 点击菜单外部会关闭。
• 点击菜单项会先关闭，再触发 on_select。

Example

use gpui::ElementId;
use yororen_ui::component::{
    DropdownItem, DropdownMenuItem, dropdown_menu,
};

let view = dropdown_menu()
    .id(ElementId::from(("demo", "dropdown")))
    .label("Options")
    .items([
        DropdownItem::Item(DropdownMenuItem::new("open", "Open")),
        DropdownItem::Item(DropdownMenuItem::new("rename", "Rename")),
        DropdownItem::Separator,
        DropdownItem::Item(DropdownMenuItem::new("delete", "Delete").disabled(true)),
    ])
    .on_select(|id, _ev, _window, _cx| {
        // id: String
        // handle selection
    });

Example: 指定宽度 / 对齐方式

use gpui::{ElementId, px};
use yororen_ui::component::{dropdown_menu, PopoverPlacement};

let view = dropdown_menu()
    .id(ElementId::from(("demo", "dropdown")))
    .width(px(260.))
    .placement(PopoverPlacement::BottomEnd);