Getting Started with Blazor Timeline Component

10 Oct 20255 minutes to read

This section explains how to integrate the Syncfusion Blazor Timeline component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code.

For a quick start with the Blazor Timeline component, refer to this video:

Prerequisites

Create a new Blazor App in Visual Studio

A Blazor WebAssembly App can be created using Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension.

Install Syncfusion® Blazor Layouts and Themes NuGet in the App

To add Blazor Timeline component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install Syncfusion.Blazor.Layouts and Syncfusion.Blazor.Themes. Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Blazor.Layouts -Version 31.2.2
Install-Package Syncfusion.Blazor.Themes -Version 31.2.2

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Prerequisites

Create a new Blazor App in Visual Studio Code

A Blazor WebAssembly App can be created using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension.

Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`):

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Syncfusion® Blazor Layouts and Themes NuGet in the App

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure the current directory is the project root, where the .csproj file is located.
  • Run the following command to install a Syncfusion.Blazor.Layouts and Syncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.Layouts -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Register Syncfusion® Blazor Service

Open ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Layouts namespace.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts

Now, register the Syncfusion® Blazor Service in the ~/Program.cs file of your Blazor WebAssembly App.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the <head> section of the ~/index.html file.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

NOTE

Review the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in a Blazor application. Also, review the Adding Script Reference topic for different approaches to adding script references in a Blazor application.

Add Syncfusion® Blazor Timeline component

Add the Syncfusion® Blazor Timeline component in the ~/Pages/Index.razor file.

@using Syncfusion.Blazor.Layouts

<div style="height: 250px;">
    <SfTimeline>
        <TimelineItems>
            <TimelineItem></TimelineItem>
            <TimelineItem></TimelineItem>
            <TimelineItem></TimelineItem>
            <TimelineItem></TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Timeline component in the default web browser.
Blazor Timeline Component