ContextMenu contrôle

Un contrôle utilisé pour saisir des commandes.

Note

La documentation complète et le code source sont accessibles dans le Référentiel de composants de code GitHub.

Description

Un menu contextuel (ContextMenu) est une liste de commandes basées sur le contexte de la sélection, du survol de la souris ou du focus du clavier. Ils font partie des surfaces de commande les plus efficaces et les plus utilisées, et peuvent être utilisés à divers endroits.

Ce composant de code fournit un wrapper autour du contrôle ContextualMenu de Fluent UI lié à un bouton à utiliser dans les applications canevas et les pages personnalisées.

Propriétés

Propriétés principales

Property	Description
Items	Les éléments d’action à afficher. Le premier élément est considéré comme l’élément racine.

Items Propriétés

Nom	Description
ItemDisplayName	Le nom d’affichage de l’élément de menu.
ItemKey	Clé à utiliser pour indiquer quel élément est sélectionné et lors de l’ajout de sous-éléments. Les clés doivent être uniques.
ItemEnabled	Définir sur false si l’option est désactivée.
ItemVisible	Définir sur false si l’option n’est pas visible.
ItemChecked	Définir sur true si l’option est cochée.
ItemIconName	L’icône Fluent UI à utiliser (voir Icônes Fluent UI)
ItemIconColor	La couleur de rendu de l’icône (par exemple, nommée, valeur RGB ou hexadécimale).
ItemIconOnly	Ne pas afficher l’étiquette de texte - uniquement l’icône.
ItemHeader	Afficher l’élément comme un en-tête de section. Si des éléments ont leur clé ItemParentKey définie sur la clé de cet élément, ils sont alors ajoutés en tant qu’éléments sémantiquement groupés dans cette section.
ItemTopDivider	Afficher un séparateur en haut de la section.
ItemDivider	Afficher l’élément en tant que séparateur de section ; ou si l’élément est un en-tête (ItemHeader = true), contrôle alors s’il faut afficher un séparateur au bas de la section.
ItemParentKey	Afficher l’option en tant qu’élément enfant d’une autre option.

Note

• ItemIconColor remplacera la valeur Thème du composant et ignorera les autres couleurs d’état (par exemple, désactivé).
• ItemHeader et ItemDivider doit être défini sur vrai pour être rendu comme un diviseur. S’il est défini sur false, il attend d’autres valeurs et s’affiche vide.
• L’ajout de la propriété ItemChecked et du comportement des éléments de sous-menu empêchera le sous-menu de se fermer au clic.

Exemple

Exemple de formule Power Fx pour les Items :

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

Propriétés de style

Property	Description
Theme	Accepte une chaîne JSON générée à l’aide du Concepteur de thème Fluent UI (windows.net). Si vous laissez ce champ vide, le thème par défaut défini par Power Apps sera utilisé. Si vous laissez ce champ vide, le thème par défaut défini par Power Apps sera utilisé. Consultez Création de thèmes pour obtenir des instructions de configuration.
Chevron	Afficher ou masquer le chevron vers le bas sur le bouton racine
IconColor	Facultatif. La couleur de l’icône sur le bouton de menu contextuel.
HoverIconColor	Facultatif. La couleur de l’icône lors du survol du bouton de menu contextuel.
IconSize	Facultatif. En pixels, la taille de l’icône sur le bouton du menu contextuel.
FontSize	Facultatif. En pixels, la taille du texte sur le bouton du menu contextuel.
FontColor	Facultatif. La couleur du texte sur le bouton de menu contextuel.
HoverFontColor	Facultatif. La couleur du texte lors du survol du bouton de menu contextuel.
FillColor	Facultatif. La couleur d’arrière-plan du bouton de menu contextuel.
HoverFillColor	Facultatif. La couleur d’arrière-plan lors du survol du bouton de menu contextuel.
TextAlignment	L’alignement du texte du bouton. Valeurs possibles : Centre, Gauche ou Droite
AccessibilityLabel	Étiquette aria pour les lecteurs d’écran

Propriétés d’événement

Property	Description
InputEvent	Un événement à envoyer au contrôle. Par exemple, SetFocus. Voir ci-dessous.

Behavior

Prend en charge SetFocus en tant que InputEvent.

Configurer le comportement de « OnSelect »

Utilisez la formule Switch() dans la propriété OnSelect du composant pour configurer des actions spécifiques pour chaque élément en se référant à la la valeur ItemKey sélectionnée du contrôle comme valeur de switch.

Remplacez les valeurs false avec les expressions appropriées dans le langage Power Fx.

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

Définir le focus sur le contrôle

Lorsqu’une nouvelle boîte de dialogue s’affiche et que le focus par défaut doit être sur le contrôle, il est nécessaire de définir le focus explicitement.

Pour effectuer des appels à l’événement d’entrée, vous pouvez définir une variable de contexte liée à la propriété Input Event sur une chaîne commençant par SetFocus et suivie d’un élément aléatoire pour vous assurer que l’application le détecte comme un changement.

Par exemple,

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

La variable de contexte ctxResizableTextareaEvent sera alors liée à la propriété Input Event.

Limitations

Ce composant de code ne peut être utilisé que dans les applications canevas et les pages personnalisées.