Chronologie

Chronologie

Des éléments les uns sous les autres, chacun sur un marqueur, reliés par une ligne : les étapes d'une procédure, les événements d'une histoire, les phases d'un parcours. Ce que chaque élément contient est libre — une ligne de texte, un tableau, un formulaire — et la ligne s'étend sur l'ensemble, jusqu'au prochain marqueur.

Étapes dans l'ordre

Numérotées, avec les trois états que connaît le sélecteur : les étapes derrière sont dessinées en solide, celle en cours se distingue, celles à venir attendent.
  1. Obtenir les sources

    Clonez le dépôt et installez ses dépendances.

  2. Configurer

    Copiez l'environnement exemple et remplissez l'adresse de la base de données.

  3. Créer la base de données

    Exécutez les migrations ; c'est l'étape en cours.

  4. Déployer

    Construisez les actifs et publiez la version.

Tout sous un titre

Chaque élément contient ce dont il a besoin — propriétés, message, boutons. Une icône remplace le point, et une tonalité colore le marqueur comme elle colore un marqueur ou un bloc.
  1. Commande passée
    14 mars, 09:41
    Référence
    ORD-2026-0142
    Montant
    € 184.00
    Paiement
    Carte se terminant par 4242
  2. Paiement reçu
    14 mars, 09:42
  3. Expédié
    15 mars, 16:05
    Retard

    Le transporteur annonce un jour supplémentaire.

  4. Livraison

Une histoire

Aucun ordre à suivre, seulement des événements : des points, une date sous chaque titre, et une couleur de catégorie où elle raconte quelque chose.
  1. Version 2.0 publiée
    2 septembre
  2. Révisé par l'équipe
    28 août
  3. Première ébauche
    12 août

Étapes pas encore décidées

Comme sur le sélecteur : une étape qui dépend d'une réponse pas encore donnée ne prend aucun numéro et ne déplace aucune des autres.
  1. Obtenir les sources
  2. Choisissez un plan
  3. Dépend du plan
  4. Déployer

Écrit à la main

Le composant est seulement un moyen d'écrire la forme à partir d'une liste. Les mêmes classes écrites sur la page donnent la même chronologie, avec tout ce qui s'y trouve.
  1. Un point simple
  2. Une icône à la place du point

    Tout balisage, écrit sur la page.

en Vue

La même chronologie dans un arbre vue. Ce que la branche prend comme balisage est un slot scoped là, donc un composant peut se tenir sous le titre d'un élément.
v1.0.29