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]
