@michaelcastillo/vue-timeline

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."
        },
      ]
    }
  }
}