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.
To integrate this timeline library into your project, follow these simple steps:
-
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>
-
Initialize the Timeline: make an empty
divtag withTimeline_Timelineclass name and define someidfor this Elements. You have to give thisidastargetIdto 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);
const option={
//...
timeline="classic";
//...
}
const option={
//...
timeline="inline";
//...
}
const option={
//...
timeline="inline_circle";
//...
}
const option={
//...
timeline="inline_classic";
//...
}
const option={
//...
timeline="arrow";
//...
}
const option={
//...
timeline="arrow_reverse";
//...
}
const option={
//...
timeline="line_arc";
//...
}
const option={
//...
timeline="arc";
// OR
timeline="arc_dot";
//...
}
made with ♥ by Shoaib Norouzi