Zum Hauptinhalt springen

Überlauf-Menü

Überlauf-Menü in Storybook

Beispiele​

Überlaufmenüs werden mit der Komponente DropdownMenu gerendert. Die Eigenschaft renderTrigger bestimmt die Komponente, als die DropdownMenu gerendert wird.

Wenn der Benutzer die Komponente aktiviert, wird eine Struktur aus einem der folgenden Elemente gerendert:

  • DropdownMenuLink
  • DropdownMenuSeparator
  • DropdownMenuHeader

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

Einfaches Beispiel​

Im folgenden Beispiel wird veranschaulicht, wie eine einfache DropdownMenu-Komponente erstellt wird. Die Eigenschaft renderTrigger definiert eine Schaltfläche, mit der das Menü geöffnet wird, wenn darauf geklickt wird.

<DropdownMenu
  id="dropdown-menu"
  renderTrigger={(
    {
      id,
      menuId,
      ref,
      'aria-haspopup': ariaHasPopup,
      'aria-expanded': ariaExpanded,
      title = 'Menu',
      onKeyDown,
    },
    toggleMenu
  ) => {
    return (
      <Button
        id={id}
        ref={ref}
        aria-expanded={ariaExpanded}
        aria-controls={menuId}
        aria-haspopup={ariaHasPopup}
        onClick={() => toggleMenu()}
        onKeyDown={onKeyDown}
        label={title}
      />
    );
  }}>
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenu>

Beispiel für Kopfzeilen und Trennzeichen​

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

<DropdownMenu
  id="dropdown-menu"
  renderTrigger={(
    {
      id,
      menuId,
      ref,
      'aria-haspopup': ariaHasPopup,
      'aria-expanded': ariaExpanded,
      title = 'Menu',
      onKeyDown,
    },
    toggleMenu
  ) => {
    return (
      <Button
        id={id}
        ref={ref}
        aria-expanded={ariaExpanded}
        aria-controls={menuId}
        aria-haspopup={ariaHasPopup}
        onClick={() => toggleMenu()}
        onKeyDown={onKeyDown}
        label={title}
      />
    );
  }}>
  <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>
</DropdownMenu>

Beispiel für ein Dropup​

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

<DropdownMenu
  id="dropdown-menu"
  dropUp={true}
  renderTrigger={(
    {
      id,
      menuId,
      ref,
      'aria-haspopup': ariaHasPopup,
      'aria-expanded': ariaExpanded,
      title = 'Menu',
      onKeyDown,
    },
    toggleMenu
  ) => {
    return (
      <Button
        id={id}
        ref={ref}
        aria-expanded={ariaExpanded}
        aria-controls={menuId}
        aria-haspopup={ariaHasPopup}
        onClick={() => toggleMenu()}
        onKeyDown={onKeyDown}
        label={title}
      />
    );
  }}>
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenu>