Context Menu 上下文菜单
根据当前目标的上下文,在右键或菜单键处提供相关快捷操作。
使用概览
适合使用
- 画布、文件项或表格行具有熟悉的对象级快捷操作时。
不建议使用
- 关键操作只存在于隐藏菜单,触屏用户无法发现入口时。
真实示例
文件上下文菜单
为单个文件提供重命名与下载快捷操作。
报告.pdf · 右键或按 Shift+F10
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/context-menu.json基础用法
导入
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@richardqiu/quartz/context-menu";JSX
<ContextMenu><ContextMenuTrigger>报告.pdf</ContextMenuTrigger><ContextMenuContent><ContextMenuItem>重命名</ContextMenuItem><ContextMenuItem>下载</ContextMenuItem></ContextMenuContent></ContextMenu>状态与控制摘要
默认
悬停
键盘焦点可见
已禁用
已勾选
已选择
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modal | boolean | true | 决定菜单打开时是否阻止与外部内容交互。 |
组合结构
- 01
ContextMenu - 02
ContextMenuTrigger - 03
ContextMenuContent - 04
ContextMenuItem - 05
ContextMenuSub
键盘约定
- Shift+F10 或菜单键在已聚焦触发器处打开;方向键导航,Escape 关闭。
可访问性契约
- 键盘用户需要相同操作时,ContextMenuTrigger 必须可聚焦。
- 始终为触摸用户和不易发现上下文菜单的用户提供可见替代操作。