Menu de boutons

Aperçu

Le composant Avonni Button Menu enrichit la navigation de votre site Experience Cloud avec un menu déroulant flexible déclenché par un bouton. Il combine un style personnalisable, un comportement intuitif et une source de données dynamique pour créer des menus conviviaux adaptés aux besoins de votre site.

Paramètres du Button Menu

Le composant Button Menu vous permet de créer un menu déroulant déclenché par un clic sur un bouton. Voici comment vous pouvez le personnaliser pour l'adapter aux besoins de votre site :

Étiquette

• Ce qu'il fait : Définit le texte qui apparaît sur le bouton.

• Exemple : "Navigation", "Actions", "En savoir plus."

Icône

• Ce qu'il fait : Ajoute une icône visuelle au bouton.

• Comment l'utiliser : Choisissez parmi les icônes disponibles dans le Lightning Design System.

• Optionnel : Vous pouvez laisser vide si vous ne voulez pas d'icône.

Style du bouton

• Ce qu'il fait : Change l'apparence du bouton pour correspondre au look et à l'ambiance de votre site.

• Options :

  • Neutre

  • Marque

  • Destructif (pour des actions comme la suppression)

  • Succès (pour les actions positives)

  • Plus...

Ajuster les paramètres d'apparence vous permet de personnaliser encore plus l'aspect de votre bouton. Par exemple, vous pouvez choisir la variante « Conteneur » pour changer la couleur d'arrière-plan du bouton selon vos préférences ou sélectionner le jeton de couleur prédéfini pour votre site.

Alignement du menu

• Ce qu'il fait : Détermine où le menu déroulant apparaît par rapport au bouton.

• Options :

  • Gauche

  • Droite

  • Centre

  • Bas-Gauche

  • Plus...

Déclencheur du menu

• Ce qu'il fait : Contrôle la façon dont le menu s'ouvre.

• Options :

  • Clic

  • Survol (s'ouvre au survol de la souris)

  • Focus (s'ouvre au focus clavier)

Info-bulle

• Ce qu'il fait : Affiche des informations utiles lorsque les utilisateurs survolent le bouton.

• Optionnel : Laissez vide si aucune explication supplémentaire n'est nécessaire.

Masquer la flèche descendante

• Ce qu'il fait : Supprime la flèche pointant vers le bas généralement affichée sur les boutons de menu.

• Optionnel : Cochez cette case si vous préférez un aspect plus épuré.

S'étendre sur toute la largeur

• Ce qu'il fait : Fait en sorte que le bouton s'étende pour occuper toute la largeur disponible.

• Optionnel : Cochez cette case si vous voulez un bouton plus grand.

Désactiver le bouton

• Ce qu'il fait : Rend temporairement le bouton et le menu inutilisables.

• Optionnel : Cochez cette case pour empêcher les utilisateurs d'interagir avec lui.

Nubbin du menu

• Le nubbin du menu est un petit triangle discret à côté des éléments de menu dans un menu bouton.

• Il relie visuellement l'élément de menu au bouton qui ouvre le menu, guidant le regard de l'utilisateur.

• Cela aide les utilisateurs à identifier rapidement quel élément de menu est associé à un bouton particulier, améliorant l'expérience utilisateur globale.

Éléments du menu

• Ce qu'il fait : Définit les liens ou actions dans le menu déroulant.

• Comment l'utiliser : Ajoutez des éléments avec des libellés (le texte affiché) et une icône si nécessaire.

Définir la navigation de l'élément

Pour rendre votre menu bouton interactif, vous devez indiquer pour chaque élément de menu où aller lorsqu'on clique dessus. Cela se fait dans la section « Lier à ». Vous pouvez en savoir plus sur le différents types d'actions que vous pouvez déclencher depuis le menu bouton ici.

Paramètres d'apparence

Ces paramètres vous permettent de personnaliser visuellement votre menu bouton pour qu'il corresponde au design et à l'identité visuelle de votre site.

Espacement

• Ce qu'il fait : Contrôlez l'espace autour du bouton.

• Comment l'utiliser : Utilisez des curseurs ou des champs numériques pour ajuster les valeurs d'espacement en haut, en bas, à gauche et à droite.

Libellé & Icône

• Couleur : Choisissez la couleur par défaut lorsque le bouton est actif (cliqué ou survolé), et une couleur au survol.

• Famille de polices : Sélectionnez la police pour le texte du libellé (par ex. Arial, Times New Roman, Verdana).

• Taille de la police : Ajustez la taille du texte du libellé à l'aide d'un curseur ou d'un champ numérique.

• Style de la police : Choisissez normal, italique ou oblique pour le texte.

• Graisse de la police : Rendez le texte léger, normal, moyen, gras ou très gras.

• Alignement horizontal : Décidez si l'icône doit être à gauche ou à droite du texte du libellé.

Arrière-plan

• Couleur : Choisissez la couleur par défaut pour l'arrière-plan du bouton lorsqu'il est actif et la couleur au survol lorsqu'il est inactif.

Bordure

Choisissez la couleur par défaut lorsque le bouton est actif et la couleur au survol pour la bordure autour du bouton.

• Taille : Ajustez l'épaisseur de la bordure à l'aide d'un curseur ou d'un champ numérique.

• Style : Choisissez entre une bordure pleine, en tirets, en pointillés ou double.

• Rayon : Vous pouvez ajuster l'arrondissement des coins à l'aide d'un curseur ou d'un champ numérique (une valeur plus élevée rend les coins plus arrondis).

Image (pour les éléments du menu)

• Couleur de la bordure : Choisissez la couleur de la bordure autour des images des éléments du menu (si elles en ont une).

• Taille : Ajustez la taille des images des éléments du menu à l'aide d'un curseur ou d'un champ numérique.

• Style : Choisissez un style normal, italique ou oblique pour les légendes d'image (le cas échéant).

• Rayon : Ajustez l'arrondissement des coins des images des éléments du menu à l'aide d'un curseur ou d'un champ numérique.

• Adaptation de l'objet : Décidez comment l'image doit s'ajuster dans son conteneur (par ex. remplir, contenir, couvrir).

Considérations importantes

• Style : Personnalisez l'apparence du menu bouton pour qu'elle corresponde à l'identité visuelle de votre site.

• Lier à : Envisagez d'ajouter l'interaction « Lier à » pour gérer les interactions des utilisateurs avec les éléments du menu.