ContextMenu 右键菜单
在某块区域上点右键(或触屏长按)时,在指针处弹出和这块内容相关的操作。它是捷径而不是唯一入口:右键菜单不容易被发现,里面的操作在界面上应该另有可见的入口。
基本用法
children 是响应右键的区域,menu 是菜单项,写法和 DropdownMenu 里完全一样(图标、状态色、复选项、子菜单都能用)。已经打开时再次右键会挪到新位置;页面滚动时自动收起。
在这块区域里点右键(触屏长按;键盘聚焦后按 Shift + F10)
上一次操作:还没有操作禁用与受控
disabled 时不拦截右键,浏览器自带的菜单照常出现。open / onOpenChange 可以读到或控制开关状态(位置仍由最近一次右键决定)。
已禁用:右键是浏览器自带的菜单
菜单已关闭API
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
children* | ReactElement | — | 响应右键 / 长按的区域:要能接收 ref 和事件。 |
menu* | ReactNode | — | 菜单项(MenuItem、MenuSeparator、MenuSub…)。 |
open | boolean | — | 是否打开(受控)。 |
onOpenChange | (open: boolean) => void | — | 开关状态变化时触发。 |
disabled | boolean | — | 禁用:不拦截右键,交还给浏览器。 |
longPressMs | number | 500 | 触屏长按多久弹出(ms)。按住期间手指移动超过容差会取消。 |
…rest | HTMLAttributes<HTMLDivElement> | — | 其余属性(aria-label 等)和 ref 落在 role="menu" 的菜单上。 |
无障碍
- 菜单的角色和键盘操作与 Menu 相同:↑ ↓ 移动,Home / End,Enter / Space 触发,→ / ← 进出子菜单,打字母跳转。
- 键盘触发:让区域可聚焦(
tabIndex=0),聚焦后按菜单键或 Shift+F10,菜单出现在该元素的左下角。 - Esc 关闭并把焦点还给打开前的元素;点外面关闭。
- 打开时焦点在菜单本身,不预先高亮任何项,避免误触。
- 右键菜单对触屏和读屏用户都不容易发现,里面的每个操作都应该另有可见入口(比如行尾的“更多”按钮配 DropdownMenu)。