# 上下文菜单

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

```jsx
<ContextMenu.Root>
  <ContextMenu.Trigger>
    <RightClickZone style={{ height: 150 }} />
  </ContextMenu.Trigger>

  <ContextMenu.Content>
    <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

    <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

    <ContextMenu.Separator />

    <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

    <ContextMenu.Sub>
      <ContextMenu.SubTrigger>更多</ContextMenu.SubTrigger>

      <ContextMenu.SubContent>
        <ContextMenu.Item>移动到项目…</ContextMenu.Item>

        <ContextMenu.Item>移动到文件夹…</ContextMenu.Item>

        <ContextMenu.Separator />

        <ContextMenu.Item>高级选项…</ContextMenu.Item>
      </ContextMenu.SubContent>
    </ContextMenu.Sub>

    <ContextMenu.Separator />

    <ContextMenu.Item>分享</ContextMenu.Item>

    <ContextMenu.Item>添加到收藏夹</ContextMenu.Item>

    <ContextMenu.Separator />

    <ContextMenu.Item shortcut="⌘ ⌫" color="red">
      删除
    </ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>
```

## [API 参考](#api-参考)

该组件继承自 [上下文菜单原语](/primitives/docs/components/context-menu)。

### [Root](#root)

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

### [Trigger](#trigger)

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

### [Content](#content)

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

| Prop           | Type                     | Default          |
| -------------- | ------------------------ | ---------------- |
| `size`         | `Responsive<"1" \| "2">` | `"2"`            |
| `variant`      | `"solid" \| "soft"`      | `"solid"`        |
| `color`        | `enum`                   | No default value |
| `highContrast` | `boolean`                | No default value |

### [Label](#label)

用于渲染标签。不能使用箭头键聚焦。

### [Item](#item)

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

| Prop       | Type      | Default          |
| ---------- | --------- | ---------------- |
| `asChild`  | `boolean` | No default value |
| `color`    | `enum`    | No default value |
| `shortcut` | `string`  | No default value |

### [Group](#group)

用于将多个 `Item` 部分分组。

### [RadioGroup](#radiogroup)

用于将多个 `RadioItem` 部分分组。

### [RadioItem](#radioitem)

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

| Prop    | Type   | Default          |
| ------- | ------ | ---------------- |
| `color` | `enum` | No default value |

### [CheckboxItem](#checkboxitem)

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

| Prop       | Type     | Default          |
| ---------- | -------- | ---------------- |
| `color`    | `enum`   | No default value |
| `shortcut` | `string` | No default value |

### [Sub](#sub)

包含子菜单的所有部分。

### [SubTrigger](#subtrigger)

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

### [SubContent](#subcontent)

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

## [示例](#示例)

### [大小](#大小)

使用 `size` 属性控制大小。

```jsx
<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="大小一" />
    </ContextMenu.Trigger>

    <ContextMenu.Content size="1">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="大小二" />
    </ContextMenu.Trigger>

    <ContextMenu.Content size="2">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>
```

### [变体](#变体)

使用 `variant` 属性自定义上下文菜单的视觉风格。

```jsx
<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="实心" />
    </ContextMenu.Trigger>

    <ContextMenu.Content variant="solid">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="柔和" />
    </ContextMenu.Trigger>

    <ContextMenu.Content variant="soft">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>
```

### [颜色](#颜色)

使用 `color` 属性分配特定的 [颜色](/themes/docs/theme/color)。您还可以将 `color` 传递给特定项以出于语义原因覆盖（即破坏性操作）。

```jsx
<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="靛蓝" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="indigo">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="青色" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="cyan">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="橙色" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="orange">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="深红" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="crimson">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        删除
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增加与背景的颜色对比度。

```jsx
<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="标准" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="gray">
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="高对比度" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="gray" highContrast>
      <ContextMenu.Item shortcut="⌘ E">编辑</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">复制</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">归档</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>
```

<!--$-->

<!--/$-->