Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pablosirera/timeline-vuejs
Minimalist Timeline ⏳ with VueJS 💚
https://github.com/pablosirera/timeline-vuejs
frontend npm timeline vue
Last synced: about 1 month ago
JSON representation
Minimalist Timeline ⏳ with VueJS 💚
- Host: GitHub
- URL: https://github.com/pablosirera/timeline-vuejs
- Owner: pablosirera
- License: mit
- Created: 2018-09-04T18:01:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T16:16:33.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T15:08:49.340Z (7 months ago)
- Topics: frontend, npm, timeline, vue
- Language: Vue
- Homepage: https://codesandbox.io/s/n094ypklvl
- Size: 2.19 MB
- Stars: 123
- Watchers: 4
- Forks: 22
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- project-awesome - pablosirera/timeline-vuejs - Minimalist Timeline ⏳ with VueJS 💚 (Vue)
README
Timeline Vuejs
[](https://www.npmjs.com/package/timeline-vuejs)
[](https://www.npmjs.com/package/timeline-vuejs)
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ftimeline-vuejs)
[Demo Timeline Vue](https://codesandbox.io/s/n094ypklvl)
## 📦 Install
```
npm install timeline-vuejs --save
```
```js
// main.js
import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'
```
```html
// component.vue
import Timeline from 'timeline-vuejs'
export default {
// ...
components: {
Timeline
}
// ...
}
```
## 🔧 Usage
```html
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.'
}
]
})
}
```
## 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
```html
...
```
## Example with unique year
```html
...
```
## Example with day and month on title
If you want to show day and month on specific items, send true on prop `showDayAndMonth`
```html
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.'
}
]
})
}
```
## Example with diferent colors
```html
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',
}
]
})
}
```
## License
**timeline-vuejs** © [Pablo Sirera](https://pablosirera.com), released under the [MIT](https://github.com/pablosirera/timeline-vuejs/blob/master/LICENSE) License.
Authored and maintained by Pablo Sirera with help from [contributors](https://github.com/pablosirera/timeline-vuejs/contributors).
> [pablosirera.com](https://pablosirera.com) · GitHub [Pablo Sirera](https://github.com/pablosirera) · Twitter [@pablosirera](https://twitter.com/pablosirera)