open-index/open-npm huggingface dataset:
npm package: @michaelcastillo/vue-timeline
Description: ## How to install
Author: Michael Castillo
Latest version: 0.1.7

# 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.

```javascript
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.

```javascript
import Timeline from '@michaelcastillo/vue-timeline'
```

Later, to use Timeline:

```html
<Timeline props />
```

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

```javascript
// 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

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