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.

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:

[ 
    { "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:

[ 
    { "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.

Component-Specific Actions (CSA)

There are currently no Component-Specific Actions implemented for the Timeline component.

Exposed Variables

There are currently no exposed variables for the Timeline component.

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, choosing Plain text, Markdown, or HTML from the toggle above the field.

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.

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.

Advanced

Property	Description	Configuration Options
CSS class	Adds a custom CSS class to the component, which can be targeted using Custom Styles for advanced styling.	Enter one or more class names.

info

The Advanced section is available only if your plan has the Custom Styles feature enabled.

info

Any property with an fx button next to it can be programmatically configured.