Composant · Feedback

Timeline

Stable

Liste d'événements datés reliés par une ligne de connexion — façon Ant Design Timeline / MUI Timeline. Chaque item porte une pastille de statut (ton), un titre, une méta (date/heure) et une description optionnelle. Sémantique <ol>/<li>, pastilles aria-hidden. Distinct de TimelineChart (dataviz à échelle temporelle continue) : ici c'est une liste chronologique d'événements discrets.

Vertical

Orientation par défaut : chaque événement empile méta, titre et description, relié à la pastille suivante par une ligne verticale.

Suivi de dossier

12 mai 2026 · 09:14 Dossier créé Ouverture du dossier par l'agent.
14 mai 2026 Documents reçus Pièces justificatives complètes.
16 mai 2026 En révision Analyse en cours par le comité.
20 mai 2026 Refusé Critères de revenu non atteints.
30 mai 2026 Archivé

Voir le code (Svelte)

<Timeline items={[{"title":"Dossier créé","meta":"12 mai 2026 · 09:14","description":"Ouverture du dossier par l'agent.","tone":"info"},{"title":"Documents reçus","meta":"14 mai 2026","description":"Pièces justificatives complètes.","tone":"success"},{"title":"En révision","meta":"16 mai 2026","description":"Analyse en cours par le comité.","tone":"warning"},{"title":"Refusé","meta":"20 mai 2026","description":"Critères de revenu non atteints.","tone":"danger"},{"title":"Archivé","meta":"30 mai 2026"}]} />

Horizontal

Avec orientation="horizontal", les événements se déploient sur une ligne, idéal pour un suivi compact d'étapes.

Suivi de livraison

J0 Commande
J1 Préparée
J2 Expédiée
J4 Livrée

Voir le code (Svelte)

<Timeline
  items={[{"title":"Commande","meta":"J0","tone":"info"},{"title":"Préparée","meta":"J1","tone":"success"},{"title":"Expédiée","meta":"J2","tone":"success"},{"title":"Livrée","meta":"J4","tone":"neutral"}]}
  orientation="horizontal"
/>

API du composant

Prop	Type	Défaut	Description
`items`	`TimelineItem[]`	—	Événements affichés, dans l'ordre.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Sens de déploiement de la ligne.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

TimelineItem

Champ	Type	Description
`title`	`string`	Titre de l'événement (requis).
`meta`	`string`	Date, heure ou libellé court.
`description`	`string`	Texte secondaire optionnel.
`tone`	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'`	Couleur de la pastille (token de statut, défaut 'neutral').

Accessibilité : structure <ol>/<li> ; la pastille et la ligne sont aria-hidden.

Tokens CSS

Variable CSS	Description
`--st-semantic-feedback-info / success / warning / error`	Couleur de pastille selon le ton.
`--st-semantic-border-subtle`	Ligne de connexion.
`--st-spacing-3 / --st-spacing-4`	Espacement entre pastille, contenu et items.