Skip to content

Latest commit

 

History

History
149 lines (125 loc) · 3.48 KB

readme.MD

File metadata and controls

149 lines (125 loc) · 3.48 KB

Timeline

Project Overview

About TimelineTS is a TypeScript library designed to simplify the creation and management of interactive timelines in web applications. It provides a flexible and customizable timeline component, allowing developers to seamlessly integrate timelines into their projects.

Table of Contents

Usage

To integrate this timeline library into your project, follow these simple steps:

  1. Include the Library Files:

    Add the library's JavaScript and CSS files to your project.

    <!-- Add this to the <head> of your HTML file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shoaibn98/Timeline/Timeline.min.css">
<script src="https://cdn.jsdelivr.net/gh/shoaibn98/Timeline/Timeline.min.js"></script>

  2. Initialize the Timeline: make an empty div tag with Timeline_Timeline class name and define some id for this Elements. You have to give this id as targetId to your data Option. In your JavaScript file, create an instance of the timeline and customize it according to your needs.

        <div class="Timeline_Timeline" id="myTimeline" >
    </div>
     
const option={
        targetId: "myTimeline", // *required : ID of target div elements
        width: 400, // *required : to set Total width of timeline
        offset: 150, // *required : to set distance between each Event 
        timeline: "arrow_reverse", // *required : style of Timeline
        data: [  //*required : data to show on timeline
            ["2021", "Old Event", "Description"],
            ["2024", "current Event", "Description"],
            ["2026", "Future Event", "Description"], 

        ],
        background: "#fff" // optional : to set background color
}
const myTimeline = new Timeline(option);

Styles of Timelines

timeline classic

const option={
    //...
    timeline="classic";
    //...
}

timeline inline

const option={
    //...
    timeline="inline";
    //...
}

timeline inline circle

const option={
    //...
    timeline="inline_circle";
    //...
}

timeline inline classic

const option={
    //...
    timeline="inline_classic";
    //...
}

timeline arrow

const option={
    //...
    timeline="arrow";
    //...
}

timeline arrow reverse

const option={
    //...
    timeline="arrow_reverse";
    //...
}

timeline line arc

const option={
    //...
    timeline="line_arc";
    //...
}

timeline arc

const option={
    //...
    timeline="arc";
    // OR
    timeline="arc_dot";
    //...
}

  • New Style coming soon

made with ♥ by Shoaib Norouzi