Indicateur d'étape - Stepper

L’indicateur d’étape permet d’indiquer à l’utilisateur où il se trouve dans un formulaire ou dans une démarche.

Cet indicateur d’étape est utilisable dans le cas d’un processus linéaire, le composant ne permet pas de naviguer d’une étape à une autre (pour cela, il faudra utiliser des boutons).

Étape intermédiaire

Tous les paramètres sont obligatoires. L’API de ce composant s’inspire du tag <progress value="3" max="5" /> HTML.

Code

= dsfr_stepper(title: "Choisissez votre ville", value: 3, max: 5, next_title: "Confirmez votre identité")

Résultat

Étape 3 sur 5 Choisissez votre ville

Étape suivante : Confirmez votre identité 

<div class="fr-stepper">
  <h2 class="fr-stepper__title">
    <span class="fr-stepper__state">
      Étape 3 sur 5
    </span>
    Choisissez votre ville
  </h2>
  <div
    class="fr-stepper__steps"
    data-fr-current-step="3"
    data-fr-steps="5">
  </div>
  <p class="fr-stepper__details">
    <span class="fr-text--bold">
      Étape suivante :
    </span>
    Confirmez votre identité
  </p>
</div>

Dernière étape

Le titre de l’étape suivante est obligatoire pour toutes les étapes sauf la dernière.

Code

= dsfr_stepper(title: "Confirmez votre identité", value: 3, max: 3)

Résultat

Étape 3 sur 3 Confirmez votre identité 

<div class="fr-stepper">
  <h2 class="fr-stepper__title">
    <span class="fr-stepper__state">
      Étape 3 sur 3
    </span>
    Confirmez votre identité
  </h2>
  <div
    class="fr-stepper__steps"
    data-fr-current-step="3"
    data-fr-steps="3">
  </div>
</div>

Plus d’informations