Skip to content

x10sv/bs-vue-timeline

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bootstrap-Vue Timeline v0.1.4

GitHub issues GitHub license

Table of contents

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 vue-status https://vuejs.org/
bootstrap-vue bootstrap-vue-status https://bootstrap-vue.js.org/
moment moment-status https://momentjs.com/
css-vars-ponyfill css-vars-ponyfill-status 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