109k
新建

上下文菜单

上一页下一页

显示一个通过右键点击触发的操作菜单。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
import {
  ContextMenu,
  ContextMenuCheckboxItem,

安装

pnpm dlx shadcn@latest add context-menu

用法

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

示例

基础用法

一个包含少量操作的简单上下文菜单。

import {
  ContextMenu,
  ContextMenuContent,

子菜单

使用 ContextMenuSub 来嵌套二级操作。

import {
  ContextMenu,
  ContextMenuContent,

快捷键

添加 ContextMenuShortcut 来显示键盘快捷键提示。

import {
  ContextMenu,
  ContextMenuContent,

分组

对相关操作进行分组，并使用分隔线将它们隔开。

import {
  ContextMenu,
  ContextMenuContent,

图标

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

import {
  ContextMenu,
  ContextMenuContent,

复选框

使用 ContextMenuCheckboxItem 实现开关功能。

import {
  ContextMenu,
  ContextMenuCheckboxItem,

单选框

使用 ContextMenuRadioItem 进行单项选择。

"use client"

import * as React from "react"

破坏性按钮

使用 variant="destructive" 将菜单项样式设置为危险/删除操作。

import {
  ContextMenu,
  ContextMenuContent,

RTL (从右至左)

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

"use client"

import * as React from "react"

API 参考

查阅 Radix UI 文档以获取更多信息。