Shimmer Kontrolle

Ein Steuerelement, das verwendet wird, um eine Ladeerfahrung anzuzeigen.

Notiz

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

Beschreibung

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

Schlüsseleigenschaften

Eigenschaften	Beschreibung
Items	Die zu rendernden Aktionselemente
Rows	Die zu rendernden Aktionselemente
SpacebetweenShimmer	Abstand oder Lücke zwischen jedem Shimmer bei mehreren Reihen.

Elementeigenschaften

Jeder Datensatz der nachfolgenden Tabelle kann folgende Werte enthalten.

Eigenschaften	Beschreibung
ItemKey	Erforderlich. Der zu verwendende Schlüssel, um ein bestimmtes ShimmerElement anzugeben. Die Tasten müssen eindeutig sein.
ItemType	Erforderlich. Der Shimmer-Elementtyp aus der Liste mit drei Shimmer-Elementen, d. h. Kreis, Lücke und Linie.
ItemRowKey	Erforderlich. Der zu verwendende Schlüssel, um den RowKey anzugeben und eine Beziehung herzustellen.
ItemHeight	ShimmerElement-Höhe
ItemWidth	ShimmerElement-Breite
ItemVerticalAlign	Zur Angabe, wie das Element ausgerichtet werden soll, d. h. „Oben“, „Zentriert“ oder „Unten“.

Power Fx-Beispielformel:

Table({ItemKey:"1",ItemWidth:"3.8",ItemHeight:60,ItemRowKey:"1",ItemType:"circle"},{ItemKey:"2",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"3",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"4",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"5",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"6",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"7",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"8",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"9",ItemWidth:"3.8",ItemHeight:40,ItemRowKey:"1",ItemType:"line"},{ItemKey:"10",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"11",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"12",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"13",ItemWidth:"2.8",ItemHeight:30,ItemRowKey:"1",ItemType:"line"},{ItemKey:"14",ItemWidth:"2",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"},{ItemKey:"15",ItemWidth:"20",ItemHeight:10,ItemRowKey:"1",ItemType:"line"},{ItemKey:"16",ItemWidth:"1",ItemHeight:10,ItemRowKey:"1",ItemType:"gap"})

Zeilen (rows_Items)-Eigenschaftswert

Jeder Datensatz der nachfolgenden Tabelle kann folgende Werte enthalten.

Eigenschaften	Beschreibung
RowKey	Erforderlich. Der zur Angabe des bestimmten Shimmer und beim Hinzufügen von Unterelementen zu verwendende Schlüssel. Die Tasten müssen eindeutig sein.
RowOrder	Die Reihenfolge, in der der Shimmer gerendert werden soll
RowCount	Anzahl der zu rendernden Shimmer
RowWidth	Shimmer-Breite

Power Fx-Beispielformel:

Table(
    {
        RowKey: "1",
        RowOrder:1,
        RowCount:5,
        RowWidth: 100
    }
)

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. Siehe Designs für eine Konfigurationsanleitung.
AccessibilityLabel	Aria-Beschriftung für Sprachausgabe

Beispieldesign

Die Design-JSON-Zeichenfolge wird an die Komponenteneigenschaft übertragen, während das varTheme verwendet werden kann, um andere Standardkomponenten wie Schaltflächen mithilfe individueller Farben zu gestalten.

Weitere Informationen über die beim Arbeiten mit Shimmer zu verwendende Farbpalette finden Sie im IShimmerColors Interface-Abschnitt in der IShimmerElement-Dokumentation.

Einschränkungen

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