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