Welcome to version 0.0.7 of Flexi Timeline, an easy to implement, and well maintained Vue.js component.
You can support this project by giving it a star, or following the author.
❗ ❗ ❗ This is README for FlexiTimeline component ❗ ❗ ❗
Flexi Timeline vue component made by Oliver
⚙ Installation
- npm install flexi-timeline --save
🤔 How to use it?
Module usage
import Vue from 'vue';
import FlexiTimeline from 'flexi-timeline';
Vue.use(FlexiTimeline);
export default {
name: 'yourComponent',
widgets: [
{
title: 'some Title 1',
subTitle: 'Some SubTitle',
description: 'Some Description',
buttonText: 'Some ButtonText'
},
{
title: 'some Title 2',
subTitle: 'Some SubTitle',
description: 'Some Description',
buttonText: 'Some ButtonText'
},
{
title: 'some Title 3',
subTitle: 'Some SubTitle',
description: 'Some Description',
buttonText: 'Some ButtonText'
},
{
title: 'some Title 4',
subTitle: 'Some SubTitle',
description: 'Some Description',
buttonText: 'Some ButtonText'
}
]
}<flexi-timeline
:widgets="widgets"
:widgetsAos="true"
:widgetsAosType="'fade-up'"
:widgetsAosDuration="'1500'"
@button-clicked="someAction"
/>Browser usage
Include the script file, then install the component with Vue.use(FlexiTimeline); e.g.:
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/flexi-timeline/dist/flexi-timeline.min.js"></script>
<script type="text/javascript">
Vue.use(FlexiTimeline);
</script>
❔ Props & event
| Name | Type | Mandatory | Description
| :----- | :------- | :-------- |-------------------------------
| widgets | Array | Yes | List of items as given the sample above
| widgetsAos | Boolean | No | By default this functionality is turned off / true for turning on Animate on Scroll Animation
| widgetsAosType | String | No | Type of the AOS. By default is fade-up animation
| widgetsAosDuration | String | No | Duration of the AOS. By default is 1500 (miliseconds)
| button-clicked | Event | No | Fired an event when the button is clicked