AX - Groupe de boutons

Aperçu

AX - Groupe de boutons est un composant Experience Cloud qui affiche plusieurs boutons liés ensemble en tant que groupe unifié sur les pages des sites Experience.

Utilisez-le pour présenter des actions liées côte à côte — comme « Enregistrer » et « Annuler », « Modifier » et « Supprimer », ou des options de navigation pour différentes sections. Les boutons restent visuellement connectés en une seule unité, ce qui clarifie qu'il s'agit de choix liés.

Parfait pour les actions de formulaire, les options de gestion d'enregistrements, la navigation de type onglet, ou partout où les utilisateurs du portail doivent choisir entre plusieurs actions liées.

Configuration du groupe de boutons

Suivez ces étapes pour adapter parfaitement le composant Avonni Button Group au design et aux fonctionnalités de votre site Experience Cloud :

Paramètres clés

Afficher en ligne

Activez ce paramètre pour disposer les boutons horizontalement à travers l'écran. Le désactiver empilera les boutons verticalement.

Boutons visibles

Ce paramètre détermine le nombre maximum de boutons directement visibles à l'écran. Si vous avez plus de boutons que le nombre spécifié, les boutons restants seront placés dans un menu déroulant pratique.

Étiquette : Définissez le texte affiché sur le bouton qui ouvre le menu déroulant contenant des boutons supplémentaires.
Nom de l'icône : Sur le bouton du menu, sélectionnez une icône appropriée (consultez Salesforce Lightning Design System pour les icônes disponibles).
Variante : Choisissez le style visuel pour le bouton du menu (par ex., « neutral », « brand », « inverse »).
Alignement du menu : Sélectionnez comment le menu déroulant sera positionné par rapport au bouton (« gauche » ou « droite »).

Boutons

Étiquette : Saisissez le texte que vous souhaitez voir apparaître sur le bouton.
Nom de l'icône : Si vous le souhaitez, choisissez une icône à placer sur le bouton.
Position de l'icône : Précisez si l'icône doit être à la « gauche » ou à la « droite » du libellé du bouton.
Variante : Vous pouvez sélectionner l'apparence du bouton parmi les styles prédéfinis (« neutral », « brand », « destructive », etc.).
Désactivé : Activez ce paramètre si vous voulez que le bouton commence dans un état désactivé, empêchant l'interaction de l'utilisateur.
Masqué : Activez ce paramètre si vous souhaitez que le bouton soit initialement caché de la vue.
Interaction au clic : Cette section cruciale vous permet de définir ce qui se passe lorsqu'un utilisateur clique sur le bouton. Consultez la page de documentation « On Click Interactions » pour une liste complète des actions et des configurations possibles.

Considérations importantes

Concevez votre groupe de boutons avec une hiérarchie visuelle claire. Utilisez la variante « brand » pour mettre en avant les actions principales.
Utilisez la variante « destructive » avec parcimonie pour les actions ayant des conséquences importantes.
Assurez-vous que les libellés des boutons sont concis et décrivent précisément leur fonction.
Testez toujours minutieusement la configuration de votre groupe de boutons sur différents appareils et navigateurs pour garantir une expérience utilisateur optimale.

Apparence et style

Le composant Avonni Button Group offre des options de style complètes pour personnaliser son apparence au sein de votre site Experience Cloud. Voici une répartition des attributs de style disponibles :

Libellé/Icône

couleur : Définit la couleur par défaut du texte ou de l'icône.
couleur active : Définit la couleur du texte ou de l'icône lorsque le bouton est actif (cliqué ou focalisé).
couleur au survol : Définit la couleur du texte ou de l'icône lorsque l'utilisateur survole le bouton avec la souris.
famille de polices : Spécifie la police à utiliser pour le texte du bouton.
taille de police : Contrôle la taille du texte du bouton.
style de police : Définit le style de police (par ex., normal, italique, oblique).
graisse de police : Détermine l'épaisseur du texte du bouton (par ex., normal, bold, bolder).

Arrière-plan

couleur : Définit la couleur d'arrière-plan par défaut du bouton.
couleur active : Définit la couleur d'arrière-plan lorsque le bouton est actif.
couleur au survol : Définit la couleur d'arrière-plan lorsque l'utilisateur survole le bouton avec la souris.

Bordure

couleur : Définit la couleur de bordure par défaut.
couleur active : Définit la couleur de la bordure lorsque le bouton est actif.
couleur au survol : Définit la couleur de la bordure lorsque l'utilisateur survole le bouton avec la souris.
taille : Contrôle l'épaisseur de la bordure.
style : Spécifie le style de la bordure (par ex., solid, dashed, dotted).

Exemple d'utilisation

Pour créer un groupe de boutons avec un fond rouge, un texte blanc et un effet de survol subtil, considérez la configuration suivante :

Libellé/Icône :
   couleur : blanc
   couleur au survol : #f5f5f5 

Arrière-plan :
   couleur : rouge 

Bordure : 
   couleur : rouge

Notes importantes

Utilisez un sélecteur ou un générateur de couleurs web pour trouver les codes de couleur souhaités.
Veillez à la cohérence avec le design global et le schéma de couleurs de votre site Experience Cloud.
Testez toujours vos modifications de style pour garantir l'effet visuel souhaité et l'accessibilité.

Mis à jour il y a 19 jours

Ce contenu vous a-t-il été utile ?

Bonsoir