Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Contextmenu

Übersicht

Was macht die Komponente?

  • Bietet kontextspezifische Aktionen an, entweder dynamisch per Maus-Rechtsklick auf ein Element oder statisch über ein Icon.

Wann soll die Komponente eingesetzt werden?

  • Wenn auf einem Objekt je nach Zustand oder Rolle den Benutzer*innen Aktionen zur effizienten Ausführung angeboten werden sollen.

Regeln

  • Ein Contextmenu kann über die rechte Maustaste oder ein Icon angeboten werden.
  • Das Contextmenu kann Icons enthalten, muss aber nicht.
  • Auf einer Ebene des Contextmenu gibt es entweder bei allen Menuitems ein Icon oder bei keinem.
  • Menuitems können gruppiert werden. Gruppen werden durch einen Strich getrennt.
  • Ein Contextmenu kann zur Sortierung von Elementen genutzt werden. In diesem Fall wird mittels Pfeil gezeigt, nach welchem Attribut in welche Richtung sortiert ist.
  • Es ist erlaubt, auch tiefere Ebenenstrukturen anzubieten. Es sollte aber darauf geachtet werden, dass je mehr Verschachtelung, desto ineffizienter die Bedienung.
 Zustände und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover

Varianten

Standard

Diese Variante hat zusätzlich folgende Zustände:

  • Expanded (optional)
Darstellung des Kontextmenüs

Icon

Diese Variante hat zusätzlich folgende Zustände:

  • Expanded Hover Underneath
  • Expanded Hover Above
Darstellung des Kontextmenüs mit Icon
  • Als Icon werden standardmässig die drei Punkte verwendet.

Sorting

Diese Variante hat zusätzlich folgende Zustände:

  • Expanded Hover
  • Expanded Active
Darstellung des Kontextmenüs zur Sortierung von Inhalten
  • Zur Anzeige der Sortierung wird das Pfeil-Icon verwendet.
  • Per Default wird absteigend (ascending) sortiert.
  • Beim Hover auf aktiv sortiertes Attribut wird das Pfeil-Icon gedreht.
  • Der ganze Menueintrag (Name und Icon) ist klickbar.

Spezifikationen

DesignCode
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies