Share via

Controlul Shimmer

  • Articol

Un control folosit pentru a afișa o experiență de încărcare.

Notă

Documentația completă și codul sursă se găsesc în depozitul de componente de cod GitHub.

Control strălucitor.

Descriere

Această componentă de cod oferă un înveliș în jurul controlului Fluent UI Shimmer legat de un buton pentru utilizare în pagini de pânză și personalizate.

Proprietăți cheie

Proprietate Descriere
Items Elementele de acțiune pentru redare
Rows Elementele de acțiune pentru redare
SpacebetweenShimmer Spațiu sau decalaj între fiecare Shimmer în cazul mai multor rânduri.

Proprietățile articolelor

Fiecare înregistrare din conținutul tabelului de mai jos poate avea următoarele valori.

Proprietate Descriere
ItemKey Necesar Cheia de utilizat pentru a indica un ShimmerElement specific. Cheile trebuie să fie unice.
ItemType Necesar Tipul elementului Shimmer din lista celor trei elemente strălucitoare, adică cerc, spațiu și linie.
ItemRowKey Necesar Cheia de utilizat pentru a indica RowKey și pentru a stabili relația.
ItemHeight Înălțimea ShimmerElement
ItemWidth Lățimea ShimmerElement
ItemVerticalAlign Pentru a specifica modul în care trebuie să se alinieze elementul. adică „sus”, „centru” sau „jos”.

Exemplu de formulă 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"})

Rânduri (rows_Items) Valoarea proprietății

Fiecare înregistrare din conținutul tabelului de mai jos poate avea următoarele valori.

Proprietate Descriere
RowKey Necesar Cheia de utilizat pentru a indica ce element Shimmer specific este selectat și pentru adăugarea elementelor secundare. Cheile trebuie să fie unice.
RowOrder Ordinea în care ar trebui să se redea elementele Shimmer
RowCount Numărul de elemente Shimmer de redat
RowWidth Lățimea Shimmer

Exemplu de formulă Power Fx:

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

Proprietăți de stil

Proprietate Descriere
Theme Acceptă un șir JSON care este generat utilizând Fluent UI Theme Designer (windows.net). Dacă este lăsat necompletat, se va folosi tema implicită definită de Power Apps. Consultați temele pentru îndrumări privind configurarea.
AccessibilityLabel Aria-label pentru cititor de ecran

Exemplu de temă

Șirul de teme JSON este transmis proprietății componentei, în timp ce varTheme poate fi folosit pentru a stila alte componente standard, cum ar fi butoanele, folosind culorile individuale.

Pentru mai multe informații despre paleta de culori care trebuie utilizată în timpul lucrului cu Shimmer, consultați IShimmerColors Interface secțiunea documentație IShimmerElement.

Limitări

Această componentă de cod poate fi utilizată numai în aplicații planșă de lucru și pagini personalizate.