# Timeline

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-e8bbac1e646f134496e4bced8d4044f1455b04cb%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

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

```json
[
  {
    "title": "Majiang Releases",
    "subTitle": "Majiang Published in China",
    "label": "2022-6-10"
  },
  {
    "title": "Openblocks public release",
    "subTitle": "Openblocks open source in GitHub",
    "label": "2022-11-28"
  },
  {
    "title": "Last code submission",
    "subTitle": "Openblocks project abandoned",
    "dot": "ExclamationCircleOutlined",
    "label": "2023-3-28",
    "color": "red",
    "titleColor": "red",
    "subTitleColor": "red",
    "labelColor": "red"
  },
  {
    "title": "Appizap 2.0",
    "subTitle": "Appizap, keep moving forward",
    "dot": "LogoutOutlined",
    "color": "green",
    "label": "2023-6-20"
  }
]
```

## Interaction

#### Event Handlers

| Event                                        | Description                                                                                                                                                                                                                                                                                                                      |
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**`Click`**</mark> | <p>This is triggered when this is used as a default button and the user clicks on it..<br><br><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-9628749a14c866df6c49bd14845d989b7c4c6bb7%2Fimage%20(10)%20(1).png?alt=media" alt=""></p> |

#### Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied. Shows a red-crossed warning symbol and can be customized to disable the widget according to certain conditions using low-code.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-695f356d5e8bc58072102f50922157508eb6122b%2Fimage%20(224).png?alt=media" alt=""><figcaption><p>Read-only</p></figcaption></figure>

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

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>

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

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Background</td><td>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.</td></tr><tr><td align="center">Title Color</td><td>Specify the colour of the node title.</td></tr><tr><td align="center">Label Color</td><td>Set the colour of the node icon.</td></tr><tr><td align="center">Subtitle Color</td><td>Specify the colour of the node subtitle.</td></tr><tr><td align="center">Border Color</td><td>Set the colour to the border lines. The border lines will be shown only if that is enabled.</td></tr><tr><td align="center">Margin</td><td>This value is set in terms of "px" number which creates the space between the border and the content of the widget.</td></tr><tr><td align="center">Padding</td><td>This value is set in terms of "px" number which creates the space between the border and outer elements.</td></tr><tr><td align="center">Border Radius</td><td>This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.</td></tr><tr><td align="center">Border Width</td><td>Set the thickness of the border of the widget using this value. It is defined using "px" terms.</td></tr></tbody></table>