Timeline Component
Des moments sur une ligne : l’historique d’un colis, les étapes d’un projet, le journal d’un document. Le statut colore la ligne jusqu’à l’entrée (fait, en cours) ou la laisse grise (à venir) — et un lecteur d’écran entend le statut en mots.
Un colis
Avancez ou reculez la livraison : la ligne suit, l’étape en cours porte un anneau. Les titres d’un côté (le plus courant pour un historique), de l’autre, ou en alternance comme les exemples daisyUI.
- Étape faiteCommande reçuePaiement accepté, commande n° 2026-0042.
- Étape faitePréparée3 articles, 1 colis de 4,2 kg.
- Étape faiteExpédiéeRemise au transporteur, suivi FR123456789.
- Étape en coursEn cours de livraisonLe livreur est en tournée.
- Étape à venirLivréeSignée par le destinataire.
Un projet, à l’horizontale
À l’horizontale pour quelques étapes qui tiennent sur une ligne ; une couleur par entrée si l’on veut (ici les deux premières en vert).
- Étape faiteCadrage
- Étape faiteMaquettes
- Étape en coursDéveloppement
- Étape à venirRecette
- Étape à venirMise en ligne
Adapté à l’écran, icônes calées en haut
responsive : en alternance sur un écran large, compact sous md — réduisez la fenêtre. snapIcon cale l’icône en haut de l’entrée plutôt qu’au milieu, utile quand les cartes n’ont pas la même hauteur.
Un journal
Sans cartes, compact, l’heure à gauche : qui a fait quoi, quand — le journal d’audit d’un bon de réception signé, avec son empreinte. Composable : chaque entrée est un TimelineItem, avec son icône, un lien pour celle en cours.
- Étape faiteRéception ouvertePalette 106141411234567897, par C. Martin
- Étape faiteLignes contrôlées3 lignes, 40 pièces, aucun écart
- Étape faiteBon de livraison photographiéIMG_0412.jpg, 1,8 Mo
- Étape faiteSigné par le réceptionnairea3f5…c1e2
- Étape en coursEn attente du réseau
- Étape à venirArchivé