vue-light-timeline
A lightweight timeline components for vue2
install
yarn add vue-light-timelineif you prefer npm:
npm i vue-light-timelineusage
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 ~~
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
Copyright (c) 2017-present, hwen [email protected]