ContextMenu 上下文菜单

从右键、Shift+F10 或明确替代入口打开与当前对象相关的即时操作。

Beta

示例

直接操作示例，查看组件在具体任务中的状态与反馈。

交互示例 · 本地数据

ContextMenu 本地操作示例

展示右键、Shift+F10、可见替代入口和宿主持有的本地菜单状态。

右键、Shift+F10 与可见按钮共享同一组本地动作；业务请求、权限和持久化仍由宿主应用负责。
本地文件操作
季度报告.md在此区域右键，或聚焦后按 Shift+F10。
尚未执行操作；详情显示；舒适密度；菜单已关闭。
交互示例 · 本地数据

ContextMenu 复选项

复选菜单项切换独立视图设置，并由宿主持有结果。

复选菜单项切换独立视图设置，并由宿主持有结果。
右键此区域
季度报告
详情当前显示。
交互示例 · 本地数据

ContextMenu 单选组

菜单内单选组用于切换互斥的本地视图密度。

菜单内单选组用于切换互斥的本地视图密度。
右键此区域
内容列表
当前为舒适密度。
交互示例 · 本地数据

ContextMenu 子菜单

层级动作只在需要选择目标时展开第二级菜单。

层级动作只在需要选择目标时展开第二级菜单。
右键文件区域
发布清单.md

使用建议

只提供当前对象的即时动作

上下文菜单应围绕已聚焦或已指向的对象组织短动作；全局导航、长流程和字段选择应使用持续可见的专用入口。

同时提供键盘与可见入口

触发区域必须可以聚焦并支持 Shift+F10；关键动作还应提供可见替代入口，避免把右键作为唯一发现方式。

由宿主持有状态和副作用

Checkbox、Radio 与 onSelect 只上报交互意图；权限、确认、请求、路由、持久化和失败恢复都由宿主应用负责。

引入方式

从已验证的公开子路径导入组件；全局样式接入方式见安装指南。

import {
  BaseContextMenu,
  BaseContextMenuCheckboxItem,
  BaseContextMenuContent,
  BaseContextMenuItem,
  BaseContextMenuLabel,
  BaseContextMenuRadioGroup,
  BaseContextMenuRadioItem,
  BaseContextMenuSeparator,
  BaseContextMenuSub,
  BaseContextMenuSubContent,
  BaseContextMenuSubTrigger,
  BaseContextMenuTrigger,
} from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • ContextMenu 不应成为关键动作的唯一入口；触摸发现性、权限判断、危险操作确认和业务副作用仍由宿主负责。
  • T17 尚缺 deterministic visual、touch/mobile、manual screen-reader 与最终 packed React 18/19 证据。
  • Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.

API

BaseContextMenu

查看组件源码
export interface BaseContextMenuProps {
  children?: ReactNode;
  trigger?: ReactNode;
  content?: ReactNode;
  disabled?: boolean;
  modal?: boolean;
  dir?: 'ltr' | 'rtl';
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseContextMenuClassNames;
  onOpenChange?: (open: boolean) => void;
}
属性说明类型默认值
children在 BaseContextMenu 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
trigger用于触发打开、关闭或显示内容的元素。ReactNode—
content浮层或弹出区域中呈现的内容。ReactNode—
disabled是否禁用该组件及其可交互行为。booleanfalse
modal上下文菜单打开时是否阻止与页面其他区域交互。booleantrue
dir弹出内容与键盘导航使用的文字方向。'ltr' | 'rtl'—
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseContextMenuClassNames—
onOpenChange打开状态变化时调用的回调，参数为新的打开状态。(open: boolean) => void—

BaseContextMenuCheckboxItem

查看组件源码
export interface BaseContextMenuCheckboxItemProps
  extends Omit<
    BaseContextMenuItemProps,
    'checked' | 'onChange' | 'onCheckedChange'
  > {
  checked?: boolean | 'indeterminate';
  onCheckedChange?: (checked: boolean) => void;
}
属性说明类型默认值
checked复选菜单项当前的受控选中状态。boolean | 'indeterminate'—
onCheckedChange复选菜单项选中状态变化时调用的回调。(checked: boolean) => void—

BaseContextMenuContent

查看组件源码
export interface BaseContextMenuContentProps
  extends Omit<
    ComponentPropsWithoutRef<typeof ContextMenu.Content>,
    'children' | 'className' | 'style'
  > {
  children?: ReactNode;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseContextMenuContentClassNames;
  style?: CSSProperties;
}
属性说明类型默认值
children在 BaseContextMenuContent 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseContextMenuContentClassNames—
style追加到组件根元素的内联样式。CSSProperties—

BaseContextMenuItem

