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.

Additional Actions

Action	Description	Configuration Options
Dynamic height	Automatically adjusts the component's height based on its content.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Collapse when hidden	Collapses the component's space when it is hidden, so surrounding components fill the space. Takes effect when the app runs (preview or released app), not on the editor canvas.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Visibility	Controls component visibility.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Tooltip	Provides additional information on hover. Supports Plain text, Markdown, and HTML formats.	String (e.g., Shipment milestones).

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
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.