Press "Enter" to skip to content

Simple Horizontal Timeline Component with Vue.js

Vue Horizontal Timeline is just a simple horizontal timeline component created with Vue.js.

horizontal timeline html template, simple horizontal timeline, horizontal timeline with animation, horizontal timeline js, horizontal timeline examples

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-horizontal-timeline

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

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 horizontal timeline component to the template and select your entries.

<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
}

Simple Horizontal Timeline Component, Vue Horizontal Timeline Plugin/Github


See Demo And Download

Official Website(guastallaigor): Click Here

This superior jQuery/javascript plugin is developed by guastallaigor. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.