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.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    selectionMode="single"
    defaultSelectedKeys={["item2"]}
  >
    <MenuItem id="item1">Item 1</MenuItem>
    <MenuItem id="item2">Item 2</MenuItem>
    <MenuItem id="item3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>

Mehrfach-Auswahl

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

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    selectionMode="multiple"
    defaultSelectedKeys={["item2", "item3"]}
  >
    <MenuItem id="item1">Item 1</MenuItem>
    <MenuItem id="item2">Item 2</MenuItem>
    <MenuItem id="item3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>

Mit Switch

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

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu selectionMode="switch">
    <MenuItem id="item1">Item 1</MenuItem>
    <MenuItem id="item2">Item 2</MenuItem>
    <MenuItem id="item3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>

Mit Icon

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

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

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

Mit Separator

Ein Separator gruppiert logisch zusammengehörige Aktionen.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <MenuItem id="1">Item 1</MenuItem>
    <Separator />
    <MenuItem id="2">Item 2</MenuItem>
    <MenuItem id="3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>

Mit ContextMenuSections

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

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <ContextMenuSection>
      <Heading>Section 1</Heading>
      <MenuItem id="1">Item 1</MenuItem>
      <MenuItem id="2">Item 2</MenuItem>
      <MenuItem id="3">Item 3</MenuItem>
    </ContextMenuSection>
    <Separator />
    <ContextMenuSection>
      <Heading>Section 2</Heading>
      <MenuItem id="4">Item 4</MenuItem>
      <MenuItem id="5">Item 5</MenuItem>
    </ContextMenuSection>
  </ContextMenu>
</ContextMenuTrigger>

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.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    width={300}
    onAction={(id) => {
      alert(id);
    }}
  >
    <MenuItem id="1">Mein Projekt</MenuItem>
    <MenuItem id="2">Mein zweites Projekt</MenuItem>
    <MenuItem id="3">
      Mein drittes Projekt mit einem sehr langen Namen
    </MenuItem>
  </ContextMenu>
</ContextMenuTrigger>

Mit Selection Mode

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <ContextMenuSection selectionMode="multiple">
      <MenuItem id="item1">Item 1</MenuItem>
      <MenuItem id="item2">Item 2</MenuItem>
      <MenuItem id="item3">Item 3</MenuItem>
    </ContextMenuSection>
    <Separator />
    <ContextMenuSection selectionMode="single">
      <MenuItem id="item1">Item 4</MenuItem>
      <MenuItem id="item2">Item 5</MenuItem>
      <MenuItem id="item3">Item 6</MenuItem>
    </ContextMenuSection>
  </ContextMenu>
</ContextMenuTrigger>

Mit Avatar

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

import {
  Avatar,
  Button,
  ContextMenu,
  ContextMenuTrigger,
  Heading,
  IconCamera,
  Initials,
  MenuItem,
  Section,
  Separator,
  Text,
} from "@mittwald/flow-react-components";

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu selectionMode="navigation">
    <Section>
      <MenuItem>
        <Avatar>
          <Initials>Max Mustermann</Initials>
        </Avatar>
        <IconCamera />
      </MenuItem>
      <Heading>Max Mustermann</Heading>
    </Section>
    <Separator />
    <Section>
      <MenuItem>
        <Text>Settings</Text>
      </MenuItem>
      <MenuItem>
        <Text>Logout</Text>
      </MenuItem>
    </Section>
  </ContextMenu>
</ContextMenuTrigger>

Kombiniere mit

Modal

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

import {
  ActionGroup,
  Button,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Heading,
  IconContextMenu,
  IconEdit,
  Label,
  MenuItem,
  Modal,
  TextField,
  useOverlayController,
  Text,
  Action,
} from "@mittwald/flow-react-components";

export default () => {
  const modalController = useOverlayController("Modal");

  return (
    <>
      <ContextMenuTrigger>
        <Button variant="plain" color="secondary">
          <IconContextMenu />
        </Button>
        <ContextMenu>
          <MenuItem
            onAction={() => {
              modalController.open();
            }}
          >
            <IconEdit />
            <Text>Bearbeiten</Text>
          </MenuItem>
        </ContextMenu>
      </ContextMenuTrigger>
      <Modal controller={modalController}>
        <Heading>Bearbeiten</Heading>
        <Content>
          <TextField>
            <Label>Name</Label>
          </TextField>
        </Content>
        <ActionGroup>
          <Action closeOverlay="Modal">
            <Button color="accent">Speichern</Button>
            <Button color="secondary" variant="soft">
              Abbrechen
            </Button>
          </Action>
        </ActionGroup>
      </Modal>
    </>
  );
}

Components