Timeline Vuejs
📦 Install
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>🔧 Usage
<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', dataTimeline: [ { 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>Example with order
<template> <Timeline :timeline-items="timelineItems" :message-when-no-items="messageWhenNoItems" order="desc"/> </template> ...Example with unique year
<template> <Timeline :timeline-items="timelineItems" :message-when-no-items="messageWhenNoItems" :unique-year="true" order="asc"/> </template> ...Available props
| 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' |
