CommandBar controlo (pré-visualização)

Um controlo utilizado para introduzir comandos.

Nota

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

Controlo CommandBar.

Descrição

CommandBar é uma superfície que aloja comandos que operam no conteúdo da janela, do painel ou da região principal em que reside.

Este componente de código fornece um wrapper em torno do controlo CommandBar do Fluent UI para utilização em aplicações de tela e páginas personalizadas.

Propriedades

Propriedades chave

Propriedade Descrição
Items Os itens de ação a apresentar

Estrutura de itens

Cada item utiliza o esquema que se segue para visualizar dados no componente.

Name Descrição
ItemDisplayName O nome de apresentação do item da barra de comandos.
ItemKey A chave a utilizar para indicar o item que está selecionado e quando adicionar subitens. As chaves têm de ser exclusivas.
ItemEnabled Defina como false se a opção estiver desativada.
ItemVisible Defina como false se a opção não estiver visível.
ItemChecked Defina como true se a opção estiver selecionada (por exemplo, botões divididos numa barra de comando).
ItemSplit Defina como verdadeiro se for possível clicar na opção e utilizá‑la como um submenu pendente.
ItemIconName O ícone da Fluent UI a utilizar (consulte Ícones da Fluent UI)
ItemIconColor A cor com que apresentar o ícone (por exemplo, nome da cor, RGB ou valor hexadecimal).
ItemIconOnly Não mostre a etiqueta de texto – apenas o ícone.
ItemOverflow Definido como verdadeiro para o comportamento de capacidade excedida
ItemOverflow Mostrar a opção nos itens em excesso.
ItemFarItem Apresentar a opção no grupo de itens à extrema direita de uma barra de comandos.
ItemHeader Apresentar o item como cabeçalho de secção. Se existirem itens que tenham o respetivo ItemParentKey definido para a chave deste item, estes serão adicionados como itens agrupados semanticamente nesta secção.
ItemTopDivider Apresentar um separador no topo da secção.
ItemDivider Apresenta o item como um separador de secção — ou, se o item for um item de cabeçalho (ItemHeader = true), controla se é apresentado um separador na parte inferior da secção.
ItemParentKey Apresentar a opção como um subitem de outra opção.

Nota

  • ItemIconColor substituirá o valor Tema do componente e ignorará outras cores de estado (por exemplo, desativado).
  • ItemHeader e ItemDivider deve ser definido como verdadeiro para render como um divisor. Se estiver definido como false, espera outros valores e mostrará em branco.

Exemplo

Exemplo de fórmula do Power Fx para Items básico:

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit"
    },{
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete"
    },{
        ItemKey: "refresh",
        ItemDisplayName: "Refresh",
        ItemIconName: "refresh"
    },{
        ItemKey: "help",
        ItemDisplayName: "Help",
        ItemIconName: "help"
    }
)

Propriedades de estilo

Propriedade Descrição
Theme Aceita uma string JSON gerada utilizando o Fluent UI Theme Designer (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 aria-label para leitores de ecrã

Propriedades do evento

Propriedade Descrição
InputEvent Um evento a enviar ao controlo. Por exemplo, SetFocus.

Comportamento

Suporta SetFocus como um InputEvent.

Configurar o comportamento "Ao Selecionar"

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

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

  Switch( Self.Selected.ItemKey,
    /* Action for ItemKey 'new' (e.g., Patch function) */
    "new", false,
    
    /* Action for 'edit' (e.g., Patch function) */
    "edit", false,
    
    /* Action for 'delete' (e.g., Remove function ) */
    "delete", false,
    
    /* Action for 'refresh' (e.g., Refresh function) */
    "refresh", false,
    
    /* Action for 'help' (e.g., email support with the Office 365 connector ) */
    "help", false,
  
    /* Default action */
        false
  )

Colocar o foco no controlo

Quando é apresentado um novo diálogo e o foco predefinido deve ser colocado no controlo, será necessário definir explicitamente o foco.

Para fazer chamadas para o evento de entrada, pode definir uma variável de contexto que está dependente da propriedade Input Event para uma cadeia que começa por SetFocus e seguida por um elemento aleatório, para assegurar que a aplicação a deteta como uma alteração.

Fórmula do Power Fx de exemplo:

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

A variável de contexto ctxResizableTextareaEvent ficaria então dependente da propriedade Input Event.

Limitações

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

Consulte mais notas de limitação nos desafios de design de componentes.

  • Última atualização a