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.
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.
