# timeline-sequence-widget
This is an abstracted timeline sequence widget component. Originally from the Over The Dose Website.
# Example
<TimelineSequenceWidget
:options="{
debug : false,
width : '100%',
height : '270px',
header : '<h2>Widget 2 (Slide)</h2>',
subheader : '<p>Click on the stops below to see the timeline</p>',
transition : 'slide',
startKey : 0,
spriteWrap : {
size : '150px',
color : 'white',
x : '50%',
y : '100px'
},
keys : [
{
sprite : {
src : '/sprites/widget-2-1.png',
size : '60px',
x : '50%',
y : '40px'
},
message : 'On average, the life expectancy of a smoker is 10 years less than a nonsmoker.'
},
{
sprite : {
src : '/sprites/widget-2-2.png',
size : '60px',
x : '50%',
y : '40px'
},
message : 'Cigarette smoke contains more than 7,000 chemicals, 70 of which are known to cause cancer.'
},
{
sprite : {
src : '/sprites/widget-2-3.png',
size : '65px',
x : '53%',
y : '50px'
},
message : 'For every person who dies from a smoking-related disease, 20 more people suffer from a smoking-related illness.'
},
{
sprite : {
src : '/sprites/widget-2-4.png',
size : '95px',
x : '45%',
y : '90px'
},
message : 'Smoking and tobacco use causes more than 5 million deaths per year worldwide. Current trends show that this will increase to more than 8 million deaths annually by 2030.'
}
],
timeline : {
background : 'black',
highlightColor : 'red',
dots : {
size : '10px',
top : '1px',
border : '5px solid black',
background : 'white',
highlightColor : 'red'
}
}
}"
/>
<script>
import { TimelineSequenceWidget } from "@rescue/vue-modules";
export default {
components: {
TimelineSequenceWidget
}
}
</script>
# Installation
Install @rescue/vue-modules.
npm install @rescue/vue-modules
You also need node-sass, sass-loader and gsap
npm install node-sass sass-loader gsap
# Usage
The easiest way to start using this component is by copying the following premade component with this data model:
<TimelineSequenceWidget
:options="{
debug : false,
width : '100%',
height : '300px',
header : '',
subheader : '',
transition : 'slide',
startKey : 0,
spriteWrap : {
size : '150px',
color : 'white',
x : '50%',
y : '100px'
},
keys : [
{
sprite : {
src : '',
size : '60px',
x : '50%',
y : '40px'
},
message : ''
},
{
sprite : {
src : '',
size : '60px',
x : '50%',
y : '40px'
},
message : ''
},
{
sprite : {
src : '',
size : '65px',
x : '53%',
y : '50px'
},
message : ''
},
{
sprite : {
src : '',
size : '95px',
x : '45%',
y : '90px'
},
message : ''
}
],
timeline : {
background : 'black',
highlightColor : 'red',
dots : {
size : '10px',
top : '1px',
border : '5px solid black',
background : 'white',
highlightColor : 'red'
}
}
}"
/>
# Source Code
← drawer tapper-widget →