Timeline: Blazor timeline component

Examples

Color and Size style the dot; ChildContent goes in the box.

website/Examples/DataDisplay/TimelineBasicExample.razor Source

Icon replaces the dot.

website/Examples/DataDisplay/TimelineIconsExample.razor Source

ItemOpposite becomes a label above each box, since the timeline always renders compact.

website/Examples/DataDisplay/TimelineOppositeExample.razor Source

DaisyBlazor

Reverse bool
= false
With Alternate, starts the alternation on the opposite side (first box on the start side).
TimelinePosition TimelinePosition
= TimelinePosition.Alternate
Where the boxes sit: Alternate (default) switches sides per item, Start/Left/Top keeps them after a start-edge line (compact), End/Right/Bottom before an end-edge line.
Class string
= null
Extra CSS classes merged onto the root element.
Style string
= null
Inline CSS styles applied to the root element.

Name	Type	Default	Description
Reverse	bool	false	With Alternate, starts the alternation on the opposite side (first box on the start side).
TimelinePosition	TimelinePosition	TimelinePosition.Alternate	Where the boxes sit: Alternate (default) switches sides per item, Start/Left/Top keeps them after a start-edge line (compact), End/Right/Bottom before an end-edge line.
Class	string	null	Extra CSS classes merged onto the root element.
Style	string	null	Inline CSS styles applied to the root element.

ChildContent RenderFragment
The timeline items, rendered inside a vertical daisyUI timeline list.

Name	Type	Description
ChildContent	RenderFragment	The timeline items, rendered inside a vertical daisyUI timeline list.

DaisyBlazor

Color Color
= Color.Default
Color of the middle dot (e.g. bg-primary) or icon; defaults to a neutral bg-base-300 dot.
Icon string
= null
Material Symbols ligature shown in the middle instead of the dot.
Size Size
= Size.Medium
Size of the middle dot or icon (small, medium or large).
TimelineAlign TimelineAlign
= TimelineAlign.Default
Vertical alignment of the box and opposite content against the dot: Start (top), End (bottom) or Default (centred).
Class string
= null
Additional CSS classes merged onto the content box.
Style string
= null
Inline styles applied to the content box.

Name	Type	Default	Description
Color	Color	Color.Default	Color of the middle dot (e.g. bg-primary) or icon; defaults to a neutral bg-base-300 dot.
Icon	string	null	Material Symbols ligature shown in the middle instead of the dot.
Size	Size	Size.Medium	Size of the middle dot or icon (small, medium or large).
TimelineAlign	TimelineAlign	TimelineAlign.Default	Vertical alignment of the box and opposite content against the dot: Start (top), End (bottom) or Default (centred).
Class	string	null	Additional CSS classes merged onto the content box.
Style	string	null	Inline styles applied to the content box.

ChildContent RenderFragment
Main content shown in the timeline box; ignored when ItemContent is set.
ItemContent RenderFragment
Main content shown in the timeline box; takes precedence over ChildContent.
ItemOpposite RenderFragment
Content rendered on the opposite side of the line from the box (above the box in a compact Start timeline).

Name	Type	Description
ChildContent	RenderFragment	Main content shown in the timeline box; ignored when ItemContent is set.
ItemContent	RenderFragment	Main content shown in the timeline box; takes precedence over ChildContent.
ItemOpposite	RenderFragment	Content rendered on the opposite side of the line from the box (above the box in a compact Start timeline).