0.1.2 • Published 6 years ago
vue-simple-timeline v0.1.2
vue-simple-timeline
A lightweight timeline components for vue2
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 ~~
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 | -- | -- |
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 specification. Contributions of any kind are welcome!
License
Copyright (c) 2017-present, hwen hwenleung@gmail.com