A lightweight and mobile-friendly timeline component for Vue.js app.

Date _Time

Documentation

vue-light-timeline

A lightweight timeline components for vue2

Travis branch download version license

install

yarn add vue-light-timeline

if you prefer npm:

npm i vue-light-timeline

usage

import Vue from 'vue'; import LightTimeline from 'vue-light-timeline';  Vue.use(LightTimeline);
<template>   <light-timeline :items='items'></light-timeline> </template> <script> const theme = 'red'; export default {   data () {     return {       items: [         {           tag: '2018-01-12',           content: 'hallo'         },         {           tag: '2018-01-13',           color: '#dcdcdc',           type: 'circle',           content: 'world'         },         {           type: 'star',           tag: '2018-01-14',           htmlMode: true,           content: `<div style="color: ${theme};"> =v = </div>`         }       ]     }   } } </script>
  • slot

Or you can pass slots for each part of the timeline:

<template>   <light-timeline :items='items'>     <template slot='tag' slot-scope='{ item }'>       {{item.date}}     </template>     <template slot='symbol' slot-scope='{ item }'>       <div class="my_icon_class"><i :class="item.class"></i><div>     </template>     <template slot='content' slot-scope='{ item }'>       {{item.content}}     </template>   </light-timeline> </template> <script> export default {   data () {     return {       items: [         {           tag: '2018-01-12',           content: 'hallo',           class: 'fas fa-star'         },         {           tag: '2018-01-13',           content: 'world',           class: 'far fa-star'         },         {           tag: '2018-01-14',           content: 'other',           class: 'fas fa-star'         }       ]     }   } } </script>

here is example demo and code

Demo

Hei, let's gonna try it online, have fun ~~

Edit vue-light-timeline example

demo screenshot

许昕

docs

Attributes

Attribute Description Type Accepted values Default
items timeline content data Array -- --

items

Attribute Description Type Accepted values Default
tag item tag String -- --
content item content String -- --
htmlMode output real HTML as content Boolean -- false
type point type String circle, star circle
color point color String purple,orange,yellow,or hex colors RGB colors so on... purple

slot

  • tag: slot='tag' replace the default tag
  • symbol: slot='symbol' replace the default icon
  • content: slot='content' replace the default content

Attributes

参数 说明 类型 可选值 默认值
items timeline 需要展示的数据 Array -- --

items

参数 说明 类型 可选值 默认值
tag item 标签(可选) String -- --
content item 内容 String -- --
htmlMode 是否HTML字串 Boolean -- false
type point 类型 String circle, star circle
color point 颜色 String purple,orange,yellow,or hex colors RGB colors so on... purple

slot 插槽

  • tag: slot='tag' 替换原先的标签
  • symbol: slot='symbol' 替换原先的图标
  • content: slot='content' 替换原先的内容

Contributors

Thanks goes to these wonderful people (emoji key):


hwencc

💻 🤔 💡 📖

luyilin

💻 🤔

vratojr

💻 🤔 📖

This project follows the [all-contributors][all-contributors] specification. Contributions of any kind are welcome!

License

MIT License

Copyright (c) 2017-present, hwen [email protected]


You May Also Like