Composants → bpm.timeline

bpm.timeline

Frise chronologique verticale : étapes avec titre, description, date et statut (done, current, upcoming). Démo : jalons d'un projet de déploiement CRM.

StableAffichage⏱ 2 min
Cadrage
12 janv. 2026, 00:00
Ateliers besoins et périmètre validé
Développement
26 jan. – 13 mars 2026
Sprints 1 à 4 livrés
Recette
16 mars – 3 avr. 2026
Tests métier en cours sur la préproduction
Mise en production
15 avr. 2026
Bascule et formation des utilisateurs
Python
bpm.timeline(items=[{"title": "Cadrage", "date": "12 jan. 2026", "status": "done"}, ..., {"title": "Mise en production", "date": "15 avr. 2026", "status": "upcoming"}])

Props

PropTypeDéfautRequisDescription
eventsTimelineEvent[]NonFil chronologique (date ISO, title, actor?, metadata?, groupByDate, maxItems, sortOrder).
itemsTimelineItem[][]NonAncienne API (title, description?, date?, status?).
classNamestringNonClasses CSS additionnelles.

TimelineItem

PropriétéTypeDescription
idstringIdentifiant unique (optionnel).
titleReactNodeTitre de l'étape.
descriptionReactNodeDescription ou sous-texte (optionnel).
datestringDate affichée (ex. "Jan 2025") (optionnel).
status"done" | "current" | "upcoming"État visuel : terminé, en cours, à venir.

Exemples

bpm.timeline(items=[{"title": "Cadrage", "date": "12 jan. 2026", "status": "done"}, {"title": "Développement", "date": "26 jan. – 13 mars 2026", "status": "done"}, {"title": "Recette", "date": "16 mars – 3 avr. 2026", "status": "current"}, {"title": "Mise en production", "date": "15 avr. 2026", "status": "upcoming"}])