منوی کانتکست (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
ContextMenuItem
حالتها و انواع
با زیرمنو
<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 — وقتی چندین منو در یک نوار افقی سطح بالا نیاز دارید