Skip to content

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.

Notifications You must be signed in to change notification settings

shoaibn98/TimeLine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published