Zeitleiste

Zeitleiste

Dinge, die übereinander stehen, jeweils auf einem Marker, verbunden durch eine Linie: die Schritte eines Verfahrens, die Ereignisse einer Geschichte, die Phasen eines Ablaufs. Was jeder enthält, ist frei — eine Textzeile, eine Tabelle, ein Formular — und die Linie zieht sich über das Ganze bis zum nächsten Marker.

Schritte in Reihenfolge

Nummeriert, mit den drei Zuständen, die der Stepper kennt: die Schritte dahinter sind solid gezeichnet, der aktuelle sticht hervor, die nächsten warten.
  1. Quellen abrufen

    Klonen Sie das Repository und installieren Sie dessen Abhängigkeiten.

  2. Konfigurieren

    Kopieren Sie die Beispielumgebung und füllen Sie die Datenbankadresse ein.

  3. Datenbank erstellen

    Führen Sie die Migrationen aus; dies ist der Schritt, der im Gange ist.

  4. Bereitstellen

    Bauen Sie die Assets und veröffentlichen Sie die Version.

Alles unter einem Titel

Jedes Element enthält, was es braucht — Eigenschaften, eine Nachricht, Schaltflächen. Ein Icon ersetzt den Punkt, und ein Farbton färbt den Marker so, wie er einen Marker oder einen Block färbt.
  1. Bestellung aufgegeben
    14. März, 09:41
    Referenz
    ORD-2026-0142
    Betrag
    € 184.00
    Zahlung
    Karte endet auf 4242
  2. Zahlung erhalten
    14. März, 09:42
  3. Versendet
    15. März, 16:05
    Verspätung

    Der Lieferdienst kündigt einen weiteren Tag an.

  4. Lieferung

Eine Geschichte

Kein bestimmter Ablauf, nur Ereignisse: Punkte, ein Datum unter jedem Titel und eine Farbgebung der Kategorie, die etwas erzählt.
  1. Version 2.0 veröffentlicht
    2. September
  2. Vom Team überprüft
    28. August
  3. Erster Entwurf
    12. August

Schritte noch nicht entschieden

Wie beim Stepper: ein Schritt, der von einer noch nicht gegebenen Antwort abhängt, erhält keine Nummer und bewegt keine der anderen.
  1. Quellen abrufen
  2. Wählen Sie einen Plan
  3. Hängt vom Plan ab
  4. Bereitstellen

Handgeschrieben

Die Komponente ist nur eine Möglichkeit, die Form aus einer Liste zu schreiben. Die gleichen Klassen, die auf der Seite geschrieben sind, ergeben die gleiche Zeitleiste, mit allem, was darin ist.
  1. Ein einfacher Punkt
  2. Ein Icon anstelle des Punktes

    Jedes Markup, das auf der Seite geschrieben ist.

In Vue

Die gleiche Zeitleiste in einem Vue-Baum. Was der Zweig als Markup nimmt, ist dort ein Scoped Slot, sodass eine Komponente unter dem Titel eines Elements stehen kann.
v1.0.29