查看组件源码
export interface BaseContextMenuItemProps
  extends Omit<
    ComponentPropsWithoutRef<typeof ContextMenu.Item>,
    'children' | 'className' | 'disabled' | 'onSelect' | 'style'
  > {
  children?: ReactNode;
  label?: ReactNode;
  icon?: ReactNode;
  shortcut?: ReactNode;
  tone?: BaseControlTone;
  disabled?: boolean;
  inset?: boolean;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseContextMenuItemClassNames;
  style?: CSSProperties;
  onSelect?: (event: Event) => void;
}
属性说明类型默认值
children在 BaseContextMenuItem 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
label菜单项显示的主要文字内容。ReactNode—
icon显示在主要内容旁的图标。ReactNode—
shortcut显示在菜单项末端的快捷键信息。ReactNode—
tone组件使用的语义色调。BaseControlTone—
disabled是否禁用该组件及其可交互行为。booleanfalse
inset菜单项内容是否使用与带图标条目对齐的缩进。booleanfalse
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseContextMenuItemClassNames—
style追加到组件根元素的内联样式。CSSProperties—
onSelect条目被选择时调用的回调。(event: Event) => void—

BaseContextMenuLabel

查看组件源码
export interface BaseContextMenuLabelProps
  extends Omit<
    ComponentPropsWithoutRef<typeof ContextMenu.Label>,
    'children' | 'className' | 'style'
  > {
  children?: ReactNode;
  appearance?: BaseAppearance;
  className?: string;
  style?: CSSProperties;
}
属性说明类型默认值
children在 BaseContextMenuLabel 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
style追加到组件根元素的内联样式。CSSProperties—

BaseContextMenuRadioGroup

查看组件源码
export interface BaseContextMenuRadioGroupProps {
  children?: ReactNode;
  value?: string;
  onValueChange?: (value: string) => void;
}
属性说明类型默认值
children在 BaseContextMenuRadioGroup 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
value单选菜单组当前选中项的受控值。string—
onValueChange值变化时调用的回调；参数结构以当前组件的 Props 类型为准。(value: string) => void—

BaseContextMenuRadioItem

查看组件源码
export interface BaseContextMenuRadioItemProps
  extends Omit<BaseContextMenuItemProps, 'onChange' | 'value'> {
  value: string;
}
属性说明类型默认值
value必填该单选菜单项提交给所属组的唯一值。string—

BaseContextMenuSeparator

查看组件源码
export interface BaseContextMenuSeparatorProps
  extends Omit<
    ComponentPropsWithoutRef<typeof ContextMenu.Separator>,
    'className' | 'style'
  > {
  appearance?: BaseAppearance;
  className?: string;
  style?: CSSProperties;
}
属性说明类型默认值
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
style追加到组件根元素的内联样式。CSSProperties—

BaseContextMenuSub

查看组件源码
export interface BaseContextMenuSubProps {
  children?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}
属性说明类型默认值
children在 BaseContextMenuSub 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
open组件当前的受控打开状态。boolean—
defaultOpen非受控模式下是否默认打开。boolean—
onOpenChange打开状态变化时调用的回调，参数为新的打开状态。(open: boolean) => void—

BaseContextMenuSubContent

查看组件源码
export interface BaseContextMenuSubContentProps
  extends Omit<
    ComponentPropsWithoutRef<typeof ContextMenu.SubContent>,
    'children' | 'className' | 'style'
  > {
  children?: ReactNode;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseContextMenuContentClassNames;
  style?: CSSProperties;
}
属性说明类型默认值
children在 BaseContextMenuSubContent 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseContextMenuContentClassNames—
style追加到组件根元素的内联样式。CSSProperties—

BaseContextMenuSubTrigger

查看组件源码
export interface BaseContextMenuSubTriggerProps
  extends Omit<BaseContextMenuItemProps, 'onSelect' | 'shortcut'> {}
属性说明类型默认值
此导出没有独立声明的 Props；请以上方类型声明及其继承约束为准。

BaseContextMenuTrigger

查看组件源码
export interface BaseContextMenuTriggerProps
  extends Omit<
    ComponentPropsWithoutRef<typeof ContextMenu.Trigger>,
    'asChild' | 'children' | 'className' | 'disabled' | 'style'
  > {
  children?: ReactNode;
  disabled?: boolean;
  asChild?: boolean;
  appearance?: BaseAppearance;
  className?: string;
  style?: CSSProperties;
}
属性说明类型默认值
children在 BaseContextMenuTrigger 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。ReactNode—
disabled是否禁用该组件及其可交互行为。booleanfalse
asChild是否将触发器行为合并到唯一子元素，而不额外创建 DOM 节点。booleanfalse
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
style追加到组件根元素的内联样式。CSSProperties—