github.com/x10sv/bs-vue-timeline

vue-bootstrap-timeline

Table of contents

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

General info

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

Future Plans:

• Add a package.json and make it usable in other projects using npm and yarn
• Make duration separator between years and months a prop,
• Make colors configurable,
• Fix display on smaller devices,
• Make it possible to use SVGs instead of images.
• Customize the location of the images

Technologies

This project was made with:

Project	Status	Documentation
vue		https://vuejs.org/
bootstrap-vue		https://bootstrap-vue.js.org/
moment		https://momentjs.com/

Demo

You could check Demo in a codesandbox.

Installation

This is not yet implemented!

npm install vue-bootstrap-timeline --save

or

yarn add vue-bootstrap-timeline

Usage

In your .vue component:

<script>
  import Timeline from 'vue-bootstrap-timeline'

  export default {
    // ...
    components: {
      Timeline
    }
    // ...
  data: () => ({
    timelineItems: [
      {
        from: new Date(2014,10),
        to: new Date(),
        title: 'Company Name 1',
        subtitle: 'System Engineer',
        content: 'lorem ipsum dolor sin amet',
        image: 'company1-logo.png'
      },
        {
        from: new Date(2009,5),
        to: new Date(2013,5),
        title: 'Company Name 2',
        subtitle: 'Programmer',
        content: 'lorem ipsum dolor sin amet',
        image: 'company2-logo.png'
      },
      {
        from: new Date(2000,3),
        to: new Date(2008,12),
        title: 'Company Name 3',
        subtitle: 'Internship / Volunteer',
        content: 'lorem ipsum dolor sin amet',
        image: 'company3-logo.png'
      },
    ]
  })
};
</script>

then, in your <template>:

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

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-present, Angelin Calu