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

Listes et contenu

Chronologie

nouveauClasses hb-timeline hb-timeline-time hb-timeline-body tone-success tone-warning tone-danger tone-brandVuetify 2 v-timeline denseVuetify 3 v-timeline density="compact" side="end"

Quand l'utiliser

Pour une suite d'événements datés qu'on lit du plus récent au plus ancien : historique d'une fiche, journal de synchronisation, relevés d'une journée. Pour des étapes à venir, les étapes.

  1. 09:12
    Relevé des températures par ANA. Nguyen

    Vitrine 1 : 2,1 °C · Vitrine 2 : 1,8 °C · Chambre froide : 0,4 °C

  2. 08:40
    Synchronisation réussie

    42 lignes envoyées, 3 reçues.

  3. 08:05
    DLC à J-1 sur 2 produits

    Moules bouchot, crevettes cuites : à retirer ce soir.

  4. 07:30
    Chambre froide à 6,2 °C

    Alerte envoyée, porte restée ouverte.

  5. Hier
    Livraison Pomona réceptionnée

    18 colis, 1 écart de poids.

Code
<ol class="hb-timeline" style="max-width:560px">
  <li class="tone-brand"><span class="hb-timeline-time">09:12</span><div class="hb-timeline-body"><b>Relevé des températures</b> par <span class="hb-chip"><span class="hb-avatar">AN</span><span>A. Nguyen</span></span><p>Vitrine 1 : 2,1 °C · Vitrine 2 : 1,8 °C · Chambre froide : 0,4 °C</p></div></li>
  <li class="tone-success"><span class="hb-timeline-time">08:40</span><div class="hb-timeline-body"><b>Synchronisation</b> réussie<p>42 lignes envoyées, 3 reçues.</p></div></li>
  <li class="tone-warning"><span class="hb-timeline-time">08:05</span><div class="hb-timeline-body"><b>DLC à J-1</b> sur 2 produits<p>Moules bouchot, crevettes cuites : à retirer ce soir.</p></div></li>
  <li class="tone-danger"><span class="hb-timeline-time">07:30</span><div class="hb-timeline-body"><b>Chambre froide</b> à 6,2 °C<p>Alerte envoyée, porte restée ouverte.</p></div></li>
  <li><span class="hb-timeline-time">Hier</span><div class="hb-timeline-body"><b>Livraison Pomona</b> réceptionnée<p>18 colis, 1 écart de poids.</p></div></li>
</ol>

Règles

  • Les tons sont tone-success, tone-warning, tone-danger, tone-brand : jamais success seul, que Vuetify peint en fond vert.
  • L'heure seule le jour même, « Hier », puis la date ; chiffres tabulaires alignés à droite.
  • Le premier élément est en gras le sujet, puis le reste de la phrase ; le détail en petit dessous. Pas de verbe au passé composé en tête : « Synchronisation réussie », pas « A synchronisé ».