vue-light-timeline

A lightweight timeline components for vue2

install

yarn add vue-light-timeline

if you prefer npm:

npm i vue-light-timeline

usage

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

• Demo1
• Demo2 slot

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

MIT License

Copyright (c) 2017-present, hwen [email protected]