npm install timeline-vuejs --save // main.js import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'// component.vue <script> import Timeline from 'timeline-vuejs' export default { // ... components: { Timeline } // ... } </script><template> <Timeline :timeline-items="timelineItems" :message-when-no-items="messageWhenNoItems"/> </template> <script> import Timeline from 'timeline-vuejs' export default { components: { Timeline } data: () => ({ messageWhenNoItems: 'There are not items', timelineItems: [ { from: new Date(2018, 7), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.' }, { from: new Date(2016, 1), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.' }, { from: new Date(2016, 6), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.' }, { from: new Date(2012, 1), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.' } ] }) } </script>| Props | Type | Default | Description |
|---|---|---|---|
| timelineItems | Array | [ ] | Items value of the timeline |
| messageWhenNoItems | String | Message when there are no items | |
| colorDots | String | #2da1bf | Color of the dots |
| uniqueTimeline | Boolean | false | If true, the timeline isn't separated |
| uniqueYear | Boolean | false | If true, the timeline isn't separated when is the same year |
| order | String (desc or asc) | Type of order | |
| dateLocale | String | Locale of the browser | Type of locale, for example 'en-US' |
<template> <Timeline :timeline-items="timelineItems" :message-when-no-items="messageWhenNoItems" order="desc"/> </template> ...<template> <Timeline :timeline-items="timelineItems" :message-when-no-items="messageWhenNoItems" :unique-year="true" order="asc"/> </template> ...If you want to show day and month on specific items, send true on prop showDayAndMonth
<script> export default { data: () => ({ timelineItems: [ { from: new Date(2017, 5, 2), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.', showDayAndMonth: true }, { from: new Date(2017, 8, 9), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' } ] }) } </script><script> export default { data: () => ({ timelineItems: [ { from: new Date(2017, 5, 2), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.', color: '#e74c3c' }, { from: new Date(2017, 8, 9), title: 'Name', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.', color: '#2ecc71', } ] }) } </script>timeline-vuejs © Pablo Sirera, released under the MIT License.
Authored and maintained by Pablo Sirera with help from contributors.
pablosirera.com · GitHub Pablo Sirera · Twitter @pablosirera