Compartilhar via

Shimmer controlar

  • Artigo

Um controle usado para exibir uma experiência de carregamento.

Nota

Documentação completa e código-fonte encontrados no repositório de componentes de código GitHub.

Controle Shimmer

Description

Este componente de código fornece um wrapper em torno do controle Fluent UI Shimmer vinculado a um botão para uso em telas e páginas personalizadas.

Principais propriedades

Propriedade Description
Items Os itens de ação a serem renderizados
Rows Os itens de ação a serem renderizados
SpacebetweenShimmer Espaço ou Lacuna entre cada Shimmer, no caso de várias linhas.

Propriedades do item

Cada registro na tabela abaixo pode ter os seguintes valores.

Propriedade Description
ItemKey Obrigatória. A chave a ser usada para indicar o ShimmerElement específico. As chaves devem ser exclusivas.
ItemType Obrigatória. O tipo de elemento Shimmer da lista de três elementos shimmer, ou seja, círculo, lacuna e linha.
ItemRowKey Obrigatória. A chave a ser usada para indicar a RowKey e estabelecer o relacionamento.
ItemHeight Altura do ShimmerElement
ItemWidth Largura do ShimmerElement
ItemVerticalAlign Para especificar como o elemento deve se alinhar. ou seja, superior, centro ou inferior.

Fórmula Power Fx do exemplo:

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

Linhas (rows_Items) Valor da propriedade

Cada registro na tabela abaixo pode ter os seguintes valores.

Propriedade Description
RowKey Obrigatória. A chave a ser usada para indicar o Shimmer específico e quando adicionar subitens. As chaves devem ser exclusivas.
RowOrder A ordem na qual o Shimmer deve renderizar
RowCount Número de Shimmers para renderizar
RowWidth Largura do Shimmer

Fórmula Power Fx do exemplo:

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

Propriedades de estilo

Propriedade Description
Theme Aceita uma string JSON que é gerada usando Fluent UI Theme Designer (windows.net). Deixar em branco usará o tema padrão definido pelo Power Apps. Consulte os temas para obter orientação sobre como configurar.
AccessibilityLabel Rótulo Aria do leitor de tela

Exemplo de tema

A string Tema JSON é transmitida para a propriedade do componente, enquanto o varTheme pode ser usado para estilizar outros componentes padrão, como botões, usando as cores individuais.

Para obter mais informações sobre a paleta de cores a ser usada ao trabalhar com o Shimmer, consulte a seção IShimmerColors Interface da documentação do IShimmerElement.

Limitações

Esse componente de código só pode ser usado em aplicativos de tela e páginas personalizadas.