0.0.54 • Published 4 years ago
vuejs-editable-timeline-vuejs v0.0.54
📦 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
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>
0.0.54
4 years ago
0.0.51
4 years ago
0.0.52
4 years ago
0.0.53
4 years ago
0.0.50
4 years ago
0.0.49
4 years ago
0.0.41
4 years ago
0.0.42
4 years ago
0.0.43
4 years ago
0.0.44
4 years ago
0.0.45
4 years ago
0.0.46
4 years ago
0.0.47
4 years ago
0.0.48
4 years ago
0.0.40
4 years ago
0.0.39
4 years ago
0.0.38
4 years ago
0.0.37
4 years ago
0.0.36
4 years ago
0.0.35
4 years ago
0.0.30
4 years ago
0.0.31
4 years ago
0.0.32
4 years ago
0.0.33
4 years ago
0.0.34
4 years ago
0.0.26
4 years ago
0.0.27
4 years ago
0.0.28
4 years ago
0.0.29
4 years ago
0.0.25
4 years ago
0.0.20
4 years ago
0.0.21
4 years ago
0.0.22
4 years ago
0.0.23
4 years ago
0.0.24
4 years ago
0.0.16
4 years ago
0.0.17
4 years ago
0.0.18
4 years ago
0.0.19
4 years ago
0.0.13
4 years ago
0.0.14
4 years ago
0.0.15
4 years ago
0.0.12
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago