Navigation

Étapes

nouveauClasses hb-steps doneVuetify 2 v-stepper (en-tête seulement, le contenu reste dans la page)Vuetify 3 v-stepper

Quand l'utiliser

Pour un parcours en trois à six écrans qui doit se finir : réception d'une livraison, inscription d'un magasin, assistant d'import. Pas pour des onglets libres, ni pour un historique (chronologie).

Fournisseur
Produits
Pesée
Validation

Code

<ol class="hb-steps" style="max-width:640px"><li class="done"><span>Fournisseur</span></li><li class="done"><span>Produits</span></li><li aria-current="step"><span>Pesée</span></li><li><span>Validation</span></li></ol>

Règles

Une étape faite porte done (coche sur fond métier), la courante aria-current="step" ; on peut revenir sur une étape faite en cliquant, pas avancer sur une étape à venir.
Sur téléphone, seuls les numéros et le libellé de l'étape courante restent.
Les boutons « Retour » et « Continuer » vont dans une barre d'actions en pied d'écran, « Continuer » à droite en action principale.