Choose from eight timelines to represent your past to the present.
Currently all timelines are build vertically.
Each timeline controller wraps multiple timelines which each hold a from-to time designation, an event name and a description.
<div data-controller="easy-timeline">...</div>
First we need to define the controller to serve as a container for each timeline.
<div data-controller="easy-timeline">
<div data-easy="timeline" data-easy-timeline-from="2000" data-easy-timeline-to="2010">...</div>
</div>
Next we can define a timeline inside the controller.
Each timeline needs to have a from-to time designation, otherwise it would not be a timeline, would it?
Usually you can use a years and the word 'present'. The time designation should not be too long.
Inside this timeline you can define an event and a description.
<div data-easy="timeline" data-easy-timeline-from="2000" data-easy-timeline-to="2010">
<div data-easy="event">School of witchcraft</div>
<div data-easy="desc">Mastered the conjuring spell.</div>
</div>
Note: Try to keep the event name as compact as possible.
Type: String (keywords separated by a dash)
The first keyword defines the template, the second defines the main color, and the third defines the color scheme.
Default: 'one-dodgerblue-dark'
<div data-controller="easy-timeline" data-easy-timeline-template-value="one-dodgerblue-dark">...</div>Type: String
You can set the text color, primarily for the description.
The value can be a CSS color name or an HTML hex code (e.g. #9C7C19).
Default: 'white'
Type: String
Easy automatically determines some parts of the color scheme.
For finer control, specific parts can be forced to use a defined color.
Note: Not all parts and templates support this option.
Type: String
Works the same way as lightColor, but is used for the dark color scheme.