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',
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>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' |
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>
...Example with day and month on title
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>Example with diferent colors
<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>License
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