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

Detailed explanation of memory management of MySQL InnoDB storage engine

Table of contents Storage Engine Memory Managemen...

JavaScript to implement slider verification code

This article shares the specific code of JavaScri...

Use CSS to implement special logos or graphics

1. Introduction Since pictures take up a lot of s...

A brief discussion on four solutions for Vue single page SEO

Table of contents 1.Nuxt server-side rendering ap...

JavaScript to implement checkbox selection or cancellation

This article shares the specific code of JavaScri...

vue+springboot realizes login function

This article example shares the specific code of ...

Detailed explanation of how to use the calendar plugin implemented in Vue.js

The function to be implemented today is the follo...

Implementation of CSS child element selection parent element

Usually a CSS selector selects from top to bottom...

Teach you how to implement a react from html

What is React React is a simple javascript UI lib...

When to use Map instead of plain JS objects

Table of contents 1. Map accepts any type of key ...

Detailed usage of Vue more filter widget

This article example shares the implementation me...

Implementation of positioning CSS child elements relative to parent elements

Solution Add position:relative to the parent elem...

Comparison of two implementation methods of Vue drop-down list

Two implementations of Vue drop-down list The fir...