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
<template> <div id="app"> <VueyeTimeline :items="items"> <template v-slot:content="{item}"> <h2>itemtitle</h2> <div>itembody</div> </template> <template v-slot:opposite="{item}"> <h1 :style="{color:item.styleConfig.background}">itemyear</h1> </template> </VueyeTimeline> </div></template> </VueyeTimeline></div></template> <script>; name: "App" 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 ;</script> <style lang="scss">#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;</style>
Demo
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.