Menubar - Pharen

Mit Menubar kannst du eine Aktion oder Navigation aufzubauen. Diese Seite dokumentiert alle Vue-Komponenten, die das Modul öffentlich exportiert.

Code anzeigen

<script setup lang="ts">
import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from '@pharen/ui';
</script>

<template>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>New workflow<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
        <MenubarItem>Duplicate<MenubarShortcut>⇧⌘D</MenubarShortcut></MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Archive</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu><MenubarTrigger>Edit</MenubarTrigger><MenubarContent><MenubarItem>Undo</MenubarItem><MenubarItem>Redo</MenubarItem></MenubarContent></MenubarMenu>
  </Menubar>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Importiere @pharen/ui/styles.css genau einmal im Einstiegspunkt deiner Anwendung.

Verwendung

import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from '@pharen/ui';

Exporte

Export	Aufgabe
`Menubar`	Exportierte Vue-Komponente dieses Moduls.
`MenubarCheckboxItem`	Stellt ein einzelnes Element dar.
`MenubarContent`	Enthält den sichtbaren Inhalt.
`MenubarGroup`	Gruppiert zusammengehörige Elemente.
`MenubarItem`	Stellt ein einzelnes Element dar.
`MenubarLabel`	Beschriftet einen Wert oder Bereich.
`MenubarMenu`	Exportierte Vue-Komponente dieses Moduls.
`MenubarPortal`	Exportierte Vue-Komponente dieses Moduls.
`MenubarRadioGroup`	Gruppiert zusammengehörige Elemente.
`MenubarRadioItem`	Stellt ein einzelnes Element dar.
`MenubarSeparator`	Trennt benachbarte Bereiche.
`MenubarShortcut`	Exportierte Vue-Komponente dieses Moduls.
`MenubarSub`	Exportierte Vue-Komponente dieses Moduls.
`MenubarSubContent`	Enthält den sichtbaren Inhalt.
`MenubarSubTrigger`	Öffnet oder aktiviert die Komponente.
`MenubarTrigger`	Öffnet oder aktiviert die Komponente.

Quellcode

Quellcode auf GitHub öffnen