Compartilhar via

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

Description

Um painel de navegação (Nav) fornece links para as principais áreas de um aplicativo ou site.

O componente de código Nav permite usar o componente de menu Nav do Fluent UI em aplicativos de tela e páginas personalizadas.

Nota

Código-fonte do componente e mais informações disponíveis no repositório de componentes de código do GitHub.

Propriedades

Principais propriedades

Propriedade Description
Selected key A chave a ser selecionada. Isso será atualizado por meio do evento OnChange quando o usuário interagir com o controle.
Items Obrigatória. A tabela de itens da fonte de dados a ser renderizada.
Fields Obrigatória. Os campos incluídos no conjunto de dados.

Items Propriedades

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

Name Description
ItemDisplayName O Nome de Exibição do item de comando/guia/menu
ItemKey A chave a ser usada para indicar qual item está selecionado e ao adicionar subitens. As chaves devem ser exclusivas.
ItemEnabled Defina como false se a opção estiver desabilitada
ItemVisible Defina como false se a opção não estiver visível
ItemIconName O ícone da interface do usuário do Fluent a ser usado (consulte Ícones da interface do usuário do Fluent)
ItemIconColor A cor para renderizar o ícone (por exemplo, RGB ou hexadecimal)
ItemIconOnly Não mostrar o rótulo de texto - apenas o ícone
ItemParentKey Renderizar a opção como item filho de outra opção
ItemExpanded Definir como false ou true se o grupo deve permanecer recolhido ou expandido, respectivamente.

Exemplo:

Table(
  {
      ItemKey: "1",
      ItemDisplayName: "Home with Icon & Custom color",
      ItemIconName: "Home",
      ItemIconColor: "Green"
  },
  {
      ItemKey: "2",
      ItemDisplayName: "Documents",
      ItemExpanded: true
  },
  {
      ItemKey: "3",
      ItemDisplayName: "Contents"
  },
  {
      ItemKey: "4",
      ItemDisplayName: "Item Invisible",
      ItemVisible: false
  },
  {
      ItemKey: "5",
      ItemDisplayName: "Quick Reference Guide",
      ItemParentKey: "3",
      ItemIconName: "Document"
  }
)

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
CollapseByDefault Definir como True ou False (On ou Off) se o grupo de navegação deve permanecer recolhido ou expandido, respectivamente. A propriedade de expansão de nível de item individual é respeitada.

Propriedades do evento

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

  Switch( Self.Selected.ItemKey,

    /* Action for ItemKey 1 */
    "1", false,

    /* Action for ItemKey 2 */
    "2", false,

    /* Action for ItemKey 3 */
    "3", false,

    /* Action for ItemKey 4 */
    "4", false,

    /* Action for ItemKey 5 */
    "5", false,

    /* Default action */
        false
  )

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

Por exemplo,

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

A variável de contexto ctxResizableTextareaEvent seria então vinculada à propriedade Input Event.

Limitações

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