دیگ

Context Menuv1.0.0

منویی که با راست‌کلیک (یا لمس طولانی) روی یک ناحیه باز می‌شود و عملیات مربوط به همان ناحیه را نشان می‌دهد. زیرمنوها در چیدمان راست‌به‌چپ به سمت چپ باز می‌شوند و فلششان هم همان‌جا را نشانه می‌رود.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

اینجا راست‌کلیک کنید

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/context-menu.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/context-menu.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/context-menu.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/context-menu.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

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

<ContextMenu>
  <ContextMenuTrigger>ناحیهٔ راست‌کلیک</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onSelect={rename}>تغییر نام</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

اجزایش دقیقاً با منوی کشویی یکی است: آیتم، چک‌باکس، رادیو، برچسب، جداکننده، میان‌بر و زیرمنو. تنها تفاوت در محرک باز شدن است: منوی کشویی با کلیک روی یک دکمه باز می‌شود و منوی راست‌کلیک روی یک ناحیه.

ContextMenuTrigger برخلاف تریگر منوی کشویی معمولاً یک div است، پس خودتان باید به آن اندازه و ظاهر بدهید.

ContextMenuShortcut با dir="ltr" رندر می‌شود تا ترکیب کلیدها مثل Ctrl+C در متن فارسی به‌هم نریزد.

دسترس‌پذیری

  • منو با Shift+F10 یا کلید Menu روی صفحه‌کلید هم باز می‌شود؛ راست‌کلیک تنها راه نیست.
  • هر عملیاتی که اینجا می‌گذارید باید جای دیگری هم در دسترس باشد؛ منوی راست‌کلیک برای کاربر لمسی و صفحه‌خوان راه اصلی نیست.
  • ناوبری با کلیدهای بالا و پایین است و زیرمنو با کلید جهت‌دارِ سمت باز شدن (در راست‌به‌چپ، کلید چپ) باز می‌شود؛ Escape یک سطح عقب می‌برد.
  • حروف تایپ‌شده جستجوی سریع در آیتم‌ها را فعال می‌کنند، پس متن آیتم‌ها را با کلمهٔ کلیدی معنادار شروع کنید.
  • برای عملیات خطرناک variant="destructive" بگذارید؛ رنگ به‌تنهایی کافی نیست، متن هم باید صریح باشد («حذف همیشگی»).

مرجع API

ContextMenu

ویژگینوعپیش‌فرضتوضیح
onOpenChange(open: boolean) => void—هنگام باز و بسته شدن صدا زده می‌شود؛ منوی راست‌کلیک prop به نام open ندارد چون موقعیتش از رویداد ماوس می‌آید.

ContextMenuTrigger

ویژگینوعپیش‌فرضتوضیح
disabledbooleanfalseراست‌کلیک روی این ناحیه منو را باز نمی‌کند.
classNamestring—تریگر یک span بدون استایل است؛ اندازه و ظاهر ناحیه را خودتان بدهید.

ContextMenuItem

ویژگینوعپیش‌فرضتوضیح
variant"default" | "destructive""default"حالت خطرناک، متن و آیکون را قرمز می‌کند.
insetbooleanfalseفاصلهٔ اضافی از سمت شروع، برای هم‌ترازی با آیتم‌های دارای نشانگر.
onSelect(event: Event) => void—انتخاب آیتم؛ با preventDefault می‌توانید جلوی بسته شدن منو را بگیرید.
disabledbooleanfalseآیتم را از کلیک و ناوبری صفحه‌کلید خارج می‌کند.

ContextMenuCheckboxItem / ContextMenuRadioItem

ویژگینوعپیش‌فرضتوضیح
checked / onCheckedChangeboolean / (checked: boolean) => void—مخصوص چک‌باکس؛ نشانگر تیک در سمت شروع می‌نشیند.
valuestring—مخصوص آیتم رادیویی؛ مقدار فعال روی ContextMenuRadioGroup تعیین می‌شود.

ContextMenuSub / ContextMenuShortcut

ویژگینوعپیش‌فرضتوضیح
ContextMenuSubTriggerComponent—آیتمی که زیرمنو را باز می‌کند؛ فلش جهت‌آگاه خودکار اضافه می‌شود.
ContextMenuSubContentComponent—محتوای زیرمنو؛ عرضش را با className بدهید.
ContextMenuShortcutspan—میان‌بر صفحه‌کلید در انتهای آیتم؛ همیشه با dir=ltr رندر می‌شود.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.