Timeline for Blazor

This is a new component for Blazor WebAssembly and Blazor Server. The components is build with NET6.

The timeline is responsive and easy to customize. The Timeline is configuration with the colors, icon and HTML code. Each TimelineItem has properties for changing colors and more features.

For more details about this component, please see this post on PureSourceCode.com. If you need support for this component or you have a suggestion or comment, please use my Forum.

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://www.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://www.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://www.puresourcecode.com">
        <span>
            Use the forum to send your comment or submit your questions.
        </span>
    </TimelineItem>
</Timeline>

Timeline properties and methods

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

---

PureSourceCode.com

PureSourceCode.com is my personal blog where I publish posts about technologies and in particular source code and projects in .NET.

In the last few months, I created a lot of components for Blazor WebAssembly and Blazor Server.

My name is Enrico Rossini and you can contact me via:

• Personal Twitter
• LinkedIn
• Facebook

Blazor Components

Component name	Forum	NuGet	Website	Description
Autocomplete for Blazor	Forum			Simple and flexible autocomplete type-ahead functionality for Blazor WebAssembly and Blazor Server
Browser Detect for Blazor	Forum		Demo	Browser detect for Blazor WebAssembly and Blazor Server
ChartJs for Blazor	Forum		Demo	Add beautiful graphs based on ChartJs in your Blazor application
Clippy for Blazor	Forum		Demo	Do you miss Clippy? Here the implementation for Blazor
CodeSnipper for Blazor	Forum			Add code snippet in your Blazor pages for 196 programming languages with 243 styles
Copy To Clipboard	Forum			Add a button to copy text in the clipboard
DataTable for Blazor	Forum		Demo	DataTable component for Blazor WebAssembly and Blazor Server
Icons and flags for Blazor	Forum			Library with a lot of SVG icons and SVG flags to use in your Razor pages
Markdown editor for Blazor	Forum		Demo	This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users.
Modal dialog for Blazor	Forum			Simple Modal Dialog for Blazor WebAssembly
Modal windows for Blazor	Forum			Modal Windows for Blazor WebAssembly
Quill for Blazor	Forum			Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application
ScrollTabs				Tabs with nice scroll (no scrollbar) and responsive
Segment for Blazor	Forum			This is a Segment component for Blazor Web Assembly and Blazor Server
Tabs for Blazor	Forum			This is a Tabs component for Blazor Web Assembly and Blazor Server
Timeline for Blazor	Forum			This is a new responsive timeline for Blazor Web Assembly and Blazor Server
Toast for Blazor	Forum			Toast notification for Blazor applications
Tours for Blazor	Forum			Guide your users in your Blazor applications
WorldMap for Blazor	Forum		Demo	Show world maps with your data

C# libraries for .NET6

Component name	Forum	NuGet	Description
PSC.Evaluator	Forum		PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions.
PSC.Extensions	Forum		A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions...

More examples and documentation

• Write a reusable Blazor component
• Getting Started With C# And Blazor
• Setting Up A Blazor WebAssembly Application
• Working With Blazor Component Model
• Secure Blazor WebAssembly With IdentityServer4
• Blazor Using HttpClient With Authentication
• InputSelect component for enumerations in Blazor
• Use LocalStorage with Blazor WebAssembly
• Modal Dialog component for Blazor
• Create Tooltip component for Blazor
• Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs