ContextMenu

Das ContextMenu öffnet ein Popover mit einer Liste von Aktionen oder Links, welches in der Regel über einen Button geöffnet wird.GitHub

Playground

Verwende <ContextMenu />, um ein ContextMenu darzustellen. Innerhalb von <ContextMenuTrigger /> muss ein <Button /> und ein <ContextMenu /> kombiniert werden, um ein ContextMenu per Button-Klick zu öffnen. Die einzelnen Aktionen werden über <MenuItem /> definiert.

import {
  Button,
  ContextMenu,
  ContextMenuTrigger,
  MenuItem,
} from "@mittwald/flow-react-components";

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    onAction={(id) => {
      alert(id);
    }}
  >
    <MenuItem id="1">Item 1</MenuItem>
    <MenuItem id="2">Item 2</MenuItem>
    <MenuItem id="3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>

Einfach-Auswahl

Durch selectionMode="single" verhalten sich die Menüeinträge des ContextMenu wie eine RadioGroup, sodass nur ein Element ausgewählt werden kann.

Mehrfach-Auswahl

Durch selectionMode="multiple" verhalten sich die Menüeinträge des ContextMenu wie Checkboxen, sodass mehrere Optionen ausgewählt werden können.

Mit Switch

Ein Switch im ContextMenu ermöglicht es, Aktionen direkt zu aktivieren oder deaktivieren.

Mit Icon

Verwende Icons innerhalb vom <MenuItem />, um Aktionen schneller verständlich zu machen oder bekannte Funktionen klarer zu vermitteln.

Mit Separator

Ein Separator gruppiert logisch zusammengehörige Aktionen.

Mit ContextMenuSections

Eine ContextMenuSectionSection sorgt im ContextMenu für klare Struktur, indem sie eine Heading und definierte Abstände verwendet.

Mit fester Breite

Lege eine Breite für dein ContextMenu fest, um beispielsweise zu verhindern, dass das ContextMenu zu breit wird oder die Breite des ContextMenus beim Nachladen von Daten springt.

Mit Selection Mode

Mit Avatar

Verwende das ContextMenu als Profilmenü, indem innerhalb ein Avatar und eine Heading platziert werden.

States

Ein MenuItem kann unterschiedliche States annehmen, die anzeigen, dass aktuell keine Interaktion möglich ist.

Disabled: Verwende den Disabled-State, wenn das MenuItem keine Aktion oder kein Ereignis auslösen soll.

Pending, Succeeded und Failed: Pending, Succeeded und Failed sollen dem Nutzer signalisieren, dass im Hintergrund etwas passiert, wenn er auf ein MenuItem geklickt hat. Verwende das MenuItem zusammen mit der Komponente Action, um die States zu steuern.

Kombiniere mit

Aktionen im ContextMenu können Modals als Overlay öffnen, wenn zusätzliche Informationen erfasst, bestätigt oder bearbeitet werden müssen.

Components