Stepper

Le stepper permet de suivre un parcours, étapes par étapes. Les libellés de chaque étape proviennent de l'attribut data-label.

Étape en cours d'exécution

Utilisez is-current pour l'étape en cours d'exécution.

Aperçu

Mode responsive

1

2

3

4

                                                        <div class="stepper">
                                <div class="step is-current" data-label="Choix boutique">1</div>
                                <div class="step" data-label="Validation">2</div>
                                <div class="step" data-label="Résumé">3</div>
                                <div class="step" data-label="Confirmation">4</div>
                            </div>

Étape terminée

Utilisez is-done une fois que l'étape est terminée.

Aperçu

Mode responsive

1

2

3

4

                                                        <div class="stepper">
                                <div class="step is-done" data-label="Choix boutique">1</div>
                                <div class="step is-current" data-label="Validation">2</div>
                                <div class="step" data-label="Résumé">3</div>
                                <div class="step" data-label="Confirmation">4</div>
                            </div>

Étape en cours de consultation

Il peut arriver que l'utilisateur revienne en arrière dans le parcours. Utilisez is-active pour mettre en avant l'étape qu'il est en train de consulter.

Aperçu

Mode responsive

1

2

3

4

                                                        <div class="stepper">
                                <div class="step is-done is-active" data-label="Choix boutique">1</div>
                                <div class="step is-done" data-label="Validation">2</div>
                                <div class="step is-current" data-label="Résumé">3</div>
                                <div class="step" data-label="Confirmation">4</div>
                            </div>

Centrer un stepper

Le stepper n'est pas centré par défaut. Il vous faut donc le contenir dans un élément qui centre. Voici deux exemples.

Aperçu

Mode responsive

1

2

3

4

                                                        <section class="section has-text-centered">
                                <div class="stepper">
                                    <div class="step is-done" data-label="Choix boutique">1</div>
                                    <div class="step is-done" data-label="Validation">2</div>
                                    <div class="step is-current" data-label="Résumé">3</div>
                                    <div class="step" data-label="Confirmation">4</div>
                                </div>
                            </section>