@xwink/ui

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" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
openboolean | undefinedfalse—

Emits

事件载荷说明
update:open[value: boolean]—

Slots

插槽说明
default—
item—