Timeline component for Blazor

In this new post, I introduce my new Timeline component for Blazor WebAssembly and Blazor Server. The components is build with NET6. This new component is very easy to use and customize. Here all the details.

Usage

1. Install

This component is a Nuget package available from this link.

2. Add using to your project.

@using PSC.Blazor.Components.Timeline
@using PSC.Blazor.Components.Timeline.Enums

3. Example code

@using PSC.Blazor.Components.Timeline

<Timeline ItemPositionOption="@ItemPositionOption.Manual">
    <TimelineItem Title="Start here" Time="@DateTime.Now.ToString("dd/MM/yyyy")" 
        ButtonText="PureSourceCode.com" Link="https://puresourcecode.com">
        Here you can write some text. The <code>TimelineItem</code> has 
        the property for adding a button called <code>ButtonText</code>
        and you can add a link with <code>Link</code>.
    </TimelineItem>

    <TimelineItem Title="Custom content" Position="ItemPosition.Right" Icon="Icon.UserTime">
        <span>
            <code>TimelineItem</code> can be altered to appear on the right! 
            Also, you can use the default icon or 
            use one of the embedded icons with <code>Icon</code>.
        </span>

        <span>You can add images or any other HTML code</span> <br />
        <img src="/psc_logo.png" style="max-width: 100%;" />
    </TimelineItem>

    <TimelineItem Title="Documentation" Icon="Icon.Timeline" 
                  ButtonText="Documentation" Link="https://puresourcecode.com">
        <span>
            Now, visit the page with the documentation and same examples.
        </span>
    </TimelineItem>

    <TimelineItem TitleBackgroundColor="#70b0ff" TextBackgroundColor="#ffffff" 
                  Title="Forum" Icon="Icon.ReminderClock" ButtonText="Forum" 
                  Link="https://puresourcecode.com">
        <span>
            Use the forum to send your comment or submit your questions.
        </span>
    </TimelineItem>
</Timeline>

Anatomy of Timeline

First, have a look of a simple timeline with 2 events. A Timeline is the container for a list of event and is responsible to render the UI. In the Timeline we can define the basic colours for the entire timeline.

The timeline is responsive and tested with different browsers, devices and screen sizes. Also, I created tests using bUnit, the framework for testing Blazor.

A TimelineItem is an event to display. Each TimelineItem has a title, can have a date, an icon (by default the icon is a calendar but you can use one of the other embedded icons or use yours in SVG format) and add the HTML code to display.

Also, the TimelineItem can display a button with a link and change the colours for the title and the body. Plus, it is possible to choose the side of the event (Left of Right) for big screens.

Anatomy of Timeline - Timeline component for Blazor — Anatomy of Timeline

In a mobile device or a table, the timeline is displayed as the following screenshot. The icon on the left and the event on the right for all item.

Timeline properties and methods

So, the timeline has the main component Timeline and then each element called TimelineItem that defines each event in time.

Timeline properties

	Name	Description
	ChildContent	Gets or sets the content of the child.
	ItemPositionOption	Should items be altered automatically or manual.
	TextBgColor	Description background color.
	TextColor	Description text color.
	Title	Timeline title which will be displayed above.
	TitleBgColor	Background color for title section.
	TitleColor	Text color for title section.

Timeline item properties

	Name	Description
	ButtonText	Gets or sets the button text.
	ChildContent	Gets or sets the content of the child.
	Icon	Gets or sets the icon.
	IconContent	Gets or sets the content of the icon.
	Link	Gets or sets the link.
	Position	Gets or sets the position.
	TextBackgroundColor	Gets or sets the color of the text background.
	Time	Gets or sets the time.
	Timeline	Gets or sets the timeline.
	Title	Title for timeline item
	TitleBackgroundColor	Gets or sets the color of the back ground.

Timeline Icon embedded

Clock
ClockDateTime
Default
DigitalNumber0
DigitalNumber1
DigitalNumber2
DigitalNumber3
DigitalNumber4
DigitalNumber5
DigitalNumber6
DigitalNumber7
DigitalNumber8
DigitalNumber9
HourGlass
HourGlassOld
ReminderClock
SandClock
Timeline
UserTime

Wrap up

In conclusion, the Timeline component for Blazor is here. If you need support and you have any comment, please use my forum. Also, you can see (soon) the full source code on GitHub.

Timeline component for Blazor