0.1.2 • Published 6 years ago

vue-simple-timeline v0.1.2

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

vue-simple-timeline

A lightweight timeline components for vue2

Travis branch download version license

install

yarn add vue-simple-timeline

if you prefer npm:

npm i vue-simple-timeline

usage

import Vue from 'vue';
import SimpleTimeline from 'vue-simple-timeline';

Vue.use(SimpleTimeline);
<template>
  <simple-timeline :items='items'></simple-timeline>
</template>
<script>
export default {
  data () {
    return {
      items: [
        {
          tag: '2018-01-12',
          content: 'Hello. You can use <b>FULL</b> HTML here, be sure to sanitize<br/>if you are using user input!',
          footer: 'Stuff you want to appear in the footer'
        },
        {
          tag: '2018-01-13',
          color: '#dcdcdc',
          type: 'circle',
          content: 'world'
        },
        {
          type: 'star',
          tag: '2018-01-14',
          content: '=v ='
        }
      ]
    }
  }
}
</script>

Demo

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

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

Edit vue-light-timeline example

demo screenshot

docs

Attributes

AttributeDescriptionTypeAccepted valuesDefault
itemstimeline content dataArray----

items

AttributeDescriptionTypeAccepted valuesDefault
tagitem tagString----
contentitem contentString----
typepoint typeStringcircle, starcircle
colorpoint colorStringpurple,orange,yellow,or hex colors RGB colors so on...purple

Attributes

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

items

参数说明类型可选值默认值
tagitem 标签(可选)String----
contentitem 内容String----
typepoint 类型Stringcircle, starcircle
colorpoint 颜色Stringpurple,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 specification. Contributions of any kind are welcome!

License

MIT License

Copyright (c) 2017-present, hwen hwenleung@gmail.com