Simple Horizontal Timeline Component with Vue.js

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

Must Read: jQuery Plugin for Creating Historical Timelines Based On Year | YEARLINE

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
}

Props

Property nameTypeDefaultDescription
itemsArraynullAn array of objects is to be displayed. Must have at least a content property
item-selectedObject{}An object that is set when it is clicked. Note that clickable the prop must be set to true
item-unique-keyStringKey to set a blue border to the card when it is clicked (clickable the prop must be set to true)
title-attrString‘title’Name of the property inside the objects, that are in the items array, to set the title of the card
title-centeredBooleanfalseCentralizes the title of the card
title-classStringIf you want to set a custom class to the title of the card, set it here
title-substrString18A number of characters to display inside the title of the card. Above this, will set a ‘…’ mask
content-attrString‘content’Name of the property inside the objects, that are in the items array, to set the card’s content
content-centeredBooleanfalseCentralizes all the cards content text
content-classStringIf you want to set a custom class to the card’s content, set it here
content-substrString250A number of characters to display inside the card content. Above this, will set a ‘…’ mask
min-widthString‘200px’Min-width of the timeline
min-heightStringMin-height of the timeline
timeline-paddingStringPadding of the timeline
timeline-backgroundString‘#E9E9E9’The background color of the whole timeline
line-colorString‘#03A9F4’Color of the line inside the timeline
clickableBooleantrueMakes the card clickable that returns the object

Read More –

A jQuery Horizontal Scrollable Timeline Plugin | jTimeline
Github Timeline Generator with HTML, CSS, and JQuery


See Demo And Download

Official Website(guastallaigor): Click Here

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

Share