PSC.Blazor.Components.Timeline 6.0.7

.NET 6.0
There is a newer version of this package available.
See the version list below for details. 
dotnet add package PSC.Blazor.Components.Timeline --version 6.0.7
NuGet\Install-Package PSC.Blazor.Components.Timeline -Version 6.0.7
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="PSC.Blazor.Components.Timeline" Version="6.0.7" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add PSC.Blazor.Components.Timeline --version 6.0.7
#r "nuget: PSC.Blazor.Components.Timeline, 6.0.7"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install PSC.Blazor.Components.Timeline as a Cake Addin
#addin nuget:?package=PSC.Blazor.Components.Timeline&version=6.0.7

// Install PSC.Blazor.Components.Timeline as a Cake Tool
#tool nuget:?package=PSC.Blazor.Components.Timeline&version=6.0.7

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.

!(Timeline from Blazor)[https://user-images.githubusercontent.com/9497415/220400235-903db41b-ef8e-4bd6-b740-ed5c026f9402.png]

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
image ChildContent Gets or sets the content of the child.
image ItemPositionOption Should items be altered automatically or manual.
image TextBgColor Description background color.
image TextColor Description text color.
image Title Timeline title which will be displayed above.
image TitleBgColor Background color for title section.
image TitleColor Text color for title section.

Timeline item properties

Name Description
image ButtonText Gets or sets the button text.
image ChildContent Gets or sets the content of the child.
image Icon Gets or sets the icon.
image IconContent Gets or sets the content of the icon.
image Link Gets or sets the link.
image Position Gets or sets the position.
image TextBackgroundColor Gets or sets the color of the text background.
image Time Gets or sets the time.
image Timeline Gets or sets the timeline.
image Title Title for timeline item
image 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
Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
6.0.12 245 11/13/2023
6.0.11 80 11/13/2023
6.0.10 268 2/22/2023
6.0.9 201 2/22/2023
6.0.8 207 2/21/2023
6.0.7 218 2/21/2023
6.0.6 203 2/21/2023
6.0.5 209 2/21/2023
6.0.0 200 2/20/2023