پرتوپرتو

منوی کانتکست (Context Menu)

منوی کلیک راست

معرفی

کامپوننت ContextMenu برای نمایش منو هنگام کلیک راست استفاده می‌شود.

چه زمانی استفاده کنیم:

  • برای اقدامات ثانویه روی یک المان (مثل ویرایش، کپی، حذف)
  • وقتی می‌خواهید تجربه دسکتاپ بومی‌تری ارائه دهید
  • به عنوان مکمل اقدامات اصلی که از راه‌های دیگر هم قابل دسترسی هستند

چه زمانی استفاده نکنیم:

  • برای اعمال primary — کاربران کلیک راست را فراموش می‌کنند
  • به عنوان تنها راه دسترسی به یک عملکرد — همیشه راه جایگزین داشته باشید

استفاده

روی من کلیک راست کنید
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>روی من کلیک راست کنید</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>ویرایش</ContextMenuItem>
        <ContextMenuItem>کپی</ContextMenuItem>
        <ContextMenuItem>حذف</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Props

ContextMenuContent

Prop

Type

ContextMenuItem

Prop

Type

حالت‌ها و انواع

با زیرمنو

<ContextMenu>
  <ContextMenuTrigger>روی من کلیک راست کنید</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>ویرایش</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>انتقال به</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>پوشه ۱</ContextMenuItem>
        <ContextMenuItem>پوشه ۲</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem>حذف</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

با Checkbox

<ContextMenu>
  <ContextMenuTrigger>ناحیه کلیک راست</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuCheckboxItem checked={showGrid}>نمایش شبکه</ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem checked={showLabels}>نمایش برچسب‌ها</ContextMenuCheckboxItem>
  </ContextMenuContent>
</ContextMenu>

راهنمای استفاده

بکنید

  • همیشه راه جایگزین (مثل دکمه یا DropdownMenu) برای دسترسی به همان اقدامات فراهم کنید - از ContextMenuSeparator برای گروه‌بندی اقدامات مرتبط استفاده کنید - ناحیه trigger را به اندازه کافی بزرگ تعریف کنید تا کلیک راست راحت باشد

نکنید

  • اقدامات اصلی و حیاتی را فقط در ContextMenu نگذارید — کاربران موبایل و بسیاری از کاربران دسکتاپ از کلیک راست استفاده نمی‌کنند - بیش از ۸ آیتم در یک سطح منو نگذارید — از زیرمنو استفاده کنید

دسترسی‌پذیری

  • با کلیدهای و بین آیتم‌ها پیمایش می‌شود
  • با Enter یا Space آیتم انتخاب می‌شود
  • با Escape منو بسته می‌شود
  • از role="menu" و role="menuitem" استفاده می‌شود
  • سازگار با RTL

کامپوننت‌های مرتبط

  • DropdownMenu — وقتی منو باید با کلیک چپ روی یک دکمه باز شود، نه کلیک راست
  • Menubar — وقتی چندین منو در یک نوار افقی سطح بالا نیاز دارید