3.0.6 • Published 2 months ago
@lemonadejs/timeline v3.0.6
LemonadeJS
JavaScript Timeline
LemonadeJS Timeline is a framework-agnostic JavaScript plugin that offers integration with Vue, React, and Angular. Designed to enable developers to craft logs, event highlights, and minimalist roadmaps easily, it provides extensive customization options. Users have the flexibility to modify colours, content, and point positions and can take advantage of the automatic event grouping by month, complete with navigation functionality.
Settings
| Attribute | Type | Description |
|---|---|---|
| data | Item[] | An array of items to be displayed. Each item should follow the structure defined in the 'Item Properties' section. |
| type? | string | There are default and monthly types. The latter will create a navigation per month and group all items. |
| align? | string | Align the bullet points. Accepted values include "left", "right", "top", and "bottom". Default: "left". |
| message? | string | Will show when no data to display |
| order? | string | Accepted values are 'asc' for ascending and 'desc' for descending order. |
| width? | number | Determines the width of the timeline container. |
| height? | number | Determines the height of the timeline container. |
| url?: String | Specifies the URL for fetching the data. | |
| remote?: Boolean | Enable the remote functionality. Default: false |
Item Properties
| Attribute | Description |
|---|---|
| date?: string | A date associated with the item, providing chronological information. |
| title?: : string | Title for the item. |
| subtitle?: string | Sub caption for the item. |
| description?: string | Item description. |
| borderColor?: string | Border color |
| borderStyle?: string | Define the style of the item's border, such as "solid," "dashed," or "dotted." |
Events
| Event | Trigger |
|---|---|
| onupdate? | Called when the items are updated. |
Installation
To install it in your project using npm, run the following command:
$ npm install @lemonadejs/timelineCDN
To use timeline via a CDN, include the following script tags in your HTML file:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/timeline/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/timeline/dist/style.min.css" />Usage
Quick example with Lemonade
import lemonade from 'lemonadejs'
import Timeline from '@lemonadejs/timeline';
import '@lemonadejs/timeline/dist/style.css';
export default function App() {
const self = this;
self.data = [
{
title: "Issue Identification",
date: new Date(2022, 6, 1),
},
{
title: "Root Cause Analysis",
date: new Date(2022, 6, 2),
},
{
title: "Implementation of Solution",
date: new Date(2022, 6, 3),
borderColor: '#808000',
borderStyle: 'dashed',
},
{
title: "Implementation of Solution",
date: new Date(2022, 6, 4),
}
];
return `<Timeline :data="self.data" align="left" /></div>`
}A micro reactive timeline in javascript and LemonadeJS. https://lemonadejs.net
Other useful tools