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
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
options | DropdownMixedOption[] | 必填 | 菜单项 { key, label, icon?, disabled?, children? }、分割线和分组。 | 未发布 |
onSelect | (key, option) => void | undefined | 选中没有子菜单的项时调用。 | 未发布 |
trigger | hover | click | manual | hover | 触发方式。 | 未发布 |
show / defaultShow | boolean | undefined / false | 受控 / 初始的显示状态。 | 未发布 |
onUpdateShow | (show: boolean) => void | undefined | 菜单要打开或关闭时调用。 | 未发布 |
placement | PopoverPlacement | bottom | 菜单弹出的位置;子菜单固定在 right-start。 | 未发布 |
showArrow | boolean | false | 显示指向触发元素的箭头;只作用于第一层菜单。 | 未发布 |
size | small | medium | large | medium | 行高和字号。 | 未发布 |
x / y | number | undefined | 在视口的某个点打开,而不是在触发元素旁边。 | 未发布 |
disabled | boolean | false | 不再打开。 | 未发布 |
to / zIndex | 同 Popover。 | 未发布 | ||
onClickoutside | (event: Event) => void | undefined | 在触发元素和所有菜单之外按下时调用。 | 未发布 |
其余属性和 ref 都传给触发元素。