Partilhar via

Shimmer Controlo

  • Artigo

Um controlo utilizado para apresentar uma experiência de carregamento.

Nota

A documentação completa e o código de origem encontram-se no repositório de componentes de código do GitHub.

Timer Shimmer.

Description

Este componente de código fornece um wrapper em torno do controlo Fluent UI Shimmer associado a um botão para utilização em telas e páginas personalizadas.

Propriedades chave

Property Description
Items Os itens de ação a compor
Rows Os itens de ação a compor
SpacebetweenShimmer Espaço ou Intervalo entre cada Shimmer no caso de várias linhas.

Propriedades de itens

Cada Registo que a Tabela abaixo contém, pode ter os seguintes valores.

Property Description
ItemKey Obrigatório. A chave a utilizar para indicar o ShimmerElement específico. As chaves têm de ser exclusivas.
ItemType Obrigatório. O tipo de elemento Shimmer a partir da lista de três elementos de shimmer, ou seja, círculo, intervalo ou linha.
ItemRowKey Obrigatório. A chave a utilizar para indicar a RowKey e estabelecer a relação.
ItemHeight Altura de ShimmerElement
ItemWidth Largura de ShimmerElement
ItemVerticalAlign Para especificar como o elemento deve alinhar. ou seja, "superior", "centro" ou "inferior".

Fórmula do Power Fx de 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"})

Valor da propriedade Rows (rows_Items)

Cada Registo que a Tabela abaixo contém, pode ter os seguintes valores.

Property Description
RowKey Obrigatório. A chave a utilizar para indicar o Shimmer específico e quando adicionar subitens. As chaves têm de ser exclusivas.
RowOrder A ordem pela qual o Shimmer deve ser composto
RowCount Número de Shimmers a compor
RowWidth Largura do Shimmer

Fórmula do Power Fx de exemplo:

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

Propriedades de Estilo

Property Description
Theme Aceita uma cadeia JSON que é gerada através do Estruturador de Teams da Fluent UI (windows.net). Deixar isto em branco irá utilizar o tema predefinido estabelecido pelo Power Apps. Consulte personalizar o tema para obter orientações sobre como configurar.
AccessibilityLabel Etiqueta aria de leitor de ecrã

Tema de Exemplo

A cadeia JSON de Tema é transmitida para a propriedade de componentes, enquanto varTheme pode ser utilizado para dar estilo a outros componentes padrão, como botões que utilizam cores individuais.

Para mais informações sobre a palete de cores a utilizar ao trabalhar com o Shimmer, consulte a secção IShimmerColors Interface da documentação IShimmerElement.

Limitações

Este componente de código só pode ser utilizado em aplicações de tela e páginas personalizadas.