Freigeben über

ContextMenu-Steuerelement

Ein Steuerelement zur Eingabe von Befehlen.

Notiz

Sie finden die vollständige Dokumentation und den Quellcode im GitHub-Codekomponenten-Repository.

ContextMenu-Steuerelement.

Beschreibung

Ein Kontextmenü (ContextMenu) ist eine Liste von Befehlen, die auf dem Kontext der Auswahl, des Mauszeigers oder des Tastaturfokus basieren. Sie sind eine der effektivsten und am häufigsten verwendeten Befehlsoberflächen und können an verschiedenen Orten verwendet werden.

Diese Codekomponente stellt einen Wrapper um das Fluent-Benutzeroberfläche ContextualMenu-Steuerelement bereit, das zur Verwendung in Canvas-Apps und benutzerdefinierten Seiten an eine Schaltfläche gebunden ist.

Eigenschaften

Schlüsseleigenschaften

Eigenschaften Beschreibung
Items Die zu rendernden Aktionselemente. Das erste Element wird als Stammelement betrachtet.

Items-Eigenschaften

Name des Dataflows Beschreibung
ItemDisplayName Der Anzeigename des Menüelements.
ItemKey Die zu verwendende Taste, um anzuzeigen, welches Element ausgewählt ist, und wenn Unterelemente hinzugefügt werden. Die Taste muss eindeutig sein.
ItemEnabled Auf „falsch“ setzen, wenn die Option deaktiviert ist.
ItemVisible Auf „false“ setzen, wenn die Option nicht sichtbar ist.
ItemChecked Auf „true“ festlegen, wenn die Option aktiviert ist.
ItemIconName Das zu verwendende Fluent-UI-Symbol (siehe Fluent-UI-Symbole)
ItemIconColor Die Farbe, in der das Symbol gerendert werden soll (z. B. benannt, RGB- oder Hex-Wert).
ItemIconOnly Die Textbezeichnung nicht anzeigen – nur das Symbol.
ItemHeader Rendern Sie das Element als Abschnittsheader. Wenn es Elemente gibt, für die ItemParentKey auf den Schlüssel dieses Elements festgelegt ist, dann werden sie als semantisch gruppierte Elemente unter diesem Abschnitt hinzugefügt.
ItemTopDivider Rendern Sie eine Trennlinie am oberen Rand des Abschnitts.
ItemDivider Das Element als Abschnittstrennlinie rendern – oder, wenn das Element eine Kopfzeile ist (ItemHeader = true), steuert dann, ob am Ende des Abschnitts eine Trennlinie gerendert werden soll.
ItemParentKey Rendern Sie die Option als untergeordnetes Element einer anderen Option.

Notiz

  • ItemIconColor überschreibt den Themenwert der Komponente und ignoriert andere Zustandsfarben (z. B. deaktiviert).
  • ItemHeader und ItemDivider müssen auf true gesetzt werden, um als Teiler gerendert zu werden. Wenn sie auf false gesetzt sind, erwartet es andere Werte und wird leer gerendert.
  • Das Hinzufügen der ItemChecked Eigenschaft und des Verhaltens von Untermenüelementen verhindert, dass das Untermenü beim Klicken geschlossen wird.

Beispiel

Power Fx-Beispielformel für Items:

  Table(
      {
          ItemKey: "File",
          ItemIconName: "save",
          ItemDisplayName: "Save",
          ItemOverflow:true
      },
       {
          ItemKey: "Delete",
          ItemIconName: "Delete",
          ItemDisplayName: "Delete",
          ItemOverflow:true
      }
  )

Stileigenschaften

Eigenschaften Beschreibung
Theme Akzeptiert eine JSON-Zeichenfolge, die mithilfe des Fluent-UI-Themen-Designers (windows.net) generiert wird. Wenn Sie dieses Feld leer lassen, wird das in Power Apps definierte Standarddesign verwendet. Wenn Sie dieses Feld leer lassen, wird das in Power Apps definierte Standarddesign verwendet. Siehe Designs für eine Konfigurationsanleitung.
Chevron Ein- oder Ausblenden des Chevrons nach unten auf der Stammschaltfläche
IconColor Optional. Farbe des Symbols auf der Kontextmenütaste.
HoverIconColor Optional. Farbe des Symbols beim Bewegen des Mauszeigers über die Kontextmenütaste.
IconSize Optional. Die Größe des Symbols auf der Kontextmenütaste in Pixel.
FontSize Optional. Die Größe des Textes auf der Kontextmenütaste in Pixel.
FontColor Optional. Die Farbe des Textes auf der Kontextmenütaste.
HoverFontColor Optional. Die Farbe des Textes beim Bewegen des Mauszeigers über die Kontextmenütaste.
FillColor Optional. Die Hintergrundfarbe der Kontextmenütaste.
HoverFillColor Optional. Die Hintergrundfarbe beim Bewegen des Mauszeigers über die Kontextmenütaste.
TextAlignment Die Ausrichtung des Schaltflächentextes. Mögliche Werte: „Center“, „Left“ oder „Right“
AccessibilityLabel Aria-Beschriftung für Sprachausgabe

Ereigniseigenschaften

Eigenschaften Beschreibung
InputEvent Ein Ereignis, das an das Steuerelement gesendet werden soll. z. B. SetFocus. Siehe unten.

Behavior

Unterstützt SetFocus als InputEvent.

Das „Bei Auswahl“-Verhalten konfigurieren

Verwenden Sie die Switch()-Formel in der OnSelect-Eigenschaft der Komponente, um bestimmte Aktionen für jedes Element zu konfigurieren, indem auf die den für das Steuerelement ausgewählten ItemKey als Switch-Wert verwiesen wird.

Ersetzen Sie false-Werte mit entsprechenden Ausdrücken in der Power Fx-Sprache.

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", false,
  
    /* Default action */
        false
  )

Festlegen des Fokus auf das Steuerelement

Wenn ein neues Dialogfeld angezeigt wird, und der Standardfokus auf dem Steuerelement liegen sollte, ist ein expliziter festgelegter Fokus erforderlich.

Um das Eingabeereignis aufzurufen, können Sie eine Kontextvariable, die an die Eigenschaft „Eingabeereignis“ gebunden ist, auf eine Zeichenfolge festlegen, die mit SetFocus beginnt, gefolgt von einem zufälligen Element. So kann sichergestellt werden, dass die App dies als Änderung erkennt.

z. B.

UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));

Die Kontextvariable ctxResizableTextareaEvent würde dann an die Input Event-Eigenschaft gebunden werden.

Einschränkungen

Diese Codekomponente kann nur in Canvas-Apps und benutzerdefinierten Seiten verwendet werden.

  • Last updated on