
Security News
Vite Releases Technical Preview of Rolldown-Vite, a Rust-Based Bundler
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
timeline-vuejs
Advanced tools
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
FAQs
Minimalist Timeline with VueJS
The npm package timeline-vuejs receives a total of 560 weekly downloads. As such, timeline-vuejs popularity was classified as not popular.
We found that timeline-vuejs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.