Burger-Menü

Burger-Menü in Storybook

Note: Diese Komponente darf nur im Rahmen der Header UX-Muster und nicht isoliert oder in eigenen Szenarien verwendet werden.

Informationen zur BurgerMenu-Komponente für UX-Muster für Seitenlayouts finden Sie auf dieser Seite.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer burger menu-Komponente und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Burger-Menü

Ein einfaches Burger-Menü ist eine Schaltfläche in einer Kopfzeile, mit der ein Menü geöffnet werden kann. Das Menü wird über die Eigenschaft burgerContent definiert, die ein Array von Knoten enthalten kann. Spezifische Komponenten für Burger-Elemente wie BurgerMenuItem und BurgerMenuLink können im burgerContent-Array verwendet werden.

Demonstration eines einfachen Beispiels in Storybook.

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem key="item" id="item" isContainerOnly>Menu Item</BurgerMenuItem>,
      <BurgerMenuLink key="link" id="link">Menu Link</BurgerMenuLink>,
    ]}
   />
</Header>

Verwendung

Überblick

Die BurgerMenu-Komponente ersetzt die standardmäßige globale Kopfzeile und die Navigation auf Smartphones und Tablets oder bei Bedarf durch Änderung der Konfiguration.

Aufbau

Die Komponente Burger-Menü besteht aus den folgenden Elementen:

1. Burger-Menü-Schaltflächensymbol: Wird zum Öffnen der Produktnavigation verwendet.
2. Container für Burger-Menü: Organisation von Navigationselementen und anderen Inhalten, die für das direkte Ziel des Benutzers nicht relevant sind, z. B. Einstellungen und Hilfe.
3. Schaltflächensymbol „Schließen“: Schließt das Burger-Menü.
4. Sucheingabefeld: Ermöglicht Benutzern, eine Suche durchzuführen.
5. Anwendungsnavigation: Menü- und Navigationselemente, die Benutzer auswählen können.
6. App-Schnellzugriff: ermöglicht es Benutzern, zwischen den Anwendungen zu wechseln.
7. Benutzer-Avatar: Enthält den vollständigen Namen des Benutzers und Avatar-Links.
8. Globale Kopfzeile: Enthält das Glockensymbol für Benachrichtigungen.

Best Practices

• Anstelle der Desktop-Navigation sollte auf Smartphones und Tablets das Burger-Menü angezeigt werden.
• Verwenden Sie das Burger-Menü für Navigationselemente, die nicht dem eigentlichen Zweck der Anwendung dienen. So lässt sich die Aufmerksamkeit des Benutzers auf wesentliche Aufgaben lenken.

Reaktionsfähigkeit/Anpassungsfähigkeit

Das Burger-Menü hat eine fest vorgegebene Breite.

Interaktionen

1. Ein Klick auf das Burger-Menü-Symbol löst ein einklappbares Navigationspanel aus. Benutzer können das Burger-Menü durch Anklicken des Schaltflächensymbols X schließen.
2. Benutzer können durch Klicken auf die Links für die einzelnen Menüelemente durch die Anwendung navigieren.
3. Benutzer können zwischen Anwendungen wechseln. Dazu klicken sie auf den App-Schnellzugriff, über den ein Dropdown-Menü mit einer Liste der verfügbaren Anwendungen geöffnet wird.
4. Benutzer können Benachrichtigungen anzeigen, indem sie auf das Glockensymbol für Benachrichtigungen klicken.

Überlegungen zum UX-Schreiben

• Beschriftungen für Menüs und Menüelemente müssen genau und informativ sein.
• Geben Sie Beschriftungen an, die prägnant sind und den Zweck der Auswahl klar verdeutlichen.
• Die meisten Links sollten Substantive sein. Zum Beispiel die Seite Benutzerprofil.
• Jedes Menüelement sollte in einer einzelnen Textzeile angezeigt werden.
• Verwenden Sie hauptsächlich die übliche Groß- und Kleinschreibung, auch bei Überschriften und Titeln, Menünamen sowie Menüelementen und Navigationselementen. Dies unterstützt einen freundlichen und dialogorientierten Stil und ist für Nicht-US- Märkte und -Produkte leichter zu übersetzen. Ausnahmen sind Wörter wie Eigennamen und Titel vor Namen.

Code

Demonstration eines einfachen Beispiels in Storybook.

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem key="item" id="item" isContainerOnly>Menu Item</BurgerMenuItem>,
      <BurgerMenuLink key="link" id="link">Menu Link</BurgerMenuLink>,
    ]}
   />
</Header>

Importanweisung

import { BurgerMenu, BurgerMenuItem, BurgerMenuLink } from '@jutro/router';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

Eigenschaften für Burger-Menü

burgerContent

Typ

node[]

Beschreibung

Elements to render in the sidebar.

buttonClassName

Typ

string

Beschreibung

An optional CSS class for the burger menu button.

className

Typ

string

Beschreibung

CSS class name for this component.

closeOnItemClick

Typ

bool

Beschreibung

If set to true, clicking items on the burger menu which does not change browser location will cause the menu to close. This can be overwritten per item by setting a closeOnClick property on it. Note that if an item changes browser location, the menu will always be closed.

separatorClassName

Typ

string

Beschreibung

An optional CSS class for the burger sidebar separator.

Eigenschaften für Burger-Menüelemente

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

className

Typ

string

Beschreibung

CSS class name for this component.

closeOnClick

Typ

boolean

Beschreibung

If set to true, clicking this item will close the burger menu. Note that if an item changes browser location, the menu will always be closed.

hideSeparator

Typ

boolean

Beschreibung

If set to true, it will not render a separator.

isContainerOnly

Typ

boolean

Beschreibung

If set to true, the item will be rendered without 'interactive item' styling. This does not affect any attached event handlers.

separatorClassName

Typ

string

Beschreibung

The CSS class name for the menu item separator.

separatorClassName

Typ

React.ElementType

Beschreibung

The HTML tag which will be used to render item.

Standardwert

div

Eigenschaften für Burger-Menüverknüpfungen

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

children

Typ

React.ReactNode

Beschreibung

The content of the item.

hideSeparator

Typ

boolean

Beschreibung

If set to true, it will not render a separator.

seperatorClassName

Typ

string

Beschreibung

An optional CSS class for the burger sidebar item separator.

Hooks

Für burger menu sind keine Hooks verfügbar.

Übersetzungsschlüssel

Der BurgerMenu-Komponente sind drei Übersetzungsschlüssel zugeordnet:

Schlüssel	Verwendet für
jutro-router.BurgerMenu.Open Menu	aria-label-Wert für die Schaltfläche zum Öffnen des Menüs
jutro-router.BurgerMenu.Menu header title	aria-label-Wert für den Kopfzeilentitel
jutro-router.BurgerMenu.Close navigation	aria-label-Wert für die Schaltfläche zum Schließen der Navigation

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape-Hatches.

Änderungsprotokoll