Bootstrap-Vue Timeline v0.1.4

Table of contents

• General info
• Technologies
• Demo
• Installation
• Usage
• Props
• Compatibility
• Contributing
• License

General info

This is a simple timeline alternative build using vue, boostrap-vue and moment.js

We've also pulled in css-vars-ponyfill to improve cross-browser compatibility.

Future Plans:

• Customize the location of the images,
• Create separator between sections in timeline (for example workplaces and studies),
• Make it possible to use SVGs instead of images.
• Maybe add animations?

Technologies

This project was made with:

Project	Status	Documentation
vue		https://vuejs.org/
bootstrap-vue		https://bootstrap-vue.js.org/
moment		https://momentjs.com/
css-vars-ponyfill		https://jhildenbiddle.github.io/css-vars-ponyfill/

Demo

You can see it in action here. You could check here how the Demo was implemented in the codesandbox.

Installation

npm i bs-vue-timeline --save

or

yarn add bs-vue-timeline

Usage

In your .vue component:

<script>
  import VueTimeline from 'bs-vue-timeline'

  export default {
    // ...
    components: {
      VueTimeline
    }
    // ...
  data: () => ({
    timelineItems: [
      {
        from: new Date(2014,10),
        to: new Date(),
        title: 'Company Name 1',
        subtitle: 'System Engineer',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        image: 'company1-logo.png'
      },
        {
        from: new Date(2009,5),
        to: new Date(2013,5),
        title: 'Company Name 2',
        subtitle: 'Programmer',
        content: '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.',
        image: 'company2-logo.png'
      },
      {
        from: new Date(2000,3),
        to: new Date(2008,12),
        title: 'Company Name 3',
        subtitle: 'Internship / Volunteer',
        content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        image: 'company3-logo.png'
      },
    ]
  })
};
</script>

then, in your <template>:

<VueTimeline :timeline-items="timelineItems" />

To customize the colors you have can change the following properties, which could be overwritten like in the example below:

<style>
  :root {
    --bvt-primary-color: #0288d1;
    --bvt-bg-secondary: #ddd;
    --bvt-timeline-color: #aaa;
    --bvt-timeline-text-color: #333;
    --bvt-border-color: var(--bvt-timeline-color);
    --bvt-duration-color: var(--bvt-primary-color);
    --bvt-box-shadow1: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
  }
</style>

Props

The following props can be passed to the component:

Prop	Description	Type	Default
separator	Used to separate the years and months in calculated duration	String	", "
:individualClasses	Will add (additional) individual classes for all records so that the user can further customize entries. The classes will be .bvt-cust-'{order number}, e.g.: .bvt-custom-1	Boolean	false

Important: Vue requires you to pass numbers and boolean values using v-bind, any props that require a number or bool should use v-bind: or the colon (:) shorthand.

Props Example:

<VueTimeline
  :individualClasses="true"
  separator=" & "
  :timeline-items="timelineItems"
/>

Compatibility

Compatibility accross browsers was not checked thoroughly, but expected browser compatibility is shown below.

IE	Edge	Chrome	Firefox	Safari
9+	12+	19+	6+	6+

If you encounter any problems please open an issue or submit a pull request.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to test changes appropriately.

License

MIT

Copyright (c) 2019, Angelin Calu