Timeline
Indicates related events in chronological order.
Use the Timeline to show related events in chronological order such as an end user’s upcoming, current and past activities.
How to use
-
Drag the Timeline pattern into the preview.
-
Set the content in the placeholders. By default, the pattern comes with a circular icon in the Icon placeholder. To change it, drag an icon widget to this placeholder.
-
Drag as many TimelineItems as required.
Input Parameters
Timeline
| Input Name | Description | Type | Mandatory | Default Value |
|---|---|---|---|---|
| ExtendedClass | Add custom style classes to this Block. | Text | False | none |
Timeline Item
| Input Name | Description | Type | Mandatory | Default Value |
|---|---|---|---|---|
| Color | Background color of the icon. | Color Identifier | False | Entities.Color.Primary |
| ExtendedClass | Add custom style classes to this Block. | Text | False | none |
Layout and Classes
Advanced Use Case
Use Timeline with ListRecords
- Drag the Timeline Pattern into the preview.
- In the Content placeholder, drag a ListRecords widget.
- In the ListRecords widget, drag a TimelineItem.
- In the TimelineItem, use expressions to display the database content you need.
-
To disable the vertical line on the last TimelineItem, write the following CSS code in the application Theme:
css .ListRecords .timeline-item:last-of-type .timeline-item-separator { display: none; }1. In the ListRecords Widget, set Line Separator to None to avoid additional margin between elements. -
Publish and test.
