Comparteix a través de

Spinner control

  • Article

Control utilitzat per crear una experiència de càrrega.

Nota

Trobareu la documentació completa i el codi font al dipòsit de components de codi de GitHub.

Control de spinner.

Descripció

Un Spinner és un contorn d'un cerque que s'anima per indicar a l'usuari que s'estan processant coses. Apareix quan el procés no sap el temps que durà una tasca, cosa que la convertirà en la versió indeterminada d'un control ProgressIndicator.

Els Spinners varien de mida i es poden trobar en línia amb el contingut o centrats. Els Spinners normalment apareixen després de processar o confirmar una acció. Són subtils i normalment no tenen ocupen gaire espai, però són transicions de la tasca completada.

Aquest component de codi proporciona un embolcall al voltant del control Fluent UI Spinner per utilitzar-lo en llenç i pàgines personalitzades. Vegeu la documentació del component per veure pràctiques recomanades.

Propietats de la clau

Propietat Descripció
Label Etiqueta opcional per a spinner.
SpinnerSize Mida de l'Spinner que es representarà. Opcions: xSmall, Small, Medium, Large
SpinnerAlignment Alineació de l'spinner dins dels límits del control. Opcions: Left, Center, Right
LabelPosition Col·locació opcional de l'etiqueta de l'Spinner en una posició concreta. Opcions: Bottom, Top, Left, Right

Propietats d'estil

Propietat Descripció
Theme Accepta una cadena JSON generada mitjançant el Fluent UI Theme Designer (windows.net). Deixant aquest camp en blanc s'utilitzarà el tema per defecte definit per Power Apps. Per obtenir ajuda sobre com s'ha de configurar, vegeu temes.
AccessibilityLabel Etiqueta aria de lector de pantalla

Exemple

Mostra l'spinner en carregar-lo

Feu que el control Spinner sigui visible quan s'inicia un procés i, a continuació, amagueu-lo quan el procés s'hagi completat.

Utilitzeu una variable per controlar la visibilitat de l'spinner i actualitzeu els valors abans i després del bloc de codi del procés.

UpdateContext({ var_showLoader: true });

/* Some code ... */

UpdateContext({ var_showLoader: false });

A continuació, proporcioneu la variable var_showLoader com a valor per a la propietat IsLoading de l'spinner.

Limitacions

Aquest codi del llenç només es pot utilitzar a les aplicacions del llenç i a les pàgines personalitzades.