vue-light-timeline

vue-light-timeline

A lightweight timeline components for vue2

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>

Demo

https://sme-fe.github.io/vue-light-timeline/#/

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

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

Attributes

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

items

参数	说明	类型	可选值	默认值
tag	item 标签（可选）	String	--	--
content	item 内容	String	--	--
type	point 类型	String	circle, star	circle
color	point 颜色	String	purple,orange,yellow,or hex colors RGB colors so on...	purple

Contributors

Thanks goes to these wonderful people (emoji key):

hwen 🤔 💻 🎨 📖 💡	luyilin 🤔 💻

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

License

MIT License

Copyright (c) 2017-present, hwen [e-mail]