vue-light-timeline

vue-light-timeline

A lightweight timeline components for vue2

!Travis branch
!download
!version
!license

install

``shell
yarn add vue-light-timeline
`

if you prefer npm:

`shell
npm i vue-light-timeline
`

usage

`js
import Vue from 'vue';
import LightTimeline from 'vue-light-timeline';

Vue.use(LightTimeline);
`

`html


`
- slot

Or you can pass slots for each part of the timeline:

`html


``
here is example demo and code

Demo

- Demo1
- Demo2 slot

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


$3

docs

$3

Attribute | Description | Type | Accepted values | Default
----|------|----|----|----
items | timeline content data | Array | -- | --

$3

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

$3

- tag: slot='tag' replace the default tag
- symbol: slot='symbol' replace the default icon
- content: slot='content' replace the default content

$3

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

$3

参数 | 说明 | 类型 | 可选值 | 默认值
----|------|----|----|----
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

$3

- 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

MIT License

Copyright (c) 2017-present, hwen