پرتوپرتو

نوار منو (Menubar)

یک نوار منوی افقی برای ناوبری و دستورات

معرفی

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

استفاده

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from '@parto/ui';

export default function MyComponent() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>فایل</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>جدید</MenubarItem>
          <MenubarItem>باز کردن</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>ذخیره</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>ویرایش</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>برش</MenubarItem>
          <MenubarItem>کپی</MenubarItem>
          <MenubarItem>چسباندن</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

با Checkbox

<MenubarMenu>
  <MenubarTrigger>نمایش</MenubarTrigger>
  <MenubarContent>
    <MenubarCheckboxItem checked={showPanel}>
      نمایش پنل
    </MenubarCheckboxItem>
    <MenubarCheckboxItem checked={showStatusBar}>
      نمایش نوار وضعیت
    </MenubarCheckboxItem>
  </MenubarContent>
</MenubarMenu>

با Radio Group

<MenubarMenu>
  <MenubarTrigger>تنظیمات</MenubarTrigger>
  <MenubarContent>
    <MenubarRadioGroup value={theme} onValueChange={setTheme}>
      <MenubarRadioItem value="light">روشن</MenubarRadioItem>
      <MenubarRadioItem value="dark">تاریک</MenubarRadioItem>
      <MenubarRadioItem value="system">سیستم</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarContent>
</MenubarMenu>

با زیرمنو

<MenubarMenu>
  <MenubarTrigger>فایل</MenubarTrigger>
  <MenubarContent>
    <MenubarSub>
      <MenubarSubTrigger>باز کردن اخیر</MenubarSubTrigger>
      <MenubarSubContent>
        <MenubarItem>فایل 1</MenubarItem>
        <MenubarItem>فایل 2</MenubarItem>
      </MenubarSubContent>
    </MenubarSub>
  </MenubarContent>
</MenubarMenu>

با کلید میانبر

<MenubarItem>
  ذخیره
  <MenubarShortcut>⌘S</MenubarShortcut>
</MenubarItem>

ویژگی‌ها

  • منوهای کشویی چندسطحی
  • Checkbox و Radio items
  • کلیدهای میانبر
  • زیرمنوها
  • جداکننده‌ها
  • کاملا دسترسی‌پذیر
  • سازگار با RTL