https://github.com/boussadjra/vueye-timeline
A component based on Vue.js
https://github.com/boussadjra/vueye-timeline
Last synced: 3 days ago
JSON representation
A component based on Vue.js
- Host: GitHub
- URL: https://github.com/boussadjra/vueye-timeline
- Owner: boussadjra
- License: mit
- Created: 2020-07-19T21:45:29.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T23:48:41.000Z (over 3 years ago)
- Last Synced: 2025-08-03T14:52:06.339Z (3 months ago)
- Language: Vue
- Size: 1.21 MB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vueye Timeline
It's a cool and a responsive Vue.js component used to show item set in chronological display.
# Installation
npm i vueye-timeline --save
# Usage
```js
{{item.title}}
{{item.body}}
{{item.year}}
import VueyeTimeline from "VueyeTimeline";
export default {
name: "App",
data: () => ({
items: [
{
title: "Item 1",
body:
"Lorem ipsum, dolor sit amvoluptate sunt eveniet ducimus totam doloribus neque vitae nam quasi atque quisquam similique unde, nemo ipsum molestiae?",
year: 2010,
styleConfig: {
background: "#ffc1bd",
color: "#545454",
dotColor: "#2244e9"
}
},
{
title: "Item 2",
body:
"Lorem ipsum, dolor sit amvoluptate sunt eveniet ducimus totam doloribus neque vitae nam quasi atque quisquam similique unde, nemo ipsum molestiae?",
year: 2014,
styleConfig: {
background: "#e7d8ff",
color: "#545454",
dotColor: "#2244e9"
}
},
{
title: "Item 3",
body:
"Lorem ipsum, dolor sit amvoluptate sunt eveniet ducimus totam doloribus neque vitae nam quasi atque quisquam similique unde, nemo ipsum molestiae?",
year: 2016,
styleConfig: {
background: "#673AB7",
color: "#eee",
dotColor: "#2244e9"
}
},
{
title: "Item 4",
body:
"Lorem ipsum, dolor sit amvoluptate sunt eveniet ducimus totam doloribus neque vitae nam quasi atque quisquam similique unde, nemo ipsum molestiae?",
year: 2019,
styleConfig: {
background: "#CDDC39",
color: "#545454",
dotColor: "#2244e9"
}
}
]
}),
methods: {},
components: {
VueyeTimeline
}
};
#app {
height: 100%;
width: 100%;
padding: 20px;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
pre {
margin-top: 20px;
padding: 10px;
color: #fff;
background: #7e06ad;
}
```
# Demo
[Timeline Demo](https://boussadjra.github.io/vueye-timeline/)
# props and directives
| prop | description | default |
| ----- | ------------------------ | ------- |
| items | the item set provided to | [] |
## items config:
each item could have the following structure :
-**title** : the item title which is shown in bold style
-**body** : the item content.
-**styleConfig** : the item style like background, color and width.
# Slot
**`content`**
Customize the default content display.
**`opposite`**
Define the display and the style of the opposite content.