Vue-horizontal-timeline: Horizontal timeline component for Vue.js

Vue-horizontal-timeline is a simple horizontal timeline component made with Vue.js (works with Vue 2 & Vue 3).

Demo

Interact with a working Demo on https://codesandbox.io/s/o4o10xynoz

Storybook

Go to https://vue-horizontal-timeline.netlify.com

How to install

npm

$ npm install vue-horizontal-timeline --save

yarn (recommended)

$ yarn add vue-horizontal-timeline

Quick start

Vue.js

You can import in your main.js file

import Vue from "vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";

Vue.use(VueHorizontalTimeline);`

Or locally in any component

`import { VueHorizontalTimeline } from "vue-horizontal-timeline";
// In v0.8+ you don't need the brackets above

export default {
  components: {
    VueHorizontalTimeline,
  },
};

Nuxt.js

You can import as a Nuxt.js plugin

~/plugins/vue-horizontal-timeline.js`

`import Vue from "vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";

Vue.use(VueHorizontalTimeline);

and then import it in your `nuxt.config.js` file

plugins: ["~/plugins/vue-horizontal-timeline.js"];

Basic usage

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

<script>
  export default {
    data() {
      const example1 = {
        title: "Title example 1",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
      };
      const example2 = {
        title: "Title example 2",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
      };
      const example3 = {
        title: "Title example 3",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
      };
      const items = [example1, example2, example3];

      return { items };
    },
  };
</script>

Props

items

Type: Array

Default: null

Description: Array of objects to be displayed. Must have at least a content property

item-selected

Type: Object

Default: {}

Description: Object that is set when it is clicked. Note that clickable prop must be set to true

item-unique-key

Type: String

Default: ‘’

Description: Key to set a blue border to the card when it is clicked (clickable prop must be set to true)

title-attr

Type: String

Default: ‘title’

Description: Name of the property inside the objects, that are in the items array, to set the cards title

title-centered

Type: Boolean

Default: false

Description: Centralizes the cards title

title-class

Type: String

Default: ‘’

Description: If you want to set a custom class to the cards title, set it here

title-substr

Type: String

Default: 18

Description: Number of characters to display inside the cards title. Above this, will set a '...' mask

content-attr

Type: String

Default: ‘content’

Description: Name of the property inside the objects, that are in the items array, to set the cards content

content-centered

Type: Boolean

Default: false

Description: Centralizes all the cards content text

content-class

Type: String

Default: ‘’

Description: If you want to set a custom class to the cards content, set it here

content-substr

Type: String

Default: 250

Description: Number of characters to display inside the cards content. Above this, will set a '...' mask

min-width

Type: String

Default: ‘200px’

Description: Min-width of the timeline

min-height

Type: String

Default: ‘’

Description: Min-height of the timeline

timeline-padding

Type: String

Default: ‘’

Description: Padding of the timeline

timeline-background

Type: String

Default: '#E9E9E9’

Description: Background color of the whole timeline

line-color

Type: String

Default: '#03A9F4’

Description: Color of the line inside the timeline

clickable

Type: Boolean

Default: true

Description: Makes the card clickable that returns the object

You can also change the step color and the style of each item using the stepCssClass and boxCssClass attributes inside each item:

const example1 = {
  title: "Title example 1",
  content:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
  stepCssClass: 'has-step-green',
  boxCssClass: 'has-color-red'
};

<style>
.has-color-red {
  color: red !important;
}

.has-step-green::after {
  background: green !important;
}
</style>

Development

Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

Fork the project and enter this commands in your terminal

$ git clone https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git
$ cd vue-horizontal-timeline
$ yarn

Storybook

For visual testing, this project contains storybook which you can run by doing the next command

$ yarn storybook

Jest

Before making the PR, if you changed something that needs to be tested, please make the tests inside the tests/unit folder.

To run the tests, you can use the next command

$ yarn test:unit

CSS

All the CSS is at src/assets/css/style.scss

If you make any changes in that file, you will need to run yarn build to build it, because the component uses the minified version at src/assets/css/style.min.css

Commitlint

This project follows the commitlint guidelines, with minor changes.

You can commit using npm run commit to help you with that.

There's a pre-push hook that runs all the unit tests before you can push it.

If an error occurs, you can use the npm run commit:retry command that runs the previous npm run commit that you already filled.