Breadcrumb Kontrolle

Ein Steuerelement, das zur Bereitstellung der Navigation verwendet wird.

Notiz

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

Beschreibung des Dataflows

Breadcrumb Steuerelemente sollten als Navigationshilfe in Ihrer App oder Site verwendet werden. Sie geben die Position der aktuellen Seite innerhalb einer Hierarchie an und helfen dem Benutzer zu verstehen, wo sie sich im Verhältnis zum Rest dieser Hierarchie befinden. Ein Breadcrumb bietet auch einen Ein-Klick-Zugriff auf höhere Ebenen dieser Hierarchie.

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

Eigenschaften

Schlüsseleigenschaften

Eigenschaften	Beschreibung des Dataflows
SelectedKey	Dies bezeichnet die ausgewählte Taste. Dies wird über das OnChange-Ereignis aktualisiert, wenn der Benutzer mit dem Steuerelement interagiert.
Items	Die zu rendernden Aktionselemente

Items Eigenschaften

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

Name des Dataflows	Beschreibung des Dataflows
ItemDisplayName	Der Anzeigename des Breadcrumb-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.
ItemClickable	Setzen Sie es auf „false“, falls das spezifische Breadcrumb-Element nicht anklickbar ist.

Power Fx-Beispielformel:

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

Stileigenschaften

Name des Dataflows	Beschreibung des Dataflows
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 Designs für eine Konfigurationsanleitung.
AccessibilityLabel	Aria-Beschriftung für Sprachausgabe
MaxDisplayedItems	Die maximale Anzahl der Breadcrumbs, die vor dem Zusammenfügen angezeigt werden sollen. Bei Null werden alle Breadcrumbs gerendert.
OverflowIndex	Optionaler Index, in dem Überlaufelemente reduziert werden. Standardmäßig ist dies auf Null gesetzt.

Ereigniseigenschaften

Name des Dataflows	Beschreibung des Dataflows
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.

Da dieses Steuerelement zur Navigation verwendet wird, ist eine logische Aktion die Verwendung von Navigationsfunktionen (idealerweise zu einem relevanten Bildschirm mit den zugehörigen geladenen Daten).

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", 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.

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.