Timeline

Timeline

Cose una sotto l'altra, ciascuna su un marcatore, unite da una linea: i passaggi di una procedura, gli eventi di una storia, le fasi di un processo. Ciò che ciascuna contiene è libero: una riga di testo, una tabella, un modulo, e la linea scorre lungo tutto, fino al prossimo marcatore.

Passaggi in ordine

Numerati, con i tre stati che il selettore conosce: i passaggi precedenti sono tracciati solidi, quello in corso si distingue, quelli successivi aspettano.
  1. Ottieni le sorgenti

    Clona il repository e installa le sue dipendenze.

  2. Configura

    Copia l'ambiente di esempio e compila l'indirizzo del database.

  3. Crea il database

    Esegui le migrazioni; questo è il passaggio in corso.

  4. Distribuisci

    Costruisci le risorse e pubblica il rilascio.

Qualsiasi cosa sotto un titolo

Ogni elemento contiene ciò di cui ha bisogno: proprietà, un messaggio, pulsanti. Un'icona sostituisce il punto, e un tono colora il marcatore come colora un marcatore o un blocco.
  1. Ordine effettuato
    14 marzo, 09:41
    Riferimento
    ORD-2026-0142
    Importo
    € 184.00
    Pagamento
    Carta che termina con 4242
  2. Pagamento ricevuto
    14 marzo, 09:42
  3. Spedito
    15 marzo, 16:05
    In ritardo

    Il corriere annuncia un giorno in più.

  4. Consegna

Una storia

Nessun ordine da seguire, solo eventi: punti, una data sotto ogni titolo e un colore di categoria che racconta qualcosa.
  1. Versione 2.0 rilasciata
    2 settembre
  2. Revisionato dal team
    28 agosto
  3. Prima bozza
    12 agosto

Passaggi non ancora decisi

Come sul selettore: un passaggio che dipende da una risposta non ancora data non ha numero e non sposta nessun altro.
  1. Ottieni le sorgenti
  2. Scegli un piano
  3. Dipende dal piano
  4. Distribuisci

Scritto a mano

Il componente è solo un modo di scrivere la forma da un elenco. Le stesse classi scritte nella pagina danno la stessa timeline, con qualsiasi cosa in essa.
  1. Un punto semplice
  2. Un'icona al posto del punto

    Qualsiasi markup, scritto nella pagina.

In vue

La stessa timeline in un albero vue. Ciò che il rametto prende come markup è uno slot scoping lì, quindi un componente può stare sotto il titolo di un elemento.