Simple Horizontal Timeline Component

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
}

Preview:

Simple Horizontal Timeline Component

Changelog:

v0.10.0 (08/17/2021)

  • two new fields on the timeline item to add custom styles
  • remove style tag that added two new classes

v0.9.1 (05/13/2021)

  • feat: add ability to have gaps between steps

v0.8.0 (03/04/2021)

  • Bugfix

Download Details:

Author: guastallaigor

Live Demo: https://vue-horizontal-timeline.netlify.com/

Download Link: https://github.com/guastallaigor/vue-horizontal-timeline/archive/master.zip

Official Website: https://github.com/guastallaigor/vue-horizontal-timeline

Install & Download:

# Yarn
$ yarn add vue-horizontal-timeline

# NPM
$ npm install vue-horizontal-timeline --save

You Might Be Interested In:

Add Comment