Compartir a través de


Shimmer control

Un control utilizado para mostrar una experiencia de carga.

Nota

La documentación completa y el código fuente se encuentran en el repositorio de componentes de código GitHub.

Control Shimmer

Description

Este componente de código proporciona un envoltorio alrededor del control Shimmer de Fluent UI vinculado a un botón para su uso en lienzos y páginas personalizadas.

Propiedades importantes

Property Description
Items Los elementos de acción para renderizar
Rows Los elementos de acción para renderizar
SpacebetweenShimmer Espacio o intervalo entre cada Shimmer si hay varias filas.

Propiedades de elementos

Cada registro en la siguiente tabla contiene puede tener los siguientes valores.

Property Descripción
ItemKey Obligatorio. La clave a usar para indicar ShimmerElement específico. Las teclas deben ser únicas.
ItemType Obligatorio. El tipo de elemento Shimmer de la lista de tres elementos shimmer, es decir, círculo, espacio y línea.
ItemRowKey Obligatorio. La clave a usar para indicar RowKey y establecer la relación.
ItemHeight Altura de ShimmerElement
ItemWidth Anchura de ShimmerElement
ItemVerticalAlign Para especificar cómo debe alinearse el elemento. es decir, "superior", "centro" o "inferior"

Fórmula Power Fx de ejemplo:

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

Valor de la propiedad Rows (rows_Items)

Cada registro en la siguiente tabla contiene puede tener los siguientes valores.

Property Descripción
RowKey Obligatorio. La tecla que se debe utilizar para indicar el Shimmer específico y cuándo agregar subelementos. Las teclas deben ser únicas.
RowOrder El orden en el que debe renderizarse el Shimmer
RowCount Número de Shimmers a renderizar
RowWidth Ancho de brillo

Fórmula Power Fx de ejemplo:

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

Propiedades de estilo

Property Descripción
Theme Acepta una cadena JSON que se genera usando Diseñador de temas de Fluent UI (windows.net). Si deja esto en blanco, usará el tema predeterminado definido por Power Apps. Para obtener ayuda sobre cómo configurarlo vea Tematización.
AccessibilityLabel aria-label para lectores de pantalla

Tema de ejemplo

La cadena Theme JSON se pasa a la propiedad del componente, mientras que varTheme se puede usar para diseñar otros componentes estándar, como botones, usando los colores individuales.

Para obtener más información sobre la paleta de colores que se utilizará al trabajar con Shimmer, consulte la sección IShimmerColors Interface de IShimmerElement documentación.

Limitaciones

Este componente de código solo se puede usar en aplicaciones de lienzo y páginas personalizadas.