Ant Design Blazor
Timeline
Vertical display timeline.
When To Use
- When a series of information needs to be ordered by time (ascending or descending).
- When you need a timeline to make a visual connection.
Examples
Basic timeline.
When the timeline is incomplete and ongoing, put a ghost node at last. Set pending as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, pendingDot={a React Element} is used to customize the dot of the pending item. reverse={true} is used for reversing nodes.
Basic usage.
Use label show time alone.
Set the color of circles. green means completed or success status, red means warning or error, and blue means ongoing or other default status, gray for unfinished or disabled status.
Alternate timeline.
Right alternate timeline.
Timeline API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Mode | ParameterWhere the line will be in relation to the items - left, right or alternate | TimelineMode? | left |
| Reverse | ParameterReverse nodes or not | Boolean | false |
| Pending | ParameterSet the last ghost node's existence or its content | OneOf<String, RenderFragment> | -- |
| PendingDot | ParameterSet the dot of the last ghost node when pending is true | RenderFragment | -- |
| ChildContent | ParameterContent of timeline. Should contain TimelineItem elements |
RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
TimelineItem API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterThe content of the timeline item. | RenderFragment | -- |
| Dot | ParameterThe dot of the timeline item. | RenderFragment | -- |
| Color | ParameterThe color of the timeline item. | String | -- |
| Label | ParameterThe label of the timeline item. | String | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |