Radzen Blazor Components

Documentation About Radzen GitHub

Timeline

RadzenTimeline component is a graphical representation used to display a chronological sequence of events or data points. It allows users to visualize and interact with time-based information, making it easier to grasp the sequence of events. The timeline consists of a line with markers or data points positioned along it, each corresponding to a specific moment or period in time.

NOV 2022

Celebrating the official release of Radzen Blazor Studio.

JAN 2021

Radzen Blazor components open sourced under the MIT license.

JUN 2018

Radzen 2.0 is a fact.

APR 2017

Radzen 1.0 is out the door - automatic page generation and MS SQL support.

Orientation and Position link

The Orientation sets the timeline's alignment to horizontal or vertical. Use LinePosition in combination with Reverse to specify the position of <LabelContent> and <ChildContent> content with respect to the line.

Example
Edit Source

Orientation:

Horizontal

Vertical

LinePosition:

Center

Alternate

Start

End

Left

Right

Top

Bottom

Reverse:

NOV 2022

Celebrating the official release of Radzen Blazor Studio.

JAN 2021

Radzen Blazor components open sourced under the MIT license.

JUN 2018

Radzen 2.0 is a fact.

APR 2017

Radzen 1.0 is out the door - automatic page generation and MS SQL support.

Align Items link

Set the AlignItems property to <RadzenTimeLine> to specify the alignment of Timeline items' content, namely <PointContent>, <LabelContent> and <ChildContent> content.

Example
Edit Source

AlignItems:

Normal

Center

Start

End

Stretch

6th century BC

Persian soldiers baked flatbreads with cheese and dates

19 BC

An early reference to a pizza-like food

997 AD

The word pizza was first documented

16th century

A galette flatbread was referred to as a pizza in Naples

1843

Alezandre Dumans described the diversity of pizza toppings

Styling link

Use CSS variables to adjust line width and color.

Example
Edit Source

Orientation:

Horizontal

Vertical

check

Step 1

check

Step 2

Verify Your Identity

more_horiz

Step 3

Complete Self-Certification

Step 4

Complete Your Profile

how_to_reg

Step 1

fingerprint

Step 2

Verify Your Identity

workspace_premium

Step 3

Complete Self-Certification

Step 4

Complete Your Profile

Point Size link

Set the PointSize property to <RadzenTimeLineItem> to specify the item's point size.

Example
Edit Source

ExtraSmall

Small

Medium

Large

Point Style link

Set the PointStyle property to <RadzenTimeLineItem> to change the item's point style.

Example
Edit Source

Primary

Secondary

Info

Warning

Danger

Success

Light

Base

Dark

Point Variant link

Set the PointVariant property to <RadzenTimeLineItem> to change the item's point variant.

Example
Edit Source

Filled

Flat

Outlined

Text

Point Shadow link

Set the PointShadow property to <RadzenTimeLineItem> to specify the size of the item's point shadow.

Example
Edit Source

PointShadow 0

PointShadow 1

PointShadow 2

PointShadow 3

PointShadow 4

PointShadow 5

PointShadow 6

PointShadow 7

PointShadow 8

PointShadow 9

PointShadow 10

Point Content link

The <PointContent> can fit in text and imagery.

Example
Edit Source

Text

alarm_on

RadzenIcon

RadzenGravatar

Supercharge your Blazor development with Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

open_in_new Learn More

Demos Configuration

Use WCAG compliant colors

Premium Themes

Material 3
Fluent
Material 3 Dark
Material Dark
Fluent Dark

Free Themes

Material
Standard
Default
Humanistic
Software
Dark