Simple Horizontal Timeline Component

Install & Download:

# Yarn
$ yarn add vue-horizontal-timeline
# NPM
$ npm install vue-horizontal-timeline --save

Description:

Just a simple horizontal timeline component made with Vue.js.

How to use it:

1. Import and register the component.

import Vue from "vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";
Vue.use(VueHorizontalTimeline);

// locally
import { VueHorizontalTimeline } from "vue-horizontal-timeline";
export default {
  components: {
    VueHorizontalTimeline,
  },
};

2. Add the vue-horizontal-timeline component to the template and define your own entris.

<template>
  <vue-horizontal-timeline :items="items" />
</template>

export default {
  data() {
    const example1 = {
      title: "Title example 1",
      content: "Content 1",
    };
    const example2 = {
      title: "Title example 2",
      content: "Content 2",
    };
    const example3 = {
      title: "Title example 3",
      content: "Content 3",
    };
    const items = [example1, example2, example3];
    return { items };
  },
};

3. Available timeline props.

items: {
  type: Array,
  required: true
},
itemSelected: {
  type: Object,
  default: () => ({})
},
itemUniqueKey: {
  type: String,
  default: ''
},
titleAttr: {
  type: String,
  default: 'title'
},
titleCentered: {
  type: Boolean,
  default: false
},
titleClass: {
  type: String,
  default: ''
},
titleSubstr: {
  type: Number,
  default: 18
},
contentAttr: {
  type: String,
  default: 'content'
},
contentCentered: {
  type: Boolean,
  default: false
},
contentClass: {
  type: String,
  default: ''
},
contentSubstr: {
  type: Number,
  default: 250
},
minWidth: {
  type: String,
  default: '200px'
},
minHeight: {
  type: String,
  default: ''
},
timelinePadding: {
  type: String,
  default: ''
},
timelineBackground: {
  type: String,
  default: ''
},
lineColor: {
  type: String,
  default: '#03A9F4'
},
clickable: {
  type: [String, Boolean],
  default: true
}