Überlauf-Menü

Überlauf-Menü in Storybook

Verwendung

Überblick

Das Überlaufmenü zeigt an, dass in einem UI-Objekt mehr Inhalt verfügbar ist, als auf einmal angezeigt werden kann. Zusätzliche Listen, Optionen und Funktionen können in einem erweiterbaren Menü verborgen werden, um die Hauptoberfläche nicht zu überladen.

Aufbau

• A. Überlaufmenü in einer Tabelle.
• B. Überlauf-Menü in einer oberen Navigationsleiste.

Das Überlaufmenü ist durch ein Ellipsen-Symbol gekennzeichnet. Es wird am (rechten) Ende einer Reihe von Navigationstiteln oder in einer Inhaltszeile angezeigt.

A. Überlauf-Menü (Tabelle):

1. Ellipsen-Symbol: Das Tabellenüberlaufmenü wird durch ein Ellipsen-Symbol angezeigt, das immer auf der rechten Seite einer Tabellenzeile erscheint.
2. Dropdown-Menü: Das Überlaufmenü besteht aus einer Liste zusätzlicher Interaktionen, z. B. Tools/Aktionen, z. B. Löschen, Bearbeiten, Duplizieren (Zeile duplizieren).
3. Schatten des Dropdown-Menüs: Ein Schatten wird als Teil des Überlaufmenüs verwendet, um es deutlich vom Hintergrund zu unterscheiden.
4. Tool-/Aktionssymbole: Den Listeneinträgen des Überlaufmenüs kann eine Ikonographie hinzugefügt werden, die einen schnellen und klaren Hinweis auf die zugehörige Funktionalität gibt.
5. Toolbeschriftungen: Die Listenelemente des Überlaufmenüs sind entsprechend den Richtlinien für Jutro-Dropdown-Menüs beschriftet.

B. Überlauf-Modul (Obere Navigation):

1. Ellipsen-Symbol: Das Überlaufmenü in der oberen Navigationsleiste wird durch ein Ellipsen-Symbol angezeigt, das immer auf der rechten Seite einer Tabellenzeile erscheint.
2. Dropdown-Menü: Das Überlaufmenü besteht aus einer Liste zusätzlicher Links in einer oberen Navigationsleiste.
3. Schatten des Dropdown-Menüs: Ein Schatten wird als Teil des Überlaufmenüs verwendet, um es deutlich vom Hintergrund zu unterscheiden.

Best Practices

• Positionieren Sie das Symbol für das Überlaufmenü (Ellipse) immer am Ende eines Objekts (wenn Start/Ende links/rechts ist, befindet es sich auf der rechten Seite), um zusätzliche Inhalte/Funktionalität anzuzeigen.
• Verwenden Sie Überlaufmenüs zur Realisierung von sauberen Benutzeroberflächen, indem Sie die sekundären Optionen in einem erweiterbaren Menü ausblenden oder alternativ die wichtigen Aktionen im Hinblick auf das Engagement anzeigen.
• Achten Sie darauf, dass Sie nur die Aktionen aufnehmen, die für die Erledigung vorrangiger Aufgaben erforderlich und kontextbezogen relevant sind, und führen Sie diese in der Reihenfolge ihrer Häufigkeit auf.
• Verwenden Sie Überlaufmenüs, um zusätzliche Menüpunkte oder Aktionen aufzunehmen, die schrittweise/progressiv zur Benutzeroberfläche hinzugefügt werden.
• Verwenden Sie keine kaskadierenden Menüs.
• Deaktivieren Sie Optionen, die in einem bestimmten Kontext nicht relevant sind.

Interaktionen

Maus

• Ein Ellipsen-Symbol im Überlaufmenü wird hervorgehoben, wenn man den Mauszeiger darüber bewegt, um Interaktivität anzuzeigen.
• Ein Überlaufmenü-Symbol (Ellipse) kann unsichtbar sein, bis ein zugehöriges Objekt mit dem Mauszeiger bewegt oder angeklickt wird, z. B. eine Tabellenzeile. Dies trägt dazu bei, die Aufmerksamkeit auf die Einbeziehung des Überlaufmenü-Objekts und die Funktionalität zu lenken.
• Wenn Sie auf das Ellipsen-Symbol des Überlaufmenüs klicken, wird ein Dropdown-Menü mit dem Inhalt angezeigt. Wenn Sie auf eine beliebige Stelle außerhalb des Menüs klicken, wird das Menü ausgeblendet.
• Menüpunkte im Überlaufmenü werden mit einem blauen Hintergrund hervorgehoben, wenn Sie mit dem Mauszeiger darüber fahren. Über einen einzigen Mausklick wird die Aktion oder der Link aus dem Menü ausgelöst.

