Demo

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

| Property name | Type | Default | Description | | ------------------- | ------- | --------- | ---------------------------------------------------------------------------------------------- | | items | Array | null | Array of objects to be displayed. Must have at least a content property | | item-selected | Object | {} | Object that is set when it is clicked. Note that clickable prop must be set to true | | item-unique-key | String | '' | Key to set a blue border to the card when it is clicked (clickable prop must be set to true) | | title-attr | String | 'title' | Name of the property inside the objects, that are in the items array, to set the cards title | | title-centered | Boolean | false | Centralizes the cards title | | title-class | String | '' | If you want to set a custom class to the cards title, set it here | | title-substr | String | 18 | Number of characters to display inside the cards title. Above this, will set a '...' mask | | content-attr | String | 'content' | Name of the property inside the objects, that are in the items array, to set the cards content | | content-centered | Boolean | false | Centralizes all the cards content text | | content-class | String | '' | If you want to set a custom class to the cards content, set it here | | content-substr | String | 250 | Number of characters to display inside the cards content. Above this, will set a '...' mask | | min-width | String | '200px' | Min-width of the timeline | | min-height | String | '' | Min-height of the timeline | | timeline-padding | String | '' | Padding of the timeline | | timeline-background | String | '#E9E9E9' | Background color of the whole timeline | | line-color | String | '#03A9F4' | Color of the line inside the timeline | | clickable | Boolean | true | 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.

License

MIT © guastallaigor