Element Timeline implementation

Element Timeline implementation

Components - Timeline

Basic usage

<div class="block">
  <div class="radio">
    Sorting:
    <el-radio-group v-model="reverse">
      <el-radio :label="true">Reverse order</el-radio>
      <el-radio :label="false">Positive sequence</el-radio>
    </el-radio-group>
  </div>

  <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        reverse: true,
        activities: [{
          content: 'The activity started as scheduled',
          timestamp: '2018-04-15'
        }, {
          content: 'Passed review',
          timestamp: '2018-04-13'
        }, {
          content: 'Created successfully',
          timestamp: '2018-04-11'
        }]
      };
    }
  };
</script>

Custom node styles

<div class="block">
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        activities: [{
          content: 'Support the use of icons',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: 'Support custom colors',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: 'Support custom size',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: 'Default style node',
          timestamp: '2018-04-03 20:46'
        }]
      };
    }
  };
</script>

Custom timestamp

<div class="block">
  <el-timeline>
    <el-timeline-item timestamp="2018/4/12" placement="top">
      <el-card>
        <h4>Update Github template</h4>
        <p>Wang Xiaohu submitted on 2018/4/12 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="top">
      <el-card>
        <h4>Update Github template</h4>
        <p>Wang Xiaohu submitted on 2018/4/3 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/2" placement="top">
      <el-card>
        <h4>Update Github template</h4>
        <p>Wang Xiaohu submitted on 2018/4/2 20:46</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</div>

Timeline Attributes

Timeline-item Attributes

Timeline-Item Slot

This is the end of this article about the implementation of Element Timeline. For more relevant Element Timeline content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to use the vue timeline component

<<:  Implementation of rewrite jump in nginx

>>:  Several situations where div is covered by iframe and their solutions

Recommend

Faint: "Use web2.0 to create standard-compliant pages"

Today someone talked to me about a website develo...

Design Story: The Security Guard Who Can't Remember License Plates

<br />In order to manage the vehicles enteri...

Initial settings after installing Ubuntu 16 in the development environment

The office needs Ubuntu system as the Linux devel...

A brief introduction to MySQL storage engine

1. MySql Architecture Before introducing the stor...

Talk about nextTick in Vue

When the data changes, the DOM view is not update...

Detailed explanation of the practical application of centos7 esxi6.7 template

1. Create a centos7.6 system and optimize the sys...

Talk about how to identify HTML escape characters through code

Occasionally you'll see characters such as &#...

A detailed introduction to the basics of Linux scripting

Table of contents 1. Script vim environment 2. Ho...

Implementation of services in docker accessing host services

Table of contents 1. Scenario 2. Solution 3. Conc...

Detailed explanation of MySql automatic truncation example

Detailed explanation of MySql automatic truncatio...

Simple example of adding and removing HTML nodes

<br />Simple example of adding and removing ...

How to get datetime data in mysql, followed by .0

The data type of MySQL is datetime. The data stor...