mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 14:07:26 +00:00
91 lines
3.3 KiB
Markdown
91 lines
3.3 KiB
Markdown
---
|
|
id: timeline
|
|
title: Timeline
|
|
---
|
|
|
|
# Timeline
|
|
|
|
The **Timeline** component provides a visual representation of a sequence of events. It's useful for displaying historical data, project milestones, or any chronological information in a clear and engaging format.
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Properties
|
|
|
|
### Timeline Data
|
|
|
|
**Data requirements:** The data should be an array of objects. Each object must have **title**, **subTitle**, **iconBackgroundColor**, and **date** keys. The **iconBackgroundColor** can be a hex color code or in an RGBA format.
|
|
|
|
**Example with hex color code:**
|
|
```json
|
|
[
|
|
{ "title": "Product Launched", "subTitle": "First version of our product released to public", "date": "20/10/2021", "iconBackgroundColor": "#4d72fa"},
|
|
{ "title": "First Signup", "subTitle": "Congratulations! We got our first signup", "date": "22/10/2021", "iconBackgroundColor": "#4d72fa"},
|
|
{ "title": "First Payment", "subTitle": "Hurray! We got our first payment", "date": "01/11/2021", "iconBackgroundColor": "#4d72fa"}
|
|
]
|
|
```
|
|
|
|
**Example with RGBA:**
|
|
```json
|
|
[
|
|
{ "title": "Product Launched", "subTitle": "First version of our product released to public", "date": "20/10/2021", "iconBackgroundColor": "rgba(240,17,17,0.5)"},
|
|
{ "title": "First Signup", "subTitle": "Congratulations! We got our first signup", "date": "22/10/2021", "iconBackgroundColor": "rgba(60, 179, 113,0.5)"},
|
|
{ "title": "First Payment", "subTitle": "Hurray! We got our first payment", "date": "01/11/2021", "iconBackgroundColor": "rgba(60, 179, 113,0.5)"}
|
|
]
|
|
```
|
|
|
|
### Hide Date
|
|
|
|
Toggle this option to hide the date/time information in the Timeline component.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Component-Specific Actions (CSA)
|
|
|
|
There are currently no Component-Specific Actions implemented for the Timeline component.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Exposed Variables
|
|
|
|
There are currently no exposed variables for the Timeline component.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## General
|
|
### Tooltip
|
|
|
|
A Tooltip provides additional information when users hover over the component. Set the tooltip content under the **General** accordion in the component's properties.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Devices
|
|
|
|
| Property | Description | Expected Value |
|
|
| :-------------- | :---------------------------------------- | :------------- |
|
|
| Show on desktop | Controls the component's desktop visibility | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|
| Show on mobile | Controls the component's mobile visibility | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Styles
|
|
|
|
| Property | Description | Configuration Options |
|
|
| :------- | :---------- | :-------------------- |
|
|
| Visibility | Controls the component's visibility | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
|
| Box Shadow | Adds a shadow effect around the component | Select the box shadow color and adjust the related properties or set it programmatically using **fx**. |
|
|
|
|
:::info
|
|
Any property with an **fx** button next to it can be **programmatically configured**.
|
|
:::
|
|
|
|
</div>
|