上下文菜单

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

在此处右键单击

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

此组件继承自 Context Menu primitive 的属性。

Root

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

Trigger

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

Content

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

Prop	Type	Default
`size`	`Responsive<"1" \| "2">`	`"2"`
`variant`	`"solid" \| "soft"`	`"solid"`
`color`	`enum`	无默认值
`highContrast`	`boolean`	无默认值

Label

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

Item

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

Prop	Type	Default
`asChild`	`boolean`	无默认值
`color`	`enum`	无默认值
`shortcut`	`string`	无默认值

Group

用于分组多个 Item 部件。

RadioGroup

用于分组多个 RadioItem 部件。

RadioItem

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

Prop	Type	Default
`color`	`enum`	无默认值

CheckboxItem

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

Prop	Type	Default
`color`	`enum`	无默认值
`shortcut`	`string`	无默认值

Sub

包含子菜单的所有部分。

SubTrigger

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

SubContent

子菜单打开时弹出的组件。必须在 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>

上一个Checkbox Cards

下一个Data List

在 GitHub 上编辑此页。

概述

主题

布局

排版

组件

实用工具