Share via

Contrôle Shimmer

  • Article

Un contrôle utilisé pour afficher une expérience de chargement.

Note

La documentation complète et le code source sont accessibles dans le Référentiel de composants de code GitHub.

Contrôle Shimmer

Description

Ce composant de code fournit un wrapper autour du contrôle Shimmer de Fluent UI lié à un bouton à utiliser dans les applications canevas et les pages personnalisées.

Propriétés principales

Property Description
Items Les éléments d’action à afficher
Rows Les éléments d’action à afficher
SpacebetweenShimmer Espace ou écart entre chaque Shimmer en cas de lignes multiples.

Propriété Items

Chaque enregistrement du tableau ci-dessous peut avoir les valeurs suivantes.

Property Description
ItemKey Obligatoire. La clé à utiliser pour indiquer un ShimmerElement spécifique. Les clés doivent être uniques.
ItemType Obligatoire. Le type d’élément Shimmer dans la liste des trois éléments Shimmer, c’est-à-dire cercle, espace et ligne.
ItemRowKey Obligatoire. La clé à utiliser pour indiquer la RowKey et établir la relation.
ItemHeight Hauteur de ShimmerElement
ItemWidth Largeur de ShimmerElement
ItemVerticalAlign Pour spécifier comment l’alignement de l’élément. P.ex. « En haut », « Centre », « En bas »

Exemple de formule Power Fx :

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"})

Valeur de la propriété Rows (rows_Items)

Chaque enregistrement du tableau ci-dessous peut avoir les valeurs suivantes.

Property Description
RowKey Obligatoire. Clé à utiliser pour indiquer un élément Shimmer spécifique et lors de l’ajout de sous-éléments. Les clés doivent être uniques.
RowOrder L’ordre d’affichage du Shimmer
RowCount Nombre de Shimmer à afficher
RowWidth Largeur du Shimmer

Exemple de formule Power Fx :

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

Propriétés de style

Property Description
Theme Accepte une chaîne JSON générée à l’aide du Concepteur de thème Fluent UI (windows.net). Si vous laissez ce champ vide, le thème par défaut défini par Power Apps sera utilisé. Consultez Création de thèmes pour obtenir des instructions de configuration.
AccessibilityLabel Étiquette aria pour les lecteurs d’écran

Exemple de thème

La chaîne JSON de thème est transmise à la propriété du composant, tandis que varTheme peut être utilisé pour styliser d’autres composants standard tels que des boutons, en utilisant les couleurs individuelles.

Pour plus d’informations sur la palette de couleurs à utiliser lors de l’utilisation de Shimmer, reportez-vous à la section IShimmerColors Interface de la documentation IShimmerElement.

Limitations

Ce composant de code ne peut être utilisé que dans les applications canevas et les pages personnalisées.