Système de design GCDémarrerAperçu des modèles de pagePage de baseAperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texteAperçu des raccourcis CSSRéinitialisation des stylesMise en page réactiveÉtatDimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilitéPoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de motMargeMarge intérieureAlignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuelCouleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordureNoms des icônesTaille de l'icôneImageCurseurÉvénements de pointeurTransitionAperçu des stylesUnités de styleCouleurEspacementTypographieNous contacterS'impliquerTrouvez une démo
Indicateur d'étape <gcds-stepper>
Autres noms : indicateur de progrès, étapes.L'indicateur d'étape est un marqueur de progression pour un processus à plusieurs étapes.
Utilisez l’attribut current-step pour indiquer l’étape à laquelle la personne se trouve. Utilisez l’attribut total-steps pour indiquer le nombre total d’étapes.
Placez l’indicateur d’étape dans la page
Utilisez l’attribut tag pour attribuer la balise de titre appropriée à l’indicateur d’étape. L’indicateur d’étape peut s’afficher sous la forme d’un h1, h2 ou h3.
Utilisez des propriétés valides
Les propriétés du composant ont une validation intégrée. Les propriétés requises ou susceptibles d’être mal utilisées feront l’objet d’une validation. S’il y a des erreurs de validation, le composant ne fonctionnera pas et ne s’affichera pas. Consultez la console du navigateur pour plus de détails et ajustez les propriétés en conséquence pour que le rendu fonctionne correctement.
Exemples
Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.
Ces attributs sont requis pour que le composant fonctionne correctement.
current-step
L’attribut current-step définit l’étape actuelle.
<gcds-stepper current-step="1" total-steps="4">Titre de la section</gcds-stepper>
total-steps
L’attribut total-steps définit le nombre total d’étapes.
<gcds-stepper current-step="1" total-steps="4">Titre de la section</gcds-stepper>
Attributs facultatifs
Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.
tag
L’attribut tag définit l’élément de titre HTML pour l’indicateur d’étape. Par défaut, il est défini à h2.
<gcds-stepper current-step="1" total-steps="4" tag="h3">Titre de la section</gcds-stepper>
Emplacements (slots)
L’emplacement par défaut vous permet d’injecter du contenu personnalisé dans la zone de contenu principale du composant, et les emplacements nommés, dans des zones spécifiques.
default
L’emplacement par défaut sert à placer le texte du titre.
<gcds-stepper current-step="1" total-steps="4">Titre de la section</gcds-stepper>
Générateur de code Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.
Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
Obtenez le code et intégrez-le dans votre environnement.
Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).
Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code. Titre de la section Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub 2026-05-20