Vue-timeline

How to install

to install the module you have to follow the next steps:

Using Yarn

yarn add @michaelcastillo/vue-timeline

Using NPM

npm i @michaelcastillo/vue-timeline

Later, you must to add the next code line to the main.js file on your vue project to import the styles.

import "@michaelcastillo/vue-timeline/dist/Timeline.css";

How to use

To use the package on your project, first you have to import the package right on the component where you need it.

import Timeline from '@michaelcastillo/vue-timeline'

Later, to use Timeline:

<Timeline props />

The data wich will be send it to the component must have this structure:

// Structure of data
const data = [{
    title: String,
    date: String,
    text: String,
}]
// Example
const data = [
    {
        title: 'Title 1',
        date: '20-09-2019',
        text: 'Text to describe the event'
    },{
        title: 'Title 1',
        date: '20/2/1996',
        text: 'Text to describe the event'
    }, ...
]

And the rest of the props props it can receive are:

Required props | Name | description | Required | Type | | ---------------------- |:-------------:|:----: | :----: | | data | To send the information to show on timeline | Yes | Array | | dotEnabledColor | color when the event dot is on the center of the screen | no | String | | dotSize | Size of the event dot | no | Number | | lineWidth | Width of the center line | no | Number | | colorLine | Color of the center line | no | String | | dateStyle | Custom styles for date text | no | Json | | descriptionStyle | Custom styles for date text | no | Json | | firstUnderLineColor | First color of the underline used on degrade| no | String | | secondUnderLineColor | Second color of the underline used on degrade | no | String | | underLineStyle | Custom styles for underline | no | Json | | sectionStyle | Custom styles for 'section' (Block of title,date, dot and description) | no | Json | |titleStyle| Custom styles for 'title' | no | Json|

Example

<template>
  <div class="hello">
      <Timeline v-bind:data="data" />
  </div>
</template>

<script>
import Timeline from "@michaelcastillo/vue-timeline";
export default {
  name: "Example",
  components: {
    Timeline
  },
  data: function() {
    return {
      data: [
        {
          date:'20-12-2019',
          title:'Titulo 1',
          text:"Lorem ipsum dolor sit amet."
        },
      ]
    }
  }
}