DropdownMenu
点击触发的操作菜单(卡片右上角的「⋯」)。焦点、方向键漫游、首字母跳转、aria 与 dismiss 交给 Reka UI 的 DropdownMenu,本组件只做样式层。导航用的下拉见 NavMenu。
触发器放默认插槽;菜单项是 MenuItem[],与 ContextMenu 共用一份:
ts
interface MenuItem {
key: string
label: string
icon?: string // Iconify 名
danger?: boolean // 危险色
keepFocus?: boolean // 等菜单关好再执行,焦点不还给触发器
separated?: boolean // 这一项之前画分隔线
shortcut?: string // 键位写法,由 XKbd 按平台渲染
disabled?: boolean
select: () => void
}
基础
图标、快捷键、分隔线、禁用与危险色
上次选中:还没选
选中后把焦点交给别处
「重命名」这类项选中后要把焦点交给输入框。菜单开着时焦点陷阱会把往外的聚焦拉回菜单,关好后又会把焦点还给触发器——给这一项 keepFocus,它会等菜单关好再执行,并拦下焦点归还。
keepFocus:选中后聚焦就地改名的输入框
未命名画板
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items 必填 | MenuItem[] | — | — |
align | "start" | "center" | "end" | undefined | "end" | 菜单与触发器的对齐 |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
open | boolean | undefined | false | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:open | [value: boolean] | — |
Slots
| 插槽 | 说明 |
|---|---|
default | — |
item | — |