CommandBar Steuerung (Vorschau)

Ein Steuerelement zur Eingabe von Befehlen.

Notiz

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

CommandBar-Steuerelement.

Beschreibung

CommandBar ist eine Fläche, die Befehle beherbergt, die auf den Inhalt des Fensters, des Bedienfelds oder des übergeordneten Bereichs angewendet werden, über dem sie sich befindet.

Diese Codekomponente stellt einen Wrapper um das Fluent-Benutzeroberfläche CommandBar-Steuerelement zur Verwendung in Canvas-Apps und benutzerdefinierten Seiten bereit.

Eigenschaften

Schlüsseleigenschaften

Eigenschaft Beschreibung
Items Die zu rendernden Aktionselemente

Elementestruktur

Jedes Element verwendet das folgende Schema, um Daten in der Komponente zu visualisieren.

Name Beschreibung
ItemDisplayName Der Anzeigename des Befehlsleiste-Elements.
ItemKey Die zu verwendende Taste, um anzuzeigen, welches Element ausgewählt ist, und wenn Unterelemente hinzugefügt werden. Die Tasten müssen eindeutig sein.
ItemEnabled Auf „falsch“ setzen, wenn die Option deaktiviert ist.
ItemVisible Auf „false“ setzen, wenn die Option nicht sichtbar ist.
ItemChecked Auf „true“ setzen, wenn die Option aktiviert ist (z. B. geteilte Schaltflächen in einer Befehlsleiste).
ItemSplit Auf „true“ setzen, wenn die Option angeklickt und als Dropdown-Flyout-Menü verwendet werden kann.
ItemIconName Das zu verwendende Fluent UI-Symbol (siehe Fluent-Benutzeroberflächensymbole)
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.
ItemOverflow Für das Überlaufverhalten auf „true“ setzen
ItemOverflow Rendern Sie die Option in den Überlaufelementen.
ItemFarItem Rendern Sie die Option in der Gruppe der fernen Elemente einer Befehlsleiste.
ItemHeader Stellen Sie das Element als Abschnittsüberschrift dar. 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 dies auf false gesetzt ist, werden andere Werte erwartet und es wird leer dargestellt.

Beispiel

Beispiel für eine Power Fx-Formel für Basis-Items:

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit"
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete"
    },{
        ItemKey: "refresh",
        ItemDisplayName: "Refresh",
        ItemIconName: "refresh"
    },{
        ItemKey: "help",
        ItemDisplayName: "Help",
        ItemIconName: "help"
    }
)

Stileigenschaften

Eigenschaft 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. Siehe Theming für Hinweise zur Konfiguration.
AccessibilityLabel aria-label für Screenreader

Ereigniseigenschaften

Eigenschaft Beschreibung
InputEvent Ein Ereignis, das an das Steuerelement gesendet werden soll. z. B. SetFocus.

Verhalten

Unterstützt SetFocus als InputEvent.

Verhalten bei Auswahl 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 'new' (e.g., Patch function) */
    "new", false,
    
    /* Action for 'edit' (e.g., Patch function) */
    "edit", false,
    
    /* Action for 'delete' (e.g., Remove function ) */
    "delete", false,
    
    /* Action for 'refresh' (e.g., Refresh function) */
    "refresh", false,
    
    /* Action for 'help' (e.g., email support with the Office 365 connector ) */
    "help", false,
  
    /* Default action */
        false
  )

Den Fokus auf das Steuerelement setzen

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.

Power Fx-Beispielformel:

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

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

Einschränkungen

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

Weitere Hinweise auf Einschränkungen finden Sie in den Herausforderungen beim Komponentendesign.

  • Last updated on