文档演练博客

上下文菜单

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

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

¥API Reference

此组件继承了上下文菜单基础组件的属性。

¥This component inherits props from the Context Menu primitive.

根

¥Root

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

¥Contains all the parts of a context menu.

触发器

¥Trigger

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

¥Wraps the element that will open the context menu.

内容

¥Content

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

¥The component that pops out when the context menu is open.

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

项目

¥Item

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

¥The component that contains the context menu items.

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

组

¥Group

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

¥Used to group multiple Item parts.

RadioGroup

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

¥Used to group multiple RadioItem parts.

RadioItem

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

¥An item that can be controlled and rendered like a radio.

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

CheckboxItem

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

¥An item that can be controlled and rendered like a checkbox.

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

Sub

包含子菜单的所有部分。

¥Contains all the parts of a submenu.

SubTrigger

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

¥An item that opens a submenu. Must be rendered inside ContextMenu.Sub.

SubContent

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

¥The component that pops out when a submenu is open. Must be rendered inside ContextMenu.Sub.

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the size.

Size oneRight-click here

Size twoRight-click here

<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

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

¥Use the variant prop to customize the visual style of the context menu.

SolidRight-click here

SoftRight-click here

<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 属性指定特定的 color。你还可以将 color 传递给特定项目，以便出于语义原因（例如，破坏性操作）进行覆盖。

¥Use the color prop to assign a specific color. You can also pass color to a specific item to override for semantic reasons (i.e. a destructive action).

IndigoRight-click here

CyanRight-click here

OrangeRight-click here

CrimsonRight-click here

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

高对比度

¥High-contrast

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

¥Use the highContrast prop to increase color contrast with the background.

StandardRight-click here

High-contrastRight-click here

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

Previous复选框卡片

Next数据列表

概览

主题

布局

排版

组件

实用工具

上下文菜单