@gerwinov/vue-project-timeline

Vertical timeline to display projects using vue

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@gerwinov/vue-project-timeline
Minified + gzip package size for @gerwinov/vue-project-timeline in KB

Readme

Vue Project-timeline

npm(scoped) npm Github

Installation

npm install @gerwinov/vue-project-timeline --save

Usage

Import in your Vue component..

import VueProjectTimeline from '@gerwinov/vue-project-timeline';

export default {
  components: {
    VueProjectTimeline
  }
}

..and use it

<VueProjectTimeline :projects="projects" />

Props

You can pass the following props to the Vue Project-timeline component:

Prop name Description Type Required Default Value
timelineColor The color of the 1px vertical line next to the years String N #979797
timelineBgColor The background color of the timeline (vertical line + years) String N #99B0A8
selectedBgColor The background color of the selected project card String N #F7B93A
hoverBgColor The background color of a hovered project card String N #FFEDCB
projects The projects to display on the timeline (explained below) Array Y -

Projects syntax

The projects prop expects an Array of Objects. Each object can have the following keys:

Key Description Type Required Rules Default value
title The title of the project String Y - -
subtitle The subtitle of the project String N - -
description The description of the project String N - -
startYear The start year of the project Number Y Between 1900 - 2100 -
endYear The end year of the project Number Y >= start year && <= current year Current year when 0 or null provided
image The location of an image that is displayed with the project String N - -
color The color of the project in the timelne when selected String N - #ffffff

An example projects Array would be the following:

projects: [
  {
    title: 'Client one',
    subtitle: 'Developer',
    description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
    image: `logo.png`,
    startYear: 2014,
    endYear: 2017,
    color: '#4a63e0'
  }
]

Styling

The Vue Project-timeline component uses the styling as present in your project for h1, h2, h3, p elements. These are used on the project cards. You can affect only elements in the Vue Project-timeline component by using #vue-project-timeline in your own CSS, as the whole component is wrapped in a div with that id.

Demo

Click here for a demo

Feature requests

Feature requests on this component are welcome!

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.