Zum Hauptinhalt springen

Dropdown-Menüschaltfläche

Dropdown-Menüschaltfläche in Storybook

Beispiele​

Die Komponente DropdownMenuButton rendert eine Schaltfläche. Wenn der Benutzer auf die Schaltfläche klickt, wird ein Baum eines der folgenden Elemente gerendert:

  • DropdownMenuLink
  • DropdownMenuSeparator
  • DropdownMenuHeader

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

Einfaches Beispiel​

Im folgenden Beispiel wird veranschaulicht, wie eine einfache DropdownMenuButton-Komponente erstellt wird.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Beispiel für Kopfzeilen und Trennzeichen​

Mit Kopfzeilen und Trennzeichen können Sie Gruppen von Optionen trennen.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink>Separated menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuHeader title="Header text">
    <DropdownMenuLink>First header menu item</DropdownMenuLink>
    <DropdownMenuLink>Second header menu item</DropdownMenuLink>
  </DropdownMenuHeader>
</DropdownMenuButton>

Beispiel für ein Dropup​

Sie können die Eigenschaft dropUp verwenden, um das Menü über der Schaltfläche darzustellen, wenn Sie darauf klicken.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button"
  dropUp={true}>
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>