Menubar

სასტუმროს მოქმედებების მენიუ: ისრებით ნავიგაცია, ტექსტით ძიება, Escape და ჩადგმული ქვემენიუები.

მაგალითი

@llc-conciergia/ui/menubar

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarGroup,
  MenubarLabel,
  MenubarItem,
  MenubarSeparator,
} from "@llc-conciergia/ui/menubar";

<Menubar aria-label="სასტუმროს ადმინისტრაცია">
  <MenubarMenu>
    <MenubarTrigger>ფაილი</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarLabel>ჯავშანი #104</MenubarLabel>
        <MenubarItem>გახსნა</MenubarItem>
        <MenubarItem>რედაქტირება</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarItem variant="destructive">გაუქმება</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>ჯავშნები</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>გახსნა</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>ხედი</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>გახსნა</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>დახმარება</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>გახსნა</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>;

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarGroup,
  MenubarLabel,
  MenubarItem,
  MenubarSeparator,
} from "@llc-conciergia/ui/menubar";

Conciergia CLI

npx @llc-conciergia/cli add menubar

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/menubar.json

შენიშვნები

წარწერებს აპლიკაცია აწვდის ka/en/ru ენებზე. ზემოთ/ქვემოთ ისრები გადაადგილდება ელემენტებს შორის, მარჯვენა/მარცხენა ხსნის/ხურავს ქვემენიუს. disabled მოქმედება არ სრულდება.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
Menubar	Base UI Menubar props	—	ჰორიზონტალური ნავიგაცია; orientation, loopFocus, disabled, modal, aria-label.
MenubarMenu: open / defaultOpen / onOpenChange	boolean / (open, details) => void	—	კონტროლირებადი ან საწყისი გახსნა; callback კლიენტის კომპონენტში.
MenubarTrigger	Base UI Trigger props	—	გამხსნელი; render, ref და className მხარდაჭერილია. disabled ბლოკავს გახსნას.
MenubarContent: side / align / sideOffset	Positioner props	—	პოზიცია: bottom / start / 4.
MenubarContent: container	HTMLElement \| RefObject	—	პორტალის კონტეინერი; ნაგულისხმევად document.body.
MenubarContent	Base UI Popup props	—	className, render, ref, finalFocus და children გადაეცემა popup-ს.
MenubarGroup / MenubarLabel	Group / GroupLabel props	—	დასათაურებული ჯგუფი; Label იღებს inset?: boolean-ს.
MenubarItem: variant / inset	"default" \| "destructive" / boolean	—	ჩვეულებრივი ან გამაუქმებელი მოქმედება; inset ტოვებს ადგილს ინდიკატორისთვის.
MenubarItem	Base UI Item props	—	onClick, disabled, closeOnClick, render, ref და className.
MenubarCheckboxItem	Base UI CheckboxItem props	—	checked / defaultChecked / onCheckedChange, disabled, closeOnClick; ჩაშენებული მონიშვნის ინდიკატორი.
MenubarRadioGroup / MenubarRadioItem	Base UI RadioGroup / RadioItem props	—	value / defaultValue / onValueChange ჯგუფზე; value, disabled, closeOnClick ელემენტზე.
MenubarSeparator	Base UI Separator props	—	გამყოფი ხაზი.
MenubarShortcut	span props	—	კლავიშების ტექსტი; თვითონ მალსახმობს არ არეგისტრირებს.
MenubarSub	Base UI SubmenuRoot props	—	ქვემენიუს open / defaultOpen / onOpenChange / closeParentOnEsc.
MenubarSubTrigger	Base UI SubmenuTrigger props & { inset?: boolean }	—	ქვემენიუს გამხსნელი, disabled და მარჯვენა ისარი.
MenubarSubContent	MenubarContentProps	—	ქვემენიუს პოზიცია: right / start / 4.