120k
New

上下文菜单

PreviousNext

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

Base UIReact AriaRadix UI
"use client"

import { Pressable } from "react-aria-components"

安装

pnpm dlx shadcn@latest add context-menu

用法

import { Pressable } from "react-aria-components"
 
import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenuTrigger>
  <Pressable>
    <div role="button">在此处右键点击</div>
  </Pressable>
  <ContextMenu>
    <ContextMenuItem>个人资料</ContextMenuItem>
    <ContextMenuItem>账单</ContextMenuItem>
    <ContextMenuItem>团队</ContextMenuItem>
    <ContextMenuItem>订阅</ContextMenuItem>
  </ContextMenu>
</ContextMenuTrigger>

组成

使用以下组合构建一个 ContextMenu：

ContextMenuTrigger
├── Pressable
└── ContextMenuContent
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuItem
    │   └── ContextMenuItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuItem
    │   └── ContextMenuItem
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent
            └── ContextMenuGroup
                ├── ContextMenuItem
                └── ContextMenuItem

基础

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

"use client"

import { Pressable } from "react-aria-components"

子菜单

使用 ContextMenuSub 嵌套次级操作。

"use client"

import { Pressable } from "react-aria-components"

快捷键

添加 ContextMenuShortcut 以显示键盘提示。

"use client"

import { Pressable } from "react-aria-components"

分组

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

"use client"

import { Pressable } from "react-aria-components"

图标

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

"use client"

import {

复选框

对于切换项，请使用 selectionMode="multiple"。

"use client"

import { useState } from "react"

单选框

使用 selectionMode="single" 实现互斥选择。

"use client"

import * as React from "react"

破坏性

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

"use client"

import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"

放置位置

使用 placement 属性控制子菜单的放置位置。

"use client"

import { Pressable } from "react-aria-components"

RTL

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

"use client"

import * as React from "react"

使用 placement="end" 将菜单放置在触发器逻辑上的末端。

<ContextMenuTrigger>
  <Pressable>
    <div role="button">在此处右键点击</div>
  </Pressable>
  <ContextMenu placement="end">
    <ContextMenuItem>个人资料</ContextMenuItem>
    <ContextMenuItem>账单</ContextMenuItem>
    <ContextMenuItem>团队</ContextMenuItem>
    <ContextMenuItem>订阅</ContextMenuItem>
  </ContextMenu>
</ContextMenuTrigger>

API 参考

有关更多信息，请参阅 React Aria 文档。