BurgerMenu

BurgerMenu in Storybook

Note: Diese Komponente darf nur im Rahmen der UX-Muster für Seitenlayouts und nicht isoliert oder in benutzerdefinierten Szenarios verwendet werden.

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

Verwendung

Überblick

Das Burger-Menü ist eine Layoutkomponente mit einem reduzierbaren Seitencontainer, die üblicherweise für die Navigation auf kleineren Bildschirmen verwendet wird. Sie wird durch eine Schaltfläche ausgelöst und umfasst einen Bereich für andere Komponenten.

Als Teil des flexiblen Seitenlayoutsystems von Jutro wird über diese Komponente ausschließlich das Layout und Verhalten des Menübereichs (d. h. das Öffnen und Schließen) gesteuert. Die Komponente ist inhaltsunabhängig, d. h., Sie müssen sie mit Menüelementen und Links füllen und alle zugehörigen Routen implementieren.

Zu verwenden

Verwenden Sie das Burger-Menü für Folgendes:

• Bereitstellen einer kompakten Navigationslösung für responsive Designs, insbesondere für Ansichtsfenster auf Tablets und Mobiltelefonen.
• Für sekundäre Aktionen oder Links, die nicht dauerhaft auf der Seite sichtbar sein müssen.
• Erstellen einer benutzerdefinierten Seitenstruktur mithilfe der neuen Seitenlayoutkomponenten, die ein umschaltbares Seitenmenü erfordern.

Formatierung

Aufbau

Die BurgerMenu-Komponente besteht aus den folgenden Elementen:

1. Auslöserschaltfläche: Symbolschaltfläche, mit der die Sichtbarkeit des Menübereichs umgeschaltet wird. Das Erscheinungsbild wird über die Komponente verwaltet.
2. Menübereich: Container, der beim Öffnen des Menüs angezeigt wird. Sie können beliebige untergeordnete Komponenten wie Navigationslisten, Suchfelder oder Aktionsschaltflächen in diesem Bereich platzieren.

Platzierung

Das Burger-Menü kann in einem Kopfzeilenbereich oder auf der obersten Ebene eines benutzerdefinierten Seitenlayouts platziert werden.

Verhalten

• Interaktion: Durch Auswählen der Auslöserschaltfläche wird der Menübereich geöffnet. Der Bereich kann durch Auswählen der standardmäßigen Schließen-Schaltfläche, durch Klicken auf den Bereich außerhalb des Menüs oder durch Verwenden einer benutzerdefinierten Schaltfläche geschlossen werden.
• Status: Die Sichtbarkeit der Komponente wird programmgesteuert mit den Eigenschaften open und onOpenChange festgelegt.

Best Practices

Leicht und einfach halten

Das Burger-Menü dient als Container für andere Komponenten. Um ein gutes Nutzungserlebnis zu ermöglichen, sollten Sie ihn mit einfachen und fokussierten Inhalten füllen. Vermeiden Sie es, den Bereich mit zu vielen Elementen oder tief verschachtelten Strukturen zu überladen.

Klaren Ausstieg ermöglichen

Benutzer müssen immer eine offensichtliche Möglichkeit zum Schließen des Menüs haben. Die Komponente enthält standardmäßig eine Schließen-Schaltfläche. Wenn Sie die Eigenschaft hideCloseButton verwenden, müssen Sie ein benutzerdefiniertes Element bereitstellen, über das Benutzer den Bereich schließen können.

Prägnante Beschriftungen verwenden

Wenn Sie Navigationslinks oder andere interaktive Elemente in das Burger-Menü einfügen, müssen die Beschriftungen kurz, klar und vorhersehbar sein. Verwenden Sie Substantive für Links zu Zielen (z. B. „Dashboard“, „Einstellungen“) und Verben für Aktionen (z. B. „Benutzer hinzufügen“, „Daten exportieren“).

Verwandte Komponenten

• HeaderPanel
• SidePanel
• SubheaderPanel
• ToolsSidePanel
• FooterPanel

Code

Demonstration eines einfachen Beispiels in Storybook .

function BurgerMenuBasic() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
    <BurgerMenu
      open={open}
      onOpenChange={onOpenChange}>
      <h3>Menu</h3>
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu>
  );
}

Importanweisung

import { BurgerMenu } from '@jutro/components';

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

childrenerforderlich

Typ

React.ReactNode

Beschreibung

The children elements to render inside the component.

hideCloseButton

Typ

boolean

Beschreibung

If set to true, the Close button is not rendered.

onOpenChange

Typ

(open: boolean) => void

Beschreibung

Callback to run when the burger menu is opened or closed.

open

Typ

boolean

Beschreibung

If set to true, the burger menu is currently open.

Hooks

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

Übersetzungsschlüssel

Die BurgerMenu-Komponente definiert zwei Übersetzungsschlüssel:

Schlüssel	Verwendet für
jutro-components.BurgerMenu.openButtonLabel	Beschreibt das Aussehen und die Funktion der Öffnen-Schaltfläche.
jutro-components.BurgerMenu.closeButtonLabel	Beschreibt das Aussehen und die Funktion der Schließen-Schaltfläche.

Escape Hatches

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

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Burger-Menüs und zu den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für ein einfaches Burger-Menü

Ein einfaches Burger-Menü ist ein Wrapper, der eine Reihe von untergeordneten Elementen umschließt. Damit wird ein reduzierbares Menü an der Seite des Fensters gerendert, auf das ein Benutzer durch Klicken zugreifen kann. Sie müssen außerdem den open-Zustand und den setOpen-Hook aus dem React-Zustand verwenden, um den aktuellen Zustand des Menüs abzurufen und zu ändern, wenn die Schaltfläche zum Öffnen ausgewählt wird.

Demonstration eines einfachen Beispiels in Storybook .

function BurgerMenuBasic() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
    <BurgerMenu
      open={open}
      onOpenChange={onOpenChange}>
      <h3>Menu</h3>
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu>
  );
}

Beispiel für benutzerdefinierte Schaltfläche

Sie können eine benutzerdefinierte Schaltfläche hinzufügen, um das Burger-Menü als eines der untergeordneten Elemente zu reduzieren.

Demonstration einer benutzerdefinierten Schaltfläche in Storybook.

function BurgerMenuCustomButton() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

return ( 
  <BurgerMenu 
    hideCloseButton
    open={open}
    onOpenChange={onOpenChange}> 
    <Button 
      label="Click the button to close the navigation" 
      hideLabel 
      icon={KeyboardArrowLeftIcon} 
      variant="secondary" 
      onClick={() => onOpenChange(!open)} 
      /> 
      <h3>Menu</h3> 
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu> ); }

Änderungsprotokoll

10.10.0

BurgerMenu-Komponente hinzugefügt.