Zum Hauptinhalt springen

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.

Beispiele​

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

Einfaches Beispiel​

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} 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>
  );
}