Les exemples suivent le métier, la densité et le thème choisis.

Retours et chargement

Bannière de page

nouveauClasses hb-banner hb-banner-warning hb-banner-dangerVuetify 2 v-banner single-lineVuetify 3 v-banner

Quand l'utiliser

Quand l'état concerne l'application entière et change ce qu'on peut faire : tablette hors ligne, nouvelle version disponible, mois clôturé en lecture seule. Pour un message local, une alerte.

system_update

Nouvelle version disponible. Elle s'installera au prochain redémarrage.

cloud_off

Hors ligne. Les saisies sont conservées et partiront à la reconnexion.

lock

Octobre est clôturé. Les factures de ce mois sont en lecture seule.

Code
<div class="hb-stack" style="max-width:720px">
  <div class="hb-banner"><i class="material-icons">system_update</i><p><b>Nouvelle version disponible.</b> Elle s'installera au prochain redémarrage.</p><button class="hb-btn">Redémarrer</button><button class="hb-btn hb-btn-icon" aria-label="Fermer"><i class="material-icons">close</i></button></div>
  <div class="hb-banner hb-banner-warning"><i class="material-icons">cloud_off</i><p><b>Hors ligne.</b> Les saisies sont conservées et partiront à la reconnexion.</p></div>
  <div class="hb-banner hb-banner-danger"><i class="material-icons">lock</i><p><b>Octobre est clôturé.</b> Les factures de ce mois sont en lecture seule.</p><button class="hb-btn">Voir la clôture</button></div>
</div>

Règles

  • Une seule bannière à la fois, la plus grave l'emporte. Elle pousse le contenu, elle ne le recouvre pas.
  • Fermable seulement si l'information peut l'être (version) ; un état (hors ligne) reste tant qu'il dure.