Tastatur

Die Komponente kann über die Leertaste und die Eingabetaste bedient werden.

Screenreader

Die Komponente des Überlaufmenüs ist Teil des Navigationsmenüs und hat als solche die Rolle „menuitem“. Die WAI-ARIA-Rolle von aria-expanded="false' zeigt an, dass der Standardzustand des Menüs eingeklappt ist und zusätzliche Inhalte enthält. Dieser Wert wechselt zu true, wenn das Überlaufmenü erweitert wird.

Überlegungen zum UX-Schreiben

• Der Text in einem Überlaufmenü sollte direkt und prägnant sein, damit sich der Benutzer schnell für eine Aktion entscheiden kann.
• Bei Aktionen, die eine erhebliche Änderung der Benutzerdaten bewirken könnten, sollte eine horizontale Trennlinie verwendet werden, um diese Aktion abzutrennen und sie unterhalb des primären Aktionssatzes aufzuführen.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Code

<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>

Importanweisung

import {
  DropdownMenuHeader,
  DropdownMenu,
  DropdownMenuSeparator,
} from '@jutro/components';
import { DropdownMenuLink } 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

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

alignRight

Typ

boolean

Beschreibung

If set to true, the items are aligned to the right edge of the menu.

autoFocus

Typ

boolean

Beschreibung

If set to true, the first menu item gets focused after opening the dropdown menu.

Standardwert

true

className

Typ

string

Beschreibung

CSS class name for this component.

dropUp

Typ

boolean

Beschreibung

If set to true, the menu appears above the trigger component.

focused

Typ

boolean

Beschreibung

If set to true, the root element is considered the currently active element.

isOpen

Typ

boolean

Beschreibung

If set to true, the menu is currently visible.

keepContext

Typ

boolean

Beschreibung

If set to true, sets the title of the selected value to be the same as the selected item text.

menuClassName

Typ

string

Beschreibung

Override the class for the inner menu of the dropdown menu.

onMenuClose

Typ

() => void

Beschreibung

Callback that's supposed to be triggered when menu gets closed.

onMenuOpen

Typ

() => void

Beschreibung

Callback that's supposed to be triggered when menu gets opened.

openMenuId

Typ

string

Beschreibung

Id of the component instance that's supposed be to currently opened. Mostly useful when rendering multiple instances next to each other.

popperOptions

Typ

{isOpen, triggerElement, children, placement, popperOptions, onClose, noPortal, portalTargetElement}

childrenerforderlich

Typ

React.ReactNode

Beschreibung

Node to be rendered inside the expanded menu.

isOpenerforderlich

Typ

boolean

Beschreibung

Controls whether the container is hidden.

noPortal

Typ

boolean

Beschreibung

If true, Popper will not be rendered inside React Portal.

onClose

Typ

() => void

Beschreibung

Optional callback that is triggered when container is closed.

placement

Typ

'auto' | 'auto-end' | 'auto-start' | 'bottom' | 'bottom-end' | 'bottom-start' | left' | left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start'

Beschreibung

Override the menu position.

popperOptions

Typ

Options

Beschreibung

Additional options passed as third argument to usePopper hook.

portalTargetElement

Typ

HTMLElement

Beschreibung

React Portal target element, preferably one of the top-level DOM elements. Must be unique, defaults to body element.

triggerElement

Typ

Element

Beschreibung

Reference element to position the menu.

Beschreibung

Extra popper configuration to overwrite popper defaults.

renderTrigger

Typ

(props, togglemenu) => ReactElement

Function return value

Typ

ReactElement

Beschreibung

The function must return a React Element that represents the trigger element for the menu, for example a Button as used in the examples. The trigger element must take at least three arguments: an object of props for the component; an onClick callback function; and a Boolean variable to control the state of visibility, like isVisible.

props

Typ

DropdownMenuTriggerProps & CustomProp

'aria-expanded'

Typ

boolean

Beschreibung

Indicator for use by assistive technology to communicate whether the DropDownMenu is expanded or collapsed.

'aria-haspopup'

Typ

boolean

Beschreibung

The availability and type of interactive popup element for use by assistive technology.

'aria-label'

Typ

string

Beschreibung

A label for use by assistive technology.

id

Typ

string

Beschreibung

Unique identifier for the component.

isOpen

Typ

boolean

Beschreibung

Is true when the menu is open, false when the menu is closed.

menuId

Typ

string

Beschreibung

The id of the DropdownMenu component the renderTrigger is associated with.

onKeyDown

Typ

function (React.KeyboardEvent<HTMLInputElement>)

Beschreibung

Callback invoked to take when a user presses any key.

ref

Typ

MutableRefObject<HTMLButtonElement>

Beschreibung

A reference to the element that is clicked on to open and close the DropDownMenu component.

title

Typ

string

Beschreibung

A label for the render trigger.

Beschreibung

Props to pass to the render trigger element. The CustomProps type depends on what other components might be wrapping DropdownMenu. The DropdownMenuTriggerProps are defined in the 'Show object details' section.

toggleMenu

Typ

(open?: boolean) => void

Beschreibung

Function that runs when menu is opened or closed. The function has an optional argument named open that is a boolean which is true if the menu is being opened.

Beschreibung

Function to render a trigger element.

triggerAriaLabel

Typ

IntlMessageShape

Beschreibung

Aria label for the trigger button.

Untergeordnete Eigenschaften des Dropdown-Menüs

DropdownMenu Komponenten verwenden DropdownMenuHeader, DropdownMenuLink und DropdownMenuSeparator als untergeordnete Komponenten. Die Eigenschaften für diese Komponenten lauten wie folgt:

DropdownMenuHeader-Eigenschaften

children

Typ

React.ReactNode

Beschreibung

The component children, wrapped by the dropdown menu header component.

id

Typ

string

Beschreibung

Unique identifier for the component.

title

Typ

React.ReactNode | IntlMessageShape

Beschreibung

The element node representing the header title, in most cases it will be a plain string.

DropdownMenuLink-Eigenschaften

activeClassName

Typ

string

Beschreibung

The class to give the link when it is active.

children

Typ

string

Beschreibung

The children elements to render inside of the DropdownMenuLink.

className

Typ

string

Beschreibung

CSS class name for this component.

disabled

Typ

boolean

Beschreibung

If set to true, this link is disabled.

focused

Typ

string

Beschreibung

If set to true, the link is considered as the currently active one.

href

Typ

IntlMessageShape

Beschreibung

Used to specify an external link.

icon

Typ

string | Icon

Beschreibung

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconClassName

Typ

string

Beschreibung

Additional class names for the icon.

iconPosition

Typ

'left' | 'right'

Beschreibung

Where the icon is placed relative to the text.

id

Typ

string

Beschreibung

Unique identifier for the component.

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

rel

Typ

string

Beschreibung

Specifies the relationship between the current and an external document, like the HTML rel attribute.

target

Typ

string

Beschreibung

Specifies where to open the external link, like the HTML target attribute.

to

Typ

IntlMessageShape | {pathname?, hash?}

hash

Typ

IntlMessageShape

Beschreibung

Hash to put in the URL.

pathname

Typ

IntlMessageShape

Beschreibung

Link path.

Beschreibung

Used to specify an internal link.

visible

Typ

boolean

Beschreibung

If set to true, this link is visible.

DropdownMenuSeparator-Eigenschaften

className

Typ

string

Beschreibung

CSS class name for this component.

id

Typ

string

Beschreibung

Unique identifier for the component.

Hooks

Für DropdownMenu sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für DropdownMenu.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

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

Beispiele

Überlaufmenüs werden mit der Komponente DropdownMenu gerendert. Die Eigenschaft renderTrigger bestimmt die Komponente, die als 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 zu den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für ein einfaches Überlaufmenü

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>

Änderungsprotokoll