上下文菜单

表示一组操作的菜单，在右键点击或长按时显示。

查看源代码报告问题在 Playground 中查看

右键单击此处

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <RightClickZone style={{ height: 150 }} />
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
    <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

    <ContextMenu.Sub>
      <ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>
      <ContextMenu.SubContent>
        <ContextMenu.Item>Move to project…</ContextMenu.Item>
        <ContextMenu.Item>Move to folder…</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>Advanced options…</ContextMenu.Item>
      </ContextMenu.SubContent>
    </ContextMenu.Sub>

    <ContextMenu.Separator />
    <ContextMenu.Item>Share</ContextMenu.Item>
    <ContextMenu.Item>Add to favorites</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item shortcut="⌘ ⌫" color="red">
      Delete
    </ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

API 参考

此组件继承自上下文菜单原语的道具。

根

包含上下文菜单的所有部分。

触发器

包装将打开上下文菜单的元素。

内容

上下文菜单打开时弹出的组件。

道具	类型	默认值
`大小`	`Responsive<"1" \| "2">`	`"2"`
`变体`	`"solid" \| "soft"`	`"solid"`
`颜色`	`枚举`	无默认值
`高对比度`	`布尔值`	无默认值

项目

包含上下文菜单项目的组件。

道具	类型	默认值
`asChild`	`布尔值`	无默认值
`颜色`	`枚举`	无默认值
`快捷键`	`字符串`	无默认值

组

用于对多个 Item 部分进行分组。

RadioGroup

用于对多个 RadioItem 部分进行分组。

RadioItem

可以像单选按钮一样控制和渲染的项目。

道具	类型	默认值
`颜色`	`枚举`	无默认值

CheckboxItem

可以像复选框一样控制和渲染的项目。

道具	类型	默认值
`颜色`	`枚举`	无默认值
`快捷键`	`字符串`	无默认值

子菜单

包含子菜单的所有部分。

子菜单触发器

打开子菜单的项目。必须在 ContextMenu.Sub 内渲染。

子菜单内容

子菜单打开时弹出的组件。必须在 ContextMenu.Sub 内渲染。

示例

大小

使用 size 道具控制大小。

大小一右键单击此处

大小二右键单击此处

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size one" />
    </ContextMenu.Trigger>
    <ContextMenu.Content size="1">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size two" />
    </ContextMenu.Trigger>
    <ContextMenu.Content size="2">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

变体

使用 variant 道具自定义上下文菜单的视觉样式。

实心右键单击此处

柔和右键单击此处

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Solid" />
    </ContextMenu.Trigger>
    <ContextMenu.Content variant="solid">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Soft" />
    </ContextMenu.Trigger>
    <ContextMenu.Content variant="soft">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

颜色

使用 color 道具分配特定的颜色。您还可以将 color 传递给特定项目以出于语义原因覆盖（例如，破坏性操作）。

靛蓝右键单击此处

青色右键单击此处

橙色右键单击此处

深红色右键单击此处

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Indigo" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="indigo">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Cyan" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="cyan">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Orange" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="orange">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Crimson" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="crimson">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

高对比度

使用 highContrast 道具增加与背景的颜色对比度。

标准右键单击此处

高对比度右键单击此处

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Standard" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="gray">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="High-contrast" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="gray" highContrast>
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

上一个复选框卡片

下一个数据列表

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

工具

上下文菜单