Timeline
Timelines display a list of events in chronological order. They can be oriented vertically or horizontally and support various content alignments.
Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.
Vertical Timeline
Vertical timelines are ideal for displaying a history of events, logs, or multi-step processes.
Alternate Alignment
Alternating content provides a modern, balanced look for timelines with longer descriptive text.
Horizontal Timeline
Horizontal timelines are great for dashboards, project roadmaps, or progress indicators.
API Reference
MgTimeline
| Parameter | Type | Default | Description |
|---|---|---|---|
| Orientation | MgOrientation | Vertical | Horizontal or Vertical display. |
| Position | MgTimelinePosition | End | Default position for item content (Start, End, or Alternate). |
MgTimelineItem
| Parameter | Type | Default | Description |
|---|---|---|---|
| Position | MgTimelinePosition? | null | Override the parent position for this specific item. |
| IconName | string? | null | Bootstrap icon class name to display inside the dot. |
| DotColor | string | bg-blue-500 | Tailwind background color class for the dot. |
| OppositeContent | RenderFragment? | null | Content to display on the opposite side of the dot. |