上下文菜单

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

View source Report an issue View in Playground

Right-click here

<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 参考

该组件继承自上下文菜单原语。

Root

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

Trigger

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

Content

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

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

Label

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

Item

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

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

Group

用于将多个 Item 部分分组。

RadioGroup

用于将多个 RadioItem 部分分组。

RadioItem

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

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

CheckboxItem

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

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

Sub

包含子菜单的所有部分。

SubTrigger

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

SubContent

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

示例

大小

使用 size 属性控制大小。

大小一Right-click here

大小二Right-click here

<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 属性自定义上下文菜单的视觉风格。

实心Right-click here

柔和Right-click here

<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 属性分配特定的颜色。您还可以将 color 传递给特定项以出于语义原因覆盖（即破坏性操作）。

靛蓝Right-click here

青色Right-click here

橙色Right-click here

深红Right-click here

<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 属性增加与背景的颜色对比度。

标准Right-click here

高对比度Right-click here

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

上一篇复选框卡片 Checkbox Cards

下一篇数据列表 Data List

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

上下文菜单