Compartilhar via

Breadcrumb controlar

  • Artigo

Um controle usado para fornecer navegação.

Nota

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

Controle Breadcrumb.

Description

Breadcrumb Os controles devem ser usados como um auxílio à navegação em seu aplicativo ou site. Eles indicam a localização da página atual em uma hierarquia e ajudam o usuário a entender onde ele está em relação ao restante dessa hierarquia. Uma trilha também fornece acesso com um clique a níveis mais altos dessa hierarquia.

Este componente de código fornece um wrapper em torno do controle Breadcrumb da Interface do Usuário do Fluent para uso em aplicativos de telas e páginas personalizadas.

Propriedades

Principais propriedades

Propriedade Description
SelectedKey Isso denota a chave selecionada. Isso será atualizado por meio do evento OnChange quando o usuário interagir com o controle.
Items Os itens de ação a serem renderizados

Items Propriedades

Cada item usa o esquema a seguir para visualizar dados no componente.

Name Description
ItemDisplayName O Nome de Exibição do item da trilha
ItemKey A chave a ser usada para indicar qual item está selecionado e ao adicionar subitens. As chaves devem ser exclusivas.
ItemClickable Defina como falso, caso o item da trilha de navegação específico não seja clicável.

Fórmula Power Fx do exemplo:

Table(
    {
        ItemKey: "1",
        ItemDisplayName: "General",
        ItemClickable: true
    },
    {
        ItemKey: "2",
        ItemDisplayName: "Document",
        ItemClickable: true
    }
)

Propriedades de estilo

Name 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
MaxDisplayedItems O número máximo de trilhas para exibição antes da avaliação. Se for zero, todas as trilhas serão renderizadas.
OverflowIndex Índice opcional onde os itens de estouro serão recolhidos. Por padrão, é definido como zero.

Propriedades do evento

Name Description
InputEvent Um evento para enviar ao controle. Por exemplo, SetFocus. Consulte abaixo.

Comportamental

Oferece suporte a SetFocus como um InputEvent.

Configurar o comportamento "On Select"

Use a fórmula Switch() na propriedade OnSelect do componente para configurar ações específicas para cada item, referindo-se ao ItemKey selecionado do controle como o valor de alternância.

Substitua os valores false por expressões apropriadas na linguagem do Power Fx.

Como este controle é usado para navegação, uma ação lógica é usar funções de navegação (de preferência, para uma tela relevante com os dados relacionados carregados).

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 1 */
    "1", false,
    
    /* Action for ItemKey 2 */
    "2", false,
  
    /* Default action */
        false
  )

Configurando o foco no controle

Quando um novo diálogo for mostrado e o foco padrão tiver que estar no controle, um foco definido explícito será necessário.

Para fazer chamadas para o evento de entrada, você pode definir uma variável de contexto vinculada à propriedade Evento de Entrada para uma string que começa com SetFocus e é seguida por um elemento aleatório para garantir que o aplicativo a detecte como uma alteração.

Fórmula Power Fx do exemplo:

UpdateContext({ ctxResizableTextareaEvent:"SetFocus" & Text(Rand()) }));

A variável de contexto ctxResizableTextareaEvent seria então vinculada à propriedade Evento de Entrada.

Limitações

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