Timeline component for Blazor

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.

Example of Timeline - Timeline component for Blazor
Example of Timeline


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 Title="Custom content" Position="ItemPosition.Right" Icon="Icon.UserTime">
            <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>You can add images or any other HTML code</span> <br />
        <img src="/psc_logo.png" style="max-width: 100%;" />

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

    <TimelineItem TitleBackgroundColor="#70b0ff" TextBackgroundColor="#ffffff" 
                  Title="Forum" Icon="Icon.ReminderClock" ButtonText="Forum" 
            Use the forum to send your comment or submit your questions.

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.

Responsive timeline
Responsive timeline

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

imageChildContentGets or sets the content of the child.
imageItemPositionOptionShould items be altered automatically or manual.
imageTextBgColorDescription background color.
imageTextColorDescription text color.
imageTitleTimeline title which will be displayed above.
imageTitleBgColorBackground color for title section.
imageTitleColorText color for title section.

Timeline item properties

imageButtonTextGets or sets the button text.
imageChildContentGets or sets the content of the child.
imageIconGets or sets the icon.
imageIconContentGets or sets the content of the icon.
imageLinkGets or sets the link.
imagePositionGets or sets the position.
imageTextBackgroundColorGets or sets the color of the text background.
imageTimeGets or sets the time.
imageTimelineGets or sets the timeline.
imageTitleTitle for timeline item
imageTitleBackgroundColorGets 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.