Partilhar via


ContextMenu Controlo

Um controlo utilizado para comandos de entrada.

Nota

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

Controlo ContextMenu.

Description

Um menu contextual (ContextMenu) é uma lista de comandos baseados no contexto de seleção, passagem do rato ou foco do teclado. São uma das superfícies de comandos mais eficazes e altamente utilizadas e podem ser utilizadas em vários locais.

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

_Propriedades

Propriedades-chave

Property Description
Items Os itens de ação a compor. O primeiro item é considerado o item de raiz.

Items Propriedades

Name Description
ItemDisplayName O Nome a Apresentar do item de menu.
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 marcada.
ItemIconName O ícone da Fluent UI a utilizar (consulte Ícones da Fluent UI)
ItemIconColor A cor na qual compor o ícone (por exemplo, nomeado, RGB ou valor hexadecimal).
ItemIconOnly Não mostre a etiqueta de texto – apenas o ícone.
ItemHeader Compor o item como um cabeçalho da 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 Compor um separador no topo da secção.
ItemDivider Compor o item como separador de secção – ou se o item for um cabeçalho (ItemHeader = true), então controla se deve compor um separador na parte inferior da secção.
ItemParentKey Compor a opção como item subordinado 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 definido como false, espera outros valores e serão compostos em branco.
  • Adicionar a propriedade ItemChecked e o comportamento de itens de submenu impedirá o encerramento do submenu no clique.

Exemplo

Fórmula do Power Fx de exemplo para Items:

  Table(
      {
          ItemKey: "File",
          ItemIconName: "save",
          ItemDisplayName: "Save",
          ItemOverflow:true
      },
       {
          ItemKey: "Delete",
          ItemIconName: "Delete",
          ItemDisplayName: "Delete",
          ItemOverflow:true
      }
  )
  

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. Deixar isto em branco irá utilizar o tema predefinido estabelecido pelo Power Apps. Consulte personalizar o tema para obter orientações sobre como configurar.
Chevron Mostrar ou ocultar a divisa para baixo no botão de raiz
IconColor Opcional. a cor do ícone no botão do menu de contexto.
HoverIconColor Opcional. a cor do ícone quando paira o cursor sobre o botão do menu de contexto.
IconSize Opcional. Em pixéis, o tamanho do ícone no botão do menu de contexto.
FontSize Opcional. Em pixéis, o tamanho do texto no botão do menu de contexto.
FontColor Opcional. a cor do texto no botão do menu de contexto.
HoverFontColor Opcional. a cor do texto quando paira o cursor sobre o botão do menu de contexto.
FillColor Opcional. a cor de fundo no botão do menu de contexto.
HoverFillColor Opcional. a cor de fundo quando paira o cursor sobre o botão do menu de contexto.
TextAlignment O alinhamento do texto do botão. Valores possíveis: Centro, Esquerda ou Direita
AccessibilityLabel Etiqueta aria de leitor de ecrã

Propriedades do Evento

Property Description
InputEvent Um evento a enviar ao controlo. Por exemplo, SetFocus. Ver abaixo.

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 1 */
    "File", false,
    
    /* Action for ItemKey 2 */
    "Delete", false,
  
    /* Default action */
        false
  )

Definir o Foco no controlo

Quando é apresentado um novo diálogo e o foco predefinido deverá estar no controlo, será necessário um foco de conjunto explícito.

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.

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