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:
|
<<: Implementation of rewrite jump in nginx
>>: Several situations where div is covered by iframe and their solutions
Table of contents Storage Engine Memory Managemen...
This article shares the specific code of JavaScri...
1. Introduction Since pictures take up a lot of s...
Table of contents 1.Nuxt server-side rendering ap...
This article shares the specific code of JavaScri...
vmware workstations starts the virtual machine er...
This article example shares the specific code of ...
The function to be implemented today is the follo...
Usually a CSS selector selects from top to bottom...
What is React React is a simple javascript UI lib...
Table of contents 1. Map accepts any type of key ...
This article example shares the implementation me...
1. Discover the problem © is the copyrigh...
Solution Add position:relative to the parent elem...
Two implementations of Vue drop-down list The fir...