Context Menu ​

Das Context Menu bietet Nutzern kontextbezogene Aktionen, die abhängig vom gewählten Element oder der aktuellen Position im Interface angezeigt werden können.

Overview ​

Intro ​

Das Context Menu ermöglicht dem Nutzer den Zugriff auf kontextbezogene Funktionen, die sich je nach gewähltem Element oder Position im Interface unterscheiden. Es wird typischerweise durch einen Rechtsklick geöffnet und zeigt ein Menü mit relevanten Aktionen an.

Intro

Verwendung ​

👍 Do👎 Don't
... wenn kontextbezogene Aktionen zu angeboten werden sollen, die sich je nach ausgewähltem Element unterscheiden (z.B. "Speichern", "Kopieren" oder "Bearbeiten" bei Bildern).
... wenn Aktionen, die selten gebraucht werden, dennoch schnell verfügbar sein müssen.
... wenn mehrere Elemente gleichzeitig markiert werden und gemeinsame Aktionen angeboten werden.		… wenn Hauptfunktionen nicht sichtbar sind und ausschließlich über ein Kontextmenü erreichbar wären.
... wenn 15+ Einträge im Context Menu verwendet werden sollen. Wenn zu viele Optionen vorhanden sind, fasse diese zusammen oder nutze Untermenüs.
… wenn wichtige sicherheitsrelevante Aktionen (z. B. „Alle Daten löschen“) versteckt wären, statt mit zusätzlicher Bestätigung im Haupt‑UI angezeigt zu werden.

Guidelines ​

Aufbau ​

Das Context Menu wird derzeit nur in Tabellen eingesetzt. Es kann jedoch auch auf andere native HTML‑Elemente, wie Absätze ( <p> ), angewendet werden. Die angezeigten Aktionen passen sich dynamisch an den jeweiligen Kontext an und ermöglichen eine effiziente, platzsparende Interaktion.

Verwendung in Tabellen

Varianten ​

Context Menu Items stehen in verschiedenen Varianten zur Verfügung, um unterschiedliche Anwendungsfälle abzudecken. Varianten unterscheiden sich in Funktion oder Interaktionsverhalten. Die Auswahl der passenden Variante hängt vom Kontext ab.

Default Item

Führt beim Anklicken eine Aktion aus und hat keine Auswahlzustände oder Untermenüs.
Check Item

Ein Menüeintrag mit einem Kontrollhäkchen, das den Zustand einer Option anzeigt (aktiviert/deaktiviert). Kann durch Anklicken umgeschaltet werden.
Submenu Item

Öffnet durch Anklicken ein weiteres, untergeordnetes Kontextmenü, um zusätzliche, thematisch verwandte Aktionen oder Optionen anzubieten.

States ​

Ein Context Menu Item hat verschiedene Zustände.

Enabled State
Hover State
Active State
Selected State
Disabled State

Barrierefreiheit ​

Tastaturbedienung ​

Über die Tastenkombination Shift + F10 lässt sich das Context Menu bei Auswahl eines geeigneten HTML-Elements öffnen. Über die Pfeiltasten lässt sich zwischen den einzelnen Menüeinträgen wechseln.

Spezifische Hinweise ​

Gesperrte Context Menu Items sollten standardmäßig nicht über die Tastatur fokussierbar sein. Erst wenn der Nutzer entsprechende Einstellungen vornimmt, sollten auch diese in den Fokussierungs-Kreislauf aufgenommen werden.

Develop Vue ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:

...

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter:

...

Changelog ​

v1.0 ​

  • Veröffentlichung der Komponente

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-context-menu-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.contextmenu.ContextMenu;
import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.contextmenu.SubMenu;
import com.vaadin.flow.component.html.Paragraph;

Variants ​

Default ​

Attach a context menu to any component. Right-clicking the target opens the menu.

java
Paragraph target = new Paragraph("Rechtsklick zum Öffnen des Kontextmenüs");

ContextMenu menu = new ContextMenu();
menu.setTarget(target);
menu.addItem("Bearbeiten");
menu.addItem("Kopieren");
menu.addItem("Löschen");

With Sub Menu ​

java
ContextMenu menu = new ContextMenu();
menu.setTarget(target);
menu.addItem("Erstellen");

SubMenu exportMenu = menu.addItem("Exportieren").getSubMenu();
exportMenu.addItem("Als PDF");
exportMenu.addItem("Als Excel");

menu.addItem("Löschen");

With Disabled Item ​

java
ContextMenu menu = new ContextMenu();
menu.setTarget(target);
menu.addItem("Bearbeiten");
menu.addItem("Löschen").setEnabled(false);

With Separator ​

java
import com.vaadin.flow.component.html.Hr;

ContextMenu menu = new ContextMenu();
menu.setTarget(target);
menu.addItem("Bearbeiten");
menu.addItem(new Hr());
menu.addItem("Löschen");