上下文菜单

import {
  ContextMenu,
  ContextMenuCheckboxItem,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add context-menu
Copy

用法

🌐 Usage

Copyimport {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

Copy<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

示例

🌐 Examples

基础

🌐 Basic

一个带有几个操作的简单上下文菜单。

🌐 A simple context menu with a few actions.

import {
  ContextMenu,
  ContextMenuContent,

子菜单

🌐 Submenu

使用 ContextMenuSub 来嵌套二级操作。

🌐 Use ContextMenuSub to nest secondary actions.

import {
  ContextMenu,
  ContextMenuContent,

快捷方式

🌐 Shortcuts

添加 ContextMenuShortcut 以显示键盘提示。

🌐 Add ContextMenuShortcut to show keyboard hints.

import {
  ContextMenu,
  ContextMenuContent,

群组

🌐 Groups

将相关操作分组，并用分隔符分开。

🌐 Group related actions and separate them with dividers.

import {
  ContextMenu,
  ContextMenuContent,

图标

🌐 Icons

将图标与标签结合以便快速浏览。

🌐 Combine icons with labels for quick scanning.

import {
  ContextMenu,
  ContextMenuContent,

复选框

🌐 Checkboxes

使用 ContextMenuCheckboxItem 来切换。

🌐 Use ContextMenuCheckboxItem for toggles.

import {
  ContextMenu,
  ContextMenuCheckboxItem,

单选框

🌐 Radio

使用 ContextMenuRadioItem 进行独占选择。

🌐 Use ContextMenuRadioItem for exclusive choices.

"use client"

import * as React from "react"

破坏性

🌐 Destructive

使用 variant="destructive" 将菜单项样式设为破坏性。

🌐 Use variant="destructive" to style the menu item as destructive.

import {
  ContextMenu,
  ContextMenuContent,

边

🌐 Sides

使用 side 和 align 属性控制子菜单的位置。

🌐 Control submenu placement with side and align props.

import {
  ContextMenu,
  ContextMenuContent,

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

使用 side="inline-end" 将菜单放置在触发器的逻辑右侧。

🌐 Use side="inline-end" to place the menu on the logical right side of the trigger.

Copy<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent side="inline-end">
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API参考

🌐 API Reference

有关更多信息，请参见 Base UI 文档。

🌐 See the Base UI documentation for more information.