vue-light-timeline

A lightweight vue timeline components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-light-timeline
95101.0.35 years ago6 years agoMinified + gzip package size for vue-light-timeline in KB

Readme

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
<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>
``` here is example demo and code

Demo

Hei, let's gonna try it online, have fun Edit vue-light-timeline example

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-contributorsall-contributors specification. Contributions of any kind are welcome!

License

MIT License Copyright (c) 2017-present, hwen