Timeline
Displays a flow of events in a timely manner. Technically, it renders information in chronological order. Can be used to represent roadmaps.
Basic
Timeline Data
Provide the JSON data of the array, consisting of the timeline nodes in the format mentioned below.
title | Title text of Timeline(s). This value is required. |
subTitle | Subtitle text of Timeline(s). |
label | Label of Timeline(s), usually displays the dates. |
color | Specify the colour of the Timeline nodes. |
dot | Renders the Timeline icons as the Ant Design Icons. |
titleColor | Specify the colour of the node title. Each node can have its own colour. |
subTitleColor | Specify the colour of the node subtitle. |
labelColor | Sets the colour of the node icon. It can be defined individually. |
Interaction
Event Handlers
Event | Description |
---|---|
|
Hide
This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.
Layout
Display Order
Property | Description |
---|---|
Content Right | The labels are aligned left and the content at each node is placed at the right. |
Content Left | The labels are aligned right and the content at each node is placed on the left. |
Alternate Content Order | The label and the content are interchanged in their position (left/right) at each node along the timeline. |
Pending Node Text
Provide the string text to show when the subsequence timeline nodes are getting loaded on to the screen.
Newest Events First
Places the latest event at the top of the timeline list when this toggle is ON.
Style
Property | Description |
---|---|
Background | Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly. |
Title Color | Specify the colour of the node title. |
Label Color | Set the colour of the node icon. |
Subtitle Color | Specify the colour of the node subtitle. |
Margin | This value is set in terms of "px" number which creates the space between the border and the content of the widget. |
Padding | This value is set in terms of "px" number which creates the space between the border and outer elements. |
Border Radius | This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms. |
Last updated