Barre de progression

Aperçu

Le composant Avonni Progress Bar offre un moyen dynamique et visuellement attrayant de représenter la progression vers un objectif ou l’état d’avancement au sein des sites Experience Cloud. Il fournit un retour visuel immédiat aux utilisateurs sur l’état des processus en cours, l’achèvement des tâches ou tout autre indicateur de progression.

Paramètres

🎛️ Propriétés

Nom	Description	Utilisation
Étiquette	Le texte affiché pour identifier l’objectif de la barre de progression.	Implémentez cette propriété pour donner aux utilisateurs une compréhension claire de ce que la barre indique comme progression.
Valeur	Une valeur numérique qui représente la progression actuelle.	Définissez cette propriété pour refléter le pourcentage ou la fraction de la tâche ou du processus qui a été complété.
Étiquette de valeur	L’étiquette qui sera affichée à côté de la valeur, souvent sous forme de pourcentage ou de fraction.	Utilisez ceci pour fournir une représentation textuelle de la valeur de progression, apportant de la clarté aux utilisateurs.
Position de la valeur	Position de l’étiquette de valeur par rapport à la barre de progression. Les options incluent Haut droite, Gauche, Droite, Haut gauche, Bas droite, et Bas gauche.	Choisissez une position de valeur qui améliore la lisibilité et s’intègre au design du contenu environnant.
Taille	L’épaisseur de la barre de progression. Les options incluent Pleine, Très petite, Petit, Moyen, et Grand.	Sélectionnez une taille qui garantit que la barre de progression soit visible et harmonieuse avec la mise en page globale.
Orientation	La direction dans laquelle la barre de progression se remplit. Peut être définie sur Horizontale ou Verticale.	Alignez l’orientation avec la mise en page et la direction du flux de contenu pour une visualisation intuitive de la progression.
Afficher la valeur	Un commutateur pour afficher ou masquer l’étiquette de valeur de progression.	Utilisez ce paramètre pour afficher directement la progression numérique sur la barre comme référence pour l’utilisateur ou pour conserver un design épuré et minimaliste.
Variante	La forme de la barre de progression. Les options sont Base pour une barre droite ou Circulaire pour un indicateur de progression rond.	Choisissez une variante qui s’adapte le mieux au motif de design du site et au type de progression affichée.
Texturé	Ajoute un effet texturé à la barre de progression pour un détail visuel supplémentaire.	Appliquez cette propriété pour créer une apparence plus dynamique et tactile de la barre de progression.
Thème	Thèmes de couleur prédéfinis qui indiquent la nature ou l’état de la progression. Les thèmes disponibles incluent Base, Alt Inverse, Erreur, Info, Inverse, Hors ligne, Succès, et Avertissement.	Sélectionnez un thème pour transmettre différentes significations — par exemple, utilisez Succès pour les tâches complétées ou Avertissement pour les actions en attente.
Épaisseur	Ajustez l’épaisseur de la barre de progression. Les options incluent Moyen, Très petite, Petit, et Grand.	Choisissez l’épaisseur qui garantit la proéminence de la barre de progression et une compatibilité esthétique avec les autres éléments du site.

🎨 Style