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.

• GitHub
• Figma

Créer un indicateur d'étape

Utilisez un indicateur d'étape pour guider les personnes lorsqu'une séquence (formulaire ou processus) peut être divisée en étapes claires qui s'étendent sur plus d'une page.

Codage et accessibilité des indicateurs d'étape

Utilisez chaque étape pour un objectif

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.

Obtenez votre 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.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. 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.