Menubarv1.0.0
نواری از منوهای کشویی که مثل نوار منوی نرم‌افزارهای دسکتاپ کار می‌کند: با کلیک باز می‌شود و بعد از آن، عبور نشانگر روی بقیهٔ عنوان‌ها منوی آن‌ها را باز می‌کند. برای ابزارهای سنگین مثل ویرایشگر یا داشبورد مدیریتی.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/menubar.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/menubar.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/menubar.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/menubar.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarTrigger,
} from "@/components/ui/menubar"
<Menubar>
<MenubarMenu>
<MenubarTrigger>پرونده</MenubarTrigger>
<MenubarContent>
<MenubarItem onSelect={newFile}>سند تازه</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
هر ستون یک MenubarMenu است با یک تریگر و یک محتوا؛ تفاوتش با چند DropdownMenu کنار هم این است که وقتی یکی باز شد، بقیه با عبور ساده نشانگر باز می‌شوند و ناوبری افقی با کلیدهای جهت‌دار بین همهٔ منوها کار می‌کند.
اجزای داخل منو (آیتم، چک‌باکس، رادیو، برچسب، میان‌بر و زیرمنو) دقیقاً همان‌های منوی کشویی‌اند.
میان‌برها با dir=ltr رندر می‌شوند تا ترکیب کلیدها در متن فارسی به‌هم نریزد.
دسترس‌پذیری
- کلیدهای چپ و راست بین منوها و بالا و پایین بین آیتم‌ها حرکت می‌کنند؛ جهت افقی از dir صفحه می‌آید و در راست‌به‌چپ برعکس می‌شود.
- زیرمنو با کلید جهت‌دارِ سمت باز شدن (در راست‌به‌چپ، کلید چپ) باز و با کلید مخالف بسته می‌شود.
- MenubarShortcut فقط نمایشی است؛ اتصال واقعی کلید را خودتان با یک شنوندهٔ keydown بنویسید.
- تایپ حروف، جستجوی سریع بین آیتم‌ها را فعال می‌کند؛ متن آیتم را با کلمهٔ کلیدی شروع کنید.
- این الگو برای موبایل مناسب نیست؛ در صفحه‌های کوچک به منوی کشویی یا کشو تبدیلش کنید.
مرجع API
Menubar
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value / onValueChange | string / (value: string) => void | — | کنترل اینکه کدام منو باز است. |
| defaultValue | string | — | منوی بازِ اولیه. |
| loop | boolean | false | رسیدن به آخرین منو با کلید جهت‌دار دوباره به اولی برمی‌گردد. |
| dir | "rtl" | "ltr" | — | جهت ناوبری؛ معمولاً از dir صفحه (html) ارث می‌رسد. |
MenubarMenu / MenubarTrigger / MenubarContent
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| MenubarMenu value | string | — | شناسهٔ منو؛ برای کنترل‌شده کردن Menubar لازم است. |
| MenubarContent align | "start" | "center" | "end" | "start" | ترازِ منو نسبت به تریگر؛ در rtl مقدار start یعنی سمت راست. |
| MenubarContent sideOffset | number | 8 | فاصلهٔ منو از نوار. |
MenubarItem
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | حالت خطرناک، متن و آیکون را قرمز می‌کند. |
| inset | boolean | false | فاصلهٔ اضافی از سمت شروع برای هم‌ترازی. |
| onSelect | (event: Event) => void | — | انتخاب آیتم؛ با preventDefault منو بعد از کلیک باز می‌ماند. |
| disabled | boolean | false | خارج کردن آیتم از تعامل و ناوبری. |
MenubarSub / MenubarShortcut
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| MenubarSubTrigger | Component | — | آیتمی که زیرمنو را باز می‌کند؛ فلش جهت‌آگاه دارد. |
| MenubarSubContent | Component | — | محتوای زیرمنو. |
| MenubarShortcut | span | — | میان‌بر در انتهای آیتم؛ همیشه dir=ltr است و فقط نمایشی. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Checkbox and Radio Items
برای تنظیم‌های دوحالته و انتخاب تکی؛ نشانگر انتخاب در سمت شروع می‌نشیند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Disabled and Inset
آیتم غیرفعال فوکوس نمی‌گیرد و inset متن را هم‌تراز آیتم‌های دارای نشانگر می‌کند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Checkbox and Radio Items | برای تنظیم‌های دوحالته و انتخاب تکی؛ نشانگر انتخاب در سمت شروع می‌نشیند. |
| Disabled and Inset | آیتم غیرفعال فوکوس نمی‌گیرد و inset متن را هم‌تراز آیتم‌های دارای نشانگر می‌کند. |
دستورالعمل استفاده
دسته‌بندی با جداکننده
انجام بده
دستورهای هم‌خانواده را با MenubarSeparator از هم جدا کنید و عملیات خطرناک را با فاصله در انتها بگذارید تا اشتباه کلیک نشود.
انجام نده
فهرست یک‌دستِ بدون گروه‌بندی، پیدا کردن دستور را کند می‌کند و «بستن بدون ذخیره» درست کنار «ذخیره» می‌نشیند.
غیرفعال به‌جای حذف
انجام بده
دستوری که در وضعیت فعلی کار نمی‌کند را غیرفعال نشان دهید؛ جای آیتم‌ها ثابت می‌ماند و کاربر یاد می‌گیرد کجا دنبالش بگردد.
انجام نده
حذف و اضافه شدن آیتم‌ها بسته به وضعیت، جای بقیه را جابه‌جا می‌کند و حافظهٔ عضلانی کاربر را می‌شکند.