Vue Horizontal Timeline

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

Inspiration

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

$ npm install vue-horizontal-timeline --save

$ yarn add vue-horizontal-timeline

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

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"];

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

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>

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

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

$ yarn storybook

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

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

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.

MIT © guastallaigor