要素タイムラインの実装

要素タイムラインの実装

コンポーネント - タイムライン

基本的な使い方

<div class="block">
  <div class="radio">
    並べ替え:
    <el-radio-group v-model="reverse">
      <el-radio :label="true">逆順</el-radio>
      <el-radio :label="false">ポジティブシーケンス</el-radio>
    </el-ラジオグループ>
  </div>

  <el-timeline :reverse="逆">
    <el-タイムライン項目
      v-for="(アクティビティ、インデックス) アクティビティ内"
      :key="インデックス"
      :timestamp="アクティビティ.timestamp">
      {{アクティビティ.コンテンツ}}
    </el-timeline-item>
  </el-timeline>
</div>

<スクリプト>
  エクスポートデフォルト{
    データ() {
      戻る {
        逆: 真、
        アクティビティ: [{
          内容: 「アクティビティは予定通り開始されました」
          タイムスタンプ: '2018-04-15'
        }, {
          内容: 「審査合格」
          タイムスタンプ: '2018-04-13'
        }, {
          コンテンツ: '正常に作成されました'、
          タイムスタンプ: '2018-04-11'
        }]
      };
    }
  };
</スクリプト>

カスタムノードスタイル

<div class="block">
  <el-タイムライン>
    <el-タイムライン項目
      v-for="(アクティビティ、インデックス) アクティビティ内"
      :key="インデックス"
      :icon="アクティビティアイコン"
      :type="アクティビティタイプ"
      :color="アクティビティ.color"
      :size="アクティビティサイズ"
      :timestamp="アクティビティ.timestamp">
      {{アクティビティ.コンテンツ}}
    </el-timeline-item>
  </el-timeline>
</div>

<スクリプト>
  エクスポートデフォルト{
    データ() {
      戻る {
        アクティビティ: [{
          内容:「アイコンの使用をサポートする」
          タイムスタンプ: '2018-04-12 20:46',
          サイズ: 「大」、
          タイプ: 'プライマリ'、
          アイコン: 'el-icon-more'
        }, {
          内容: 「カスタムカラーをサポート」
          タイムスタンプ: '2018-04-03 20:46',
          色: '#0bbd87'
        }, {
          内容: 「カスタムサイズをサポート」
          タイムスタンプ: '2018-04-03 20:46',
          サイズ: '大きい'
        }, {
          コンテンツ: 'デフォルト スタイル ノード'、
          タイムスタンプ: '2018-04-03 20:46'
        }]
      };
    }
  };
</スクリプト>

カスタムタイムスタンプ

<div class="block">
  <el-タイムライン>
    <el-timeline-item タイムスタンプ="2018/4/12" 配置="トップ">
      <el-card>
        <h4>Github テンプレートを更新する</h4>
        <p>Wang Xiaohu が 2018/4/12 20:46 に投稿</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item タイムスタンプ="2018/4/3" 配置="トップ">
      <el-card>
        <h4>Github テンプレートを更新する</h4>
        <p>王小湖が2018/4/3 20:46に投稿</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item タイムスタンプ="2018/4/2" 配置="トップ">
      <el-card>
        <h4>Github テンプレートを更新する</h4>
        <p>王小湖が2018/4/2 20:46に投稿</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</div>

タイムライン属性

タイムライン項目の属性

タイムラインアイテムスロット

Element Timeline の実装に関するこの記事はこれで終わりです。Element Timeline に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueタイムラインコンポーネントの使い方

<<:  nginx での書き換えジャンプの実装

>>:  div が iframe に覆われるいくつかの状況とその解決策

推薦する

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

複数のフィールドをグループ化するMySQLグループ

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

MySQL累積計算実装方法の詳しい説明

目次序文需要分析MySQL ユーザー変数累積計算にMysqlユーザー変数を使用する要約するこの記事で...

MySQL 外部キー制約の詳細な説明

公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...

Vueはツリーテーブルを実装する

この記事では、ツリーテーブルを実装するためのVueの具体的なコードを例として紹介します。具体的な内容...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

HTML tbody の使用

構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...

組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)

アプリケーション ソフトウェアには通常、次のようなビジネス要件があります。新しいバージョンの APP...

Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプル コード

Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...

ウェブページを作成する際に注意すべき点

--ホームページのバックアップ1.txtテキスト2. 画像をスキャンする3. PSDデザイン原画(A...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

水平スクロールバーを実装する2つの方法の例

序文:プロジェクトの開発中に、1 行にナビゲーション バーが多すぎる場合に水平スクロール バーを実装...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...

MySQL 子テーブルで外部キー制約チェックを無効にする方法

準備する:教師テーブルと生徒テーブルを定義し、生徒テーブルで教師テーブルIDを参照します。テーブルt...