Timeline
La suite des étapes d'un parcours, verticale ou horizontale : ce qui est fait, l'étape en cours, ce qui reste.
Utilisation
import { Timeline, TimelineStep } from "@monstera/ui"- Demande envoyée, terminée
- Étude du dossier, en cours
- Signature du contrat, à venir
- Versement des fonds, à venir
Verticale
La direction par défaut. Le trait est vert jusqu'à l'étape en cours, dont la pastille est un anneau. Les étapes à venir portent un cadenas.
- Offre, terminée
- Identité, en cours
- Pièces, à venir
- Carte, à venir
Horizontale
Les étapes se partagent la largeur à parts égales, libellé au-dessus du trait. icon remplace le cadenas d'une étape à venir.
- Demande envoyée, terminée
- Justificatif de domicile, en erreurDocument illisible, à renvoyer
- Signature du contrat, à venir
Étape en erreur
Pastille et libellé en rouge. Le contenu passé en enfant se place sous le libellé, ici la raison du blocage.
- Commande de la carte, terminée
- Fabrication, terminée
- Envoi, en cours
- Réception, à venir
Taille sm
Un point de 12 px à la place de la pastille de 24 px, sans glyphe. Le trait et les libellés ne changent pas.
API
Timeline
Prop
Type
TimelineStep
Prop
Type