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

Choisissez votre ville Étape 3 sur 5

Étape suivante : Confirmez votre identité 

<div class="fr-stepper">
  <h2 class="fr-stepper__title">
    Choisissez votre ville
    <span class="fr-stepper__state">
      Étape 3 sur 5
    </span>
  </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

Confirmez votre identité Étape 3 sur 3 

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

Plus d’informations