Surfaces

Barre de validation

nouveauClasses hb-footbar hb-footbar-totalVuetify 2 v-footer app ou v-bottom-sheetVuetify 3 v-footer app

Quand l'utiliser

Quand l'action principale doit rester accessible pendant qu'on fait défiler : réception de livraison, inventaire, commande. Sur un écran court, un pied de carte suffit.

Lignes de la réception… la barre reste collée en bas de la zone de défilement.

Total HT1 284,60 €

Code

<div class="hb-card" style="max-width:640px;overflow:hidden">
  <div class="hb-card-body hb-small" style="height:140px">Lignes de la réception… la barre reste collée en bas de la zone de défilement.</div>
  <div class="hb-footbar"><span class="hb-footbar-total"><small>Total HT</small>1 284,60 €</span><button class="hb-btn hb-btn-quiet">Brouillon</button><button class="hb-btn hb-btn-primary"><i class="material-icons">check</i>Valider la réception</button></div>
</div>

Règles

position: sticky; bottom: 0 : la barre appartient au conteneur qui défile, pas à la fenêtre ; sur une page entière, c'est body qui défile.
Le premier enfant (total, compte, résumé) est repoussé à gauche ; l'action principale est le dernier.
Sur téléphone, les boutons passent à la ligne si besoin ; le total reste lisible.