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.
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.