Radzen Blazor Components

Enjoy Material 3

This is a preview of Radzen's new Material 3 premium theme, available only to Radzen Professional or Enterprise subscribers.

Browse components with a free theme by selecting one from the dropdown above.

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.

Basic Usage link

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.

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.

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.

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.

ExtraSmall

Small

Medium

Large

Point Style link

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

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.

Filled

Flat

Outlined

Text

Point Shadow link

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

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.

Text

alarm_on

RadzenIcon

RadzenGravatar

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

open_in_new Try Now play_circle_outline See in Action

New

Radzen
Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.

Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

open_in_new Try Now play_circle_outline See in Action