操作菜单

Menu浮层与反馈

「⋯」等图标按钮触发的一列操作。打开后焦点落在第一项，↑/↓ 在可用项间移动，回车选中，Esc 关闭并把焦点还给触发按钮；删除类操作用红色，不可用项变淡并写明原因。手机上替代只在悬停时出现的操作。

属性

名称	类型	默认值	说明
`label`	`String`	必填	触发按钮的读屏名称与悬浮提示。
`items`	`Signal<Vec<MenuItem>>`	必填	菜单项，用 MenuItem::new(id, 标签) 构造，可链式加 icon、danger、disabled、shortcut、separated。
`on_select`	`Callback<&'static str>`	必填	选中某项时回传其 id。
`icon`	`IconName`	`Ellipsis`	触发按钮图标。
`size`	`ButtonSize`	`Sm`	触发按钮尺寸。
`placement`	`String`	`"bottom"`	菜单在下方或上方展开。
`align`	`String`	`"end"`	右对齐（end）或左对齐（start）。

键盘

↓ / ↑: 打开菜单，或在可用项间移动
Home / End: 跳到首项或末项
Enter / Space: 执行当前项
Esc: 关闭并回到触发按钮

用法

src/components/ui/menu.rs

view! {
    <Menu
        label="\u66F4\u591A\u64CD\u4F5C"
        items=vec![
            MenuItem::new("edit", "\u7F16\u8F91").icon(IconName::Pencil),
            MenuItem::new("copy", "\u590D\u5236\u94FE\u63A5").icon(IconName::Link),
            MenuItem::new("trash", "\u79FB\u5165\u56DE\u6536\u7AD9").icon(IconName::Trash).danger().separated(),
        ]
        on_select=move |id: &'static str| handle(id)
    />
}

预览

属性

键盘

用法