Contents
Description:
Are you searching for horizontal timeline component for Vue.js? If yes, then you are at the right place. Here we are sharing with you a component, which is simple to use and lightweight in the size, will help you in creating horizontal timeline for your project.
How to install and use it?
Installation and usage are very simple. You just need to follow the below instructions.
1. Install the component in your project with npm or yarn.
#npm
npm install vue-horizontal-timeline –save
#yarn
yarn add vue-horizontal-timeline
2. Import the required components in you file.
import Vue from “vue”;
import VueHorizontalTimeline from “vue-horizontal-timeline”;
3. Register the component.
Vue.use(VueHorizontalTimeline);
4. Usage.
<template>
<div id=”app”><vue-horizontal-timeline :items=”items” /></div>
</template>
<script>
export default {
name: “App”,
data: () => ({
items: [
{
title: “1939”,
content:
“Content 1”
},
{
title: “1945”,
content:
“Content 2”
},
{
title: “1947”,
content:
“Content 3”
},
{
title: “1954”,
content:
“Content 4”
}
]
})
};
</script>
<style>
#app {
font-family: “Avenir”, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
The post Simple and clean horizontal timeline component for Vue.js appeared first on Lipku.com.