浮层组件版本 0.1.0

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 · boolean

API 参考

属性类型默认值说明
modalbooleantrue决定菜单打开时是否阻止与外部内容交互。

组合结构

  1. 01ContextMenu
  2. 02ContextMenuTrigger
  3. 03ContextMenuContent
  4. 04ContextMenuItem
  5. 05ContextMenuSub

键盘约定

  • Shift+F10 或菜单键在已聚焦触发器处打开;方向键导航,Escape 关闭。

可访问性契约

  • 键盘用户需要相同操作时,ContextMenuTrigger 必须可聚焦。
  • 始终为触摸用户和不易发现上下文菜单的用户提供可见替代操作。