タイムライン

タイムライン

1つの下に1つ、マーカーで結ばれたもの:手順のステップ、歴史の出来事、実行の段階。それぞれが保持するものは自由 — テキストの行、表、フォーム — そしてその行はそれ全体を下に走り、次のマーカーへと繋がります。

順番にステップ

番号付きで、ステッパーが知っている3つの状態:後ろのステップはしっかり描かれ、現在進行中のものが目立ち、前のものは待っています。
  1. ソースを取得

    リポジトリをクローンし、その依存関係をインストールします。

  2. 設定

    例の環境をコピーし、データベースのアドレスを記入します。

  3. データベースを作成

    マイグレーションを実行します;これが進行中のステップです。

  4. デプロイ

    アセットをビルドし、リリースを公開します。

タイトルの下に何でも

各アイテムは必要なものを保持します — プロパティ、メッセージ、ボタン。アイコンが点を置き換え、トーンがマーカーを色付けします。
  1. 注文が確定しました
    3月14日、09:41
    参照
    ORD-2026-0142
    金額
    € 184.00
    支払い方法
    カード末尾4242
  2. 支払いを受け取りました
    3月14日、09:42
  3. 発送済み
    3月15日、16:05
    遅延中

    運送会社がさらに1日遅れると発表しています。

  4. 配達

歴史

従うべき順序はなく、ただ出来事がある:点、各タイトルの下に日付、何かを伝えるカテゴリの色。
  1. バージョン2.0がリリースされました
    9月2日
  2. チームによるレビュー
    8月28日
  3. 初稿
    8月12日

まだ決まっていないステップ

ステッパーと同様:まだ与えられていない回答に依存するステップは番号を持たず、他のものを動かしません。
  1. ソースを取得
  2. プランを選択
  3. プランに依存
  4. デプロイ

手書き

このコンポーネントはリストから形を描く方法に過ぎません。ページに書かれた同じクラスが同じタイムラインを作り、その中に何かを持ちます。
  1. シンプルな点
  2. 点の代わりにアイコン

    ページに書かれた任意のマークアップ。

Vueで

Vueツリー内の同じタイムライン。小枝がマークアップとして取るものはスコープ付きスロットであり、コンポーネントがアイテムのタイトルの下に立つことができます。