Timeline demo

Set up controller

The first example shows how to set up the controller and include a header with a description.

Important: Each team controller must contain at least one timeline; otherwise, the code will not compile.

<div data-controller="easy-timline">
        <div data-easy="header">My awesome history</div>
        <div data-easy="subHeader">Dive deep into my chronicles to see how I became the best mercenary of our time!</div>
</div>

Timelines

For now, we will add one timeline with the minimal required information.

IMPORTANT: Each timeline requires a from-to time designation and an event. The description is optional.

<div data-controller="easy-timeline">
        <div data-easy="header">My awesome history</div>
        <div data-easy="subHeader">Dive deep into my chronicles to see how I became the best mercenary of our time!</div>
        <div data-easy="timeline" data-easy-timeline-from="2000" data-easy-timeline-to="2010">
            <div data-easy="event">School of witchcraft</div>
        </div>
</div>

To complete the timeline, add a short description.

<div data-controller="easy-timeline">
        <div data-easy="header">My awesome history</div>
        <div data-easy="subHeader">Dive deep into my chronicles to see how I became the best mercenary of our time!</div>
        <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>
</div>

Let's complete the history by adding a few more timelines.

<div data-controller="easy-timeline">
        <div data-easy="header">My awesome history</div>
        <div data-easy="subHeader">Dive deep into my chronicles to see how I became the best mercenary of our time!</div>
        <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>
        <div data-easy="timeline" data-easy-timeline-from="2010" data-easy-timeline-to="2021">
            <div data-easy="event">Wizard of a mercenary group</div>
            <div data-easy="desc">Protecting my mates against monsters and dragons.</div>
        </div>
        <div data-easy="timeline" data-easy-timeline-from="2021" data-easy-timeline-to="present">
            <div data-easy="event">Leader of the Ragnarok Raiders</div>
            <div data-easy="desc">You pay we slay!</div>
        </div>
</div>

Styling

There are several ways to customize the timeline section.

Text color

<div data-controller="easy-timeline" data-easy-timeline-text-color-value="red" >
    ...
</div>

Color schemes

You can define colors for both the light and dark schemes.

Note: In some cases, you may need to set both to achieve proper contrast.

<div data-controller="easy-timeline" data-easy-timeline-light-color-value="whitesmoke" >
    ...
</div>

Templates

Below are examples of all available templates in the light scheme with animations enabled.

Template One

<div data-controller="easy-timeline" data-easy-timeline-template-value="one-dodgerblue-light">
    ...
</div>

Template Two

<div data-controller="easy-timeline" data-easy-timeline-template-value="two-dodgerblue-light">
    ...
</div>

Template Three

<div data-controller="easy-timeline" data-easy-timeline-template-value="three-dodgerblue-light">
    ...
</div>

Template Four

<div data-controller="easy-timeline" data-easy-timeline-template-value="four-dodgerblue-light">
    ...
</div>

Template Five

<div data-controller="easy-timeline" data-easy-timeline-template-value="five-dodgerblue-light">
    ...
</div>

Template Six

<div data-controller="easy-timeline" data-easy-timeline-template-value="six-dodgerblue-light">
    ...
</div>

Template Seven

<div data-controller="easy-timeline" data-easy-timeline-template-value="seven-dodgerblue-light">
    ...
</div>

Template Eight

<div data-controller="easy-timeline" data-easy-timeline-template-value="eight-dodgerblue-light">
    ...
</div>