跳到正文

Dropdown 下拉菜单

Dropdown 从触发元素弹出一个操作菜单,支持子菜单、分组和分割线。选中任意一项会调用 onSelect 并关闭整个菜单。菜单按 Floating UI 的嵌套菜单做法实现,外观用的是 Popover 的浮层。

演示

基础用法

默认悬停时在触发元素下方弹出(触屏上点一下弹出)。trigger="click" 改为点击或按 Enter / ↓ 打开,并把焦点移到菜单里。禁用项会被跳过。showArrow 给菜单加上指向触发元素的箭头(默认不带;子菜单始终不带)。

子菜单、图标和分组

带 children 的选项会在右侧弹出子菜单:悬停打开(鼠标斜着移过去也不会关掉),或按 → 打开,← 返回。icon 加图标,{ type: "divider" } 是分割线,{ type: "group", label, children } 是带标题的分组。

右键菜单

传入 x / y、不传触发元素时,菜单在这个点弹出,就是右键菜单。用 show 和 trigger="manual" 控制。

键盘

↑ / ↓ 在菜单项之间移动(跳过禁用项,到头循环),Home / End 跳到两头,输入字母跳到下一个以它开头的项,→ 打开子菜单、← 关闭子菜单,Enter 或空格选中,Esc 关闭菜单并把焦点还给触发元素。

Props

名称类型默认值说明版本
optionsDropdownMixedOption[]必填菜单项 { key, label, icon?, disabled?, children? }、分割线和分组。未发布
onSelect(key, option) => voidundefined选中没有子菜单的项时调用。未发布
triggerhover | click | manualhover触发方式。未发布
show / defaultShowbooleanundefined / false受控 / 初始的显示状态。未发布
onUpdateShow(show: boolean) => voidundefined菜单要打开或关闭时调用。未发布
placementPopoverPlacementbottom菜单弹出的位置;子菜单固定在 right-start。未发布
showArrowbooleanfalse显示指向触发元素的箭头;只作用于第一层菜单。未发布
sizesmall | medium | largemedium行高和字号。未发布
x / ynumberundefined在视口的某个点打开,而不是在触发元素旁边。未发布
disabledbooleanfalse不再打开。未发布
to / zIndex同 Popover。未发布
onClickoutside(event: Event) => voidundefined在触发元素和所有菜单之外按下时调用。未发布

其余属性和 ref 都传给触发元素。