Menu contextuel

Ajoute un menu contextuel à d'autres vues. Vous pouvez l'épingler à un élément de menu lorsque ce dernier est cliqué ou lorsque la vue n'est plus en évidence.

Propriétés de configuration

Sous Configuration, définissez ou modifiez les propriétés d'apparence et de comportement de la vue.

Taille de l'écran: Une propriété de configuration comportant l'icône Tailles d'écran en regard du nom de la propriété peut avoir des valeurs différentes pour chaque taille d'écran. Si vous ne définissez pas de valeur, la taille de l'écran hérite de la valeur de taille d'écran supérieure suivante comme valeur par défaut.

Définitions de thème: Les définitions de thème spécifient les couleurs et les styles d'une vue et déterminent son apparence. Vous pouvez prévisualiser l'apparence des vues dans l'éditeur de thème. Voir Thèmes.

Les propriétés de configuration de l'apparence de la vue Menu contextuel sont répertoriées dans le tableau ci-dessous :

Tableau 1. Propriétés de configuration de l'apparence du contrôle Menu contextuel
Propriété de configuration de l'apparence	Description	Type de données
Afficher le libellé	Fournit le libellé de la vue contextuelle. Lorsque la vue Afficher le libellé est sélectionnée, le menu contextuel affiche le libellé de la vue contenue. Par défaut, l'étiquette de la vue contenue est masquée.	`Boolean`
Position du libellé	Spécifie la position du libellé : Haut Gauche	`String`
Largeur du libellé	Largeur de l'étiquette. Vous pouvez spécifier sa largeur en px (pixels), % (pourcentage), ou unités em. Par exemple, 50px, 20% ou 0.4em. Si aucun type d'unité n'est spécifié, px est utilisé.	`String`
Alignement horizontal	Spécifie la position horizontale du menu contextuel par rapport à la vue contenue. Gauche Droite	`String`
Alignement vertical	Specifies the vertical position of the pop-up menu relative to the contained view. Haut Bas	`String`
Ombre	Ajoute un ombrage au cadre du menu contextuel.	`Boolean`
Largeur	Spécifie la largeur de l'enveloppe qui encapsule la vue.	`String`

Les propriétés de configuration du comportement de la vue Menu contextuel sont répertoriées dans le tableau ci-dessous :

Tableau 2. Propriétés de configuration du comportement du contrôle Menu contextuel
Propriété de configuration du comportement	Description	Type de données
Epingler le menu	Empêche le menu contextuel de se fermer automatiquement lorsqu'un élément de menu est cliqué ou lorsque la vue n'est plus en évidence.	`Boolean`
Options de menu	Spécifie les éléments du menu : Commande (`String`) Commande exécutée lorsque cet élément de menu est sélectionné. Type d'élément (`String`) Spécifie le type d'élément de menu : Libellé Séparateur En-tête de section Icône (`String`) Icône que vous souhaitez ajouter à l'élément de menu spécifié. Laissez vide pour aucune icône. Texte de l'élément (`String`) Texte à afficher pour l'élément de menu spécifié (non applicable aux séparateurs). Forme de badge (`String`) Forme de badge que vous souhaitez utiliser. Aucun carré Arrondi Couleur du badge (`String`) Style de couleur à utiliser pour le badge. Les couleurs correspondent aux variables du thème spécifié. Texte du badge (`String`) Texte ajouté au badge.	`MenuItemSpec[]`

Exemple

Dans cet exemple, une vue Groupe d'entrée est placée dans une vue Menu contextuel. Définissez les propriétés de configuration pour chaque vue Groupe d'entrée comme suit :

Sous Apparence, définissez Position du libellé sur Top, Style de couleur sur Warning, Emplacement du bouton sur Left, Type de bouton sur Menuet Informations sur le bouton sur Click to see Menu Items.
Sous Evénements, dans En cas de clic de bouton, entrez la ligne de code suivante :
```
${Popup_Menu1}.setMenuVisible(!${Popup_Menu1}.isMenuVisible{})
```

où 'Popup_Menu1' est l'ID de la vue Menu contextuel.

Définissez les propriétés de configuration suivantes de la vue Menu contextuel :

Sous Apparence, définissez Position du libellé sur Top, Alignement horizontal sur Left, Alignement vertical sur Bottom, sélectionnez Ombreet définissez Largeur sur 25%.
Sous Comportement, sélectionnez Menu Pin.
Pour Eléments de menu, cliquez sur plus (+) pour ajouter trois lignes au tableau, chacune avec les valeurs suivantes :
- Ligne 1: pour Commande, entrez 1, définissez Type d'élément sur Label, pour Item text, entrez Item 1, définissez Forme du badge sur Rounded, Couleur du badge sur Primaryet pour Texte du badge , entrez 1.
- Ligne 2: pour Commande, entrez 2, définissez Type d'élément sur Label, pour Item text, entrez Item 2, définissez Forme du badge sur Rounded, Couleur du badge sur Infoet pour Texte du badge , entrez 2.
- Ligne 3: pour Commande, entrez 3, définissez Type d'élément sur Label, pour Item text, entrez Item 3, définissez Forme du badge sur Rounded, Couleur du badge sur Successet pour Texte du badge , entrez 3.

Lors de l'exécution, le résultat est un menu contextuel qui ressemble à l'image suivante.

Evénements

Vous pouvez définir ou modifier des gestionnaires d'événements pour la vue dans l'onglet Evénements. Vous pouvez définir des événements à déclencher par programmation ou lorsqu'un utilisateur interagit avec la vue. Pour plus d'informations sur la manière de définir et de coder des événements, voir Evénements définis par l'utilisateur. La vue de menu contextuel comporte les types de gestionnaires d'événements suivants:

: Activé lors du chargement de la page. Par exemple :
```
me.setMenuVisible(true)
```

: Activé lorsqu'un utilisateur clique sur un élément. Applicable uniquement pour les libellés, ne s'applique pas aux en-têtes de section. Par exemple :

${Text1}.setLabelPosition(command) //sets the label position of the Text1 control to the value of command
//the value of command is set in the menu item command property

Méthodes

Pour des informations détaillées sur les méthodes disponibles pour le menu contextuel, voir l' API JavaScript du menu contextuel.

Ressources supplémentaires

Pour plus d'informations sur la création d'un coach ou d'une page, voir Génération de coaches.
Pour plus d'informations sur les propriétés standard (Général, Configuration, Positionnement, Visibilitéet Attributs HTML), voir Afficher les propriétés.