PSC.Blazor.Components.Timeline 6.0.9

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