Components
Right click hereLong press here
import {
ContextMenu,
ContextMenuCheckboxItem,安装
pnpm dlx shadcn@latest add context-menu
用法
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu"<ContextMenu>
<ContextMenuTrigger>在这里右键点击</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>个人资料</ContextMenuItem>
<ContextMenuItem>账单</ContextMenuItem>
<ContextMenuItem>团队</ContextMenuItem>
<ContextMenuItem>订阅</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>示例
基础
一个带有几个操作的简单上下文菜单。
Right click hereLong press here
import {
ContextMenu,
ContextMenuContent,子菜单
使用 ContextMenuSub 嵌套二级操作。
Right click hereLong press here
import {
ContextMenu,
ContextMenuContent,快捷键
添加 ContextMenuShortcut 显示键盘提示。
Right click hereLong press here
import {
ContextMenu,
ContextMenuContent,分组
将相关操作分组并用分隔线区分。
Right click hereLong press here
import {
ContextMenu,
ContextMenuContent,图标
图标与标签结合，方便快速浏览。
Right click hereLong press here
import {
ContextMenu,
ContextMenuContent,复选框
使用 ContextMenuCheckboxItem 作为开关。
Right click hereLong press here
import {
ContextMenu,
ContextMenuCheckboxItem,单选
使用 ContextMenuRadioItem 作为互斥选项。
Right click hereLong press here
"use client"
import * as React from "react"危险操作
使用 variant="destructive" 将菜单项样式设为危险类型。
Right click hereLong press here
import {
ContextMenu,
ContextMenuContent,位置
通过 side 和 align 属性控制子菜单弹出位置。
Right click (top)Long press (top)
Right click (right)Long press (right)
Right click (bottom)Long press (bottom)
Right click (left)Long press (left)
import {
ContextMenu,
ContextMenuContent,API 参考
更多信息请参见 Base UI 文档。