Syncfusion Blazor Timeline

Implementing Blazor Timeline Component

The Syncfusion Blazor Timeline component enables you to display a series of events or milestones in a chronological sequence. It's ideal for visualizing project progress, historical timelines, delivery tracking, or process workflows.

When to Use This Skill

Use the Timeline component when you need to:

• Display events in chronological order (project phases, shipping tracking, workflow steps)
• Show before/after information with opposite content (dates paired with descriptions)
• Create vertical or horizontal timeline layouts
• Customize visual appearance (colors, dots, connectors)
• Render complex content with templates
• Handle component lifecycle events

Component Overview

The Timeline component renders a series of items sequentially, with each item containing:

• Content: Main information or description
• OppositeContent: Secondary information displayed opposite to content
• Dot: Visual indicator (customizable with icons, images, or text)
• Connector: Line connecting items visually

Key capabilities:

• Multiple alignment modes (Before, After, Alternate, AlternateReverse)
• Horizontal and vertical orientations
• Custom item styling and disabled states
• Event callbacks for component lifecycle
• Template-based rendering for advanced layouts
• Reverse order rendering

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Install Syncfusion.Blazor.Layouts and Themes NuGet packages
• Configure imports and register Blazor service
• Add stylesheet and script resources
• Create your first basic timeline
• Run and test the application

Timeline Alignment

📄 Read: references/timeline-alignment.md

• Control content display with Alignment property
• Before: Content placed before/left, OppositeContent after/right
• After: Content placed after/right, OppositeContent before/left
• Alternate: Items arranged alternately regardless of orientation
• AlternateReverse: Reverse alternate arrangement
• Using OppositeContent with alignments

Timeline Items

📄 Read: references/timeline-items.md

• Add TimelineItem components with Content directive
• String content vs template content approaches
• OppositeContent for dual information display
• Customize dots with DotCss (icons, images, text)
• Disable items with Disabled property
• Apply custom CSS classes with CssClass

Timeline Orientation

📄 Read: references/timeline-orientation.md

• Vertical orientation: Display items sequentially top-to-bottom (default)
• Horizontal orientation: Display items side-by-side
• Combine orientation with alignment for different layouts
• Responsive considerations

Timeline Events

📄 Read: references/timeline-events.md

• Created: Fires when component rendering is completed
• ItemRendered: Fires after each item is rendered
• Access event arguments and item information
• Common event handling patterns

Styling & Customization

📄 Read: references/timeline-styling-customization.md

• Connector styling (common and individual)
• Dot color, size, shadow, and variant customization
• CSS variables for dot appearance (--dot-size, --dot-outer-space, --dot-border)
• Dot outline mode (e-outline class)
• Component-level CSS classes

Template & Advanced Patterns

📄 Read: references/timeline-templates.md

• Template directive for complete item customization
• Access Item and ItemIndex from template context
• Create progress bars, custom connectors, and indicators
• Advanced layout patterns

API Reference

📄 Read: references/api-reference.md

• Complete SfTimeline component properties
• TimelineItem properties and configuration
• TimelineAlignment enumeration values
• TimelineOrientation enumeration values
• TimelineRenderedEventArgs event arguments
• CSS classes and CSS variables
• Code examples for all APIs
• Common implementation patterns

Quick Start Example

@using Syncfusion.Blazor.Layouts

<div style="height: 350px;">
    <SfTimeline>
        <TimelineItems>
            <TimelineItem>
                <Content>Event 1</Content>
                <OppositeContent>2024-01-01</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Event 2</Content>
                <OppositeContent>2024-01-15</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Event 3</Content>
                <OppositeContent>2024-02-01</OppositeContent>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

Common Use Cases

1. Order/Shipping Timeline

Display order status with timestamps and locations using alignment with opposite content.

2. Project Milestone Timeline

Show project phases with start/end dates and descriptions using horizontal orientation.

3. Historical Timeline

Present historical events vertically with dates on one side and descriptions on the other using Alternate alignment.

4. Progress Tracking

Visualize workflow steps with custom dot colors and disabled states for completed vs. pending items.

Key Properties

Item Properties:

Key Setup Steps

1. Install NuGet packages: Syncfusion.Blazor.Layouts, Syncfusion.Blazor.Themes 2. Add imports: @using Syncfusion.Blazor.Layouts in _Imports.razor 3. Register service: builder.Services.AddSyncfusionBlazor() in Program.cs 4. Include stylesheet: Add material3.css to index.html 5. Create timeline: Use <SfTimeline> with <TimelineItems> collection

Syncfusion Blazor Timeline API Reference

Table of Contents

• Overview
• SfTimeline Component
• TimelineItem Component
• Enumerations
• Event Arguments
• Events
• TimelineItemContext
• Methods
• Styling and CSS Classes
• CSS Variables
• Complete Working Example
• Common Use Cases
• Performance Considerations
• Browser Support
• See Also

Overview

The SfTimeline component is a layout control that presents a series of events or activities in chronological order. It supports both vertical and horizontal orientations with customizable alignment, styling, and templating capabilities.

Namespace: Syncfusion.Blazor.Layouts Assembly: Syncfusion.Blazor.dll

---

SfTimeline Component

Properties

Reverse Property

<SfTimeline Reverse="true">
    <TimelineItems>
        <TimelineItem><Content>Item 1</Content></TimelineItem>
        <TimelineItem><Content>Item 2</Content></TimelineItem>
        <TimelineItem><Content>Item 3</Content></TimelineItem>
    </TimelineItems>
</SfTimeline>

When Reverse="true", items render in reverse order from the source collection.

ID Property

<SfTimeline ID="myTimeline">
    <TimelineItems>
        <TimelineItem><Content>Event</Content></TimelineItem>
    </TimelineItems>
</SfTimeline>

Sets the HTML id attribute for the Timeline container element, useful for CSS targeting and DOM queries.

---

TimelineItem Component

Properties

Example: Complete TimelineItem Usage

@using Syncfusion.Blazor.Layouts

<SfTimeline Alignment="TimelineAlignment.Alternate">
    <TimelineItems>
        <TimelineItem DotCss="e-icons e-check" CssClass="completed-item">
            <Content>Order Confirmed</Content>
            <OppositeContent>2024-01-15</OppositeContent>
        </TimelineItem>
        <TimelineItem DotCss="e-icons e-box">
            <Content>Shipped</Content>
            <OppositeContent>2024-01-16</OppositeContent>
        </TimelineItem>
        <TimelineItem DotCss="e-icons e-location" Disabled="false">
            <Content>In Transit</Content>
            <OppositeContent>2024-01-17</OppositeContent>
        </TimelineItem>
    </TimelineItems>
</SfTimeline>

---

Enumerations

TimelineAlignment Enum

Specifies the alignment of timeline items relative to the timeline axis.

Usage:

<SfTimeline Alignment="TimelineAlignment.Alternate">
    <!-- items -->
</SfTimeline>

---

TimelineOrientation Enum

Specifies the layout direction of the Timeline component.

Usage:

<SfTimeline Orientation="TimelineOrientation.Horizontal">
    <!-- items -->
</SfTimeline>

---

Event Arguments

TimelineRenderedEventArgs Class

Provides event data when a timeline item is rendered.

Usage in Event Handler:

@using Syncfusion.Blazor.Layouts

<SfTimeline ItemRendered="OnItemRendered">
    <TimelineItems>
        <TimelineItem><Content>Item 1</Content></TimelineItem>
        <TimelineItem><Content>Item 2</Content></TimelineItem>
    </TimelineItems>
</SfTimeline>

@code {
    private void OnItemRendered(TimelineRenderedEventArgs args)
    {
        Console.WriteLine($"Item at index {args.Index} rendered");
        Console.WriteLine($"Item reference: {args.Item}");
    }
}

---

Created Event

Fires when the Timeline component rendering is completed.

Usage:

<SfTimeline Created="OnTimelineCreated">
    <TimelineItems>
        <TimelineItem><Content>Item</Content></TimelineItem>
    </TimelineItems>
</SfTimeline>

@code {
    private void OnTimelineCreated()
    {
        Console.WriteLine("Timeline component created");
    }
}

---

Events

---

TimelineItemContext

Context object passed to Content, OppositeContent, and Template render fragments.

Usage in Template:

<SfTimeline>
    <ChildContent>
        <TimelineItems>
            <TimelineItem>
                <Content>
                    Item @context.ItemIndex: Main Content
                </Content>
            </TimelineItem>
        </TimelineItems>
    </ChildContent>
    <Template>
        <div class="custom-item-@context.ItemIndex">
            <span>Step @(context.ItemIndex + 1)</span>
        </div>
    </Template>
</SfTimeline>

---

Methods

The SfTimeline component inherits lifecycle methods from Blazor's ComponentBase class. Component-specific methods are limited as the Timeline is primarily a declarative UI component.

Note: The Timeline component does not expose custom public methods beyond standard Blazor component lifecycle methods (OnInitializedAsync, OnParametersSetAsync, OnAfterRenderAsync). All functionality is controlled through properties and events.

---

Styling and CSS Classes

Component-Level Classes

Custom Styling Example

<SfTimeline CssClass="custom-timeline">
    <TimelineItems>
        <TimelineItem CssClass="item-status-active">
            <Content>Active Item</Content>
        </TimelineItem>
    </TimelineItems>
</SfTimeline>

<style>
    .custom-timeline .e-connector::after {
        border-color: #2196F3;
        border-width: 2px;
    }
    
    .item-status-active .e-dot {
        background-color: #4CAF50;
        border-color: #4CAF50;
    }
</style>

---

CSS Variables

The Timeline component supports CSS variables for advanced customization:

Usage:

<style>
    .custom-dots .e-dot {
        --dot-size: 24px;
        --dot-radius: 50%;
        --dot-outer-space: 3px;
        --dot-border: 3px;
    }
</style>

---

Complete Working Example

@using Syncfusion.Blazor.Layouts

<div style="padding: 20px;">
    <h2>Timeline API Demo</h2>
    
    <SfTimeline 
        Alignment="TimelineAlignment.Alternate" 
        Orientation="TimelineOrientation.Vertical"
        Reverse="false"
        CssClass="demo-timeline"
        Created="OnTimelineCreated"
        ItemRendered="OnItemRendered"
        ID="demoTimeline">
        
        <TimelineItems>
            <TimelineItem DotCss="e-icons e-circle-add">
                <Content>Project Started</Content>
                <OppositeContent>Jan 1, 2024</OppositeContent>
            </TimelineItem>
            <TimelineItem DotCss="e-icons e-circle-check">
                <Content>Design Approved</Content>
                <OppositeContent>Jan 15, 2024</OppositeContent>
            </TimelineItem>
            <TimelineItem DotCss="e-icons e-circle-info">
                <Content>Development Phase</Content>
                <OppositeContent>Feb 1, 2024</OppositeContent>
            </TimelineItem>
            <TimelineItem DotCss="e-icons e-circle-check" Disabled="false">
                <Content>Testing Complete</Content>
                <OppositeContent>Mar 1, 2024</OppositeContent>
            </TimelineItem>
            <TimelineItem DotCss="e-icons e-circle-close" Disabled="true">
                <Content>Deployment (Pending)</Content>
                <OppositeContent>Mar 15, 2024</OppositeContent>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .demo-timeline .e-connector::after {
        border-color: #2196F3;
        border-width: 1.5px;
    }
    
    .demo-timeline .e-dot {
        background-color: #2196F3;
        border-color: #2196F3;
    }
</style>

@code {
    private void OnTimelineCreated()
    {
        Console.WriteLine("Timeline component initialized");
    }

    private void OnItemRendered(TimelineRenderedEventArgs args)
    {
        Console.WriteLine($"Rendered item at index: {args.Index}");
    }
}

---

Common Use Cases

1. Order/Shipping Tracking

<SfTimeline Alignment="TimelineAlignment.Before">
    <TimelineItems>
        <TimelineItem>
            <Content>Order Placed</Content>
            <OppositeContent>2024-01-10 10:00 AM</OppositeContent>
        </TimelineItem>
        <TimelineItem>
            <Content>Confirmed</Content>
            <OppositeContent>2024-01-10 11:30 AM</OppositeContent>
        </TimelineItem>
        <TimelineItem>
            <Content>Shipped</Content>
            <OppositeContent>2024-01-11 9:00 AM</OppositeContent>
        </TimelineItem>
        <TimelineItem>
            <Content>Delivered</Content>
            <OppositeContent>2024-01-13 3:00 PM</OppositeContent>
        </TimelineItem>
    </TimelineItems>
</SfTimeline>

2. Project Phases

<SfTimeline Orientation="TimelineOrientation.Horizontal">
    <TimelineItems>
        <TimelineItem><Content>Planning</Content></TimelineItem>
        <TimelineItem><Content>Design</Content></TimelineItem>
        <TimelineItem><Content>Development</Content></TimelineItem>
        <TimelineItem><Content>Testing</Content></TimelineItem>
        <TimelineItem><Content>Launch</Content></TimelineItem>
    </TimelineItems>
</SfTimeline>

3. Historical Timeline

<SfTimeline Alignment="TimelineAlignment.Alternate">
    <TimelineItems>
        <TimelineItem>
            <Content>Event 1</Content>
            <OppositeContent>1995</OppositeContent>
        </TimelineItem>
        <TimelineItem>
            <Content>Event 2</Content>
            <OppositeContent>2005</OppositeContent>
        </TimelineItem>
        <TimelineItem>
            <Content>Event 3</Content>
            <OppositeContent>2015</OppositeContent>
        </TimelineItem>
    </TimelineItems>
</SfTimeline>

---

Performance Considerations

• Large Timelines: For timelines with 100+ items, consider virtual scrolling or pagination
• Custom Templates: Complex templates may impact rendering performance
• Event Handlers: Keep event handlers lightweight to avoid blocking UI updates
• CSS Classes: Use CSS variables for styling to minimize DOM manipulation

---

Browser Support

The Timeline component supports all modern browsers:

• Chrome (Latest)
• Firefox (Latest)
• Safari (Latest)
• Edge (Latest)

---

See Also

• Getting Started
• Timeline Alignment
• Timeline Items
• Timeline Orientation
• Timeline Events
• Styling & Customization
• Templates & Advanced Patterns

Getting Started with Blazor Timeline Component

Table of Contents

• Prerequisites
• Create a Blazor WebAssembly App
• Install NuGet Packages
• Add Import Namespaces
• Register Syncfusion Service
• Add Stylesheet and Script Resources
• Add Timeline Component
• Run the Application

Prerequisites

Before you start, ensure you have the following:

• System requirements for Blazor components
• Visual Studio, Visual Studio Code, or .NET CLI installed
• Basic knowledge of Blazor components

Create a Blazor WebAssembly App

Using Visual Studio

1. Create a Blazor WebAssembly App using Visual Studio 2. Use Microsoft Templates or the Syncfusion Blazor Extension 3. For detailed instructions, refer to the Blazor WASM App Getting Started documentation

Using Visual Studio Code

1. Create a Blazor WebAssembly App using Visual Studio Code 2. Alternatively, use this command in the integrated terminal:

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Using .NET CLI

1. Install the latest version of .NET SDK 2. Run the following command:

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install NuGet Packages

To add the Blazor Timeline component to your app, install the following NuGet packages:

• Syncfusion.Blazor.Layouts - Contains the Timeline component
• Syncfusion.Blazor.Themes - Provides theme stylesheets

Using NuGet Package Manager (Visual Studio)

1. Open NuGet Package Manager: Tools → NuGet Package Manager → Manage NuGet Packages for Solution 2. Search for Syncfusion.Blazor.Layouts 3. Search for Syncfusion.Blazor.Themes 4. Click Install for both packages

Using Package Manager Console

Install-Package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

Using .NET CLI

dotnet add package Syncfusion.Blazor.Layouts -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
dotnet restore

Note: Syncfusion Blazor components are available on nuget.org. Refer to the NuGet packages topic for the available NuGet packages list.

Add Import Namespaces

Open the ~/_Imports.razor file in your Blazor application and add the following using statements:

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

This makes the Timeline component and related classes available throughout your application.

Register Syncfusion Service

Register the Syncfusion Blazor Service in the ~/Program.cs file:

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) });

// Register Syncfusion Blazor service
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>

Alternative Theme Options: You can use different themes by replacing material3.css with other available themes like bootstrap5.css, tailwind.css, or fluent.css.

Note: For more details on themes and other resource inclusion methods, check out the Blazor Themes topic and Adding Script Reference documentation.

Add Timeline Component

Add the Syncfusion Blazor Timeline component in your component file (e.g., ~/Pages/Index.razor):

@using Syncfusion.Blazor.Layouts

<div style="height: 250px;">
    <SfTimeline>
        <TimelineItems>
            <TimelineItem>
                <Content>Shipped</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>Departed</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>Arrived</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>Out for Delivery</Content>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

Run the Application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion Blazor Timeline component will render in your default web browser.

What You Should See

• A vertical timeline with four items
• Each item displays the content ("Shipped", "Departed", etc.)
• A visual connector line between items
• A dot indicator for each item

Next Steps

Once your basic Timeline is working:

1. Explore Alignment: Use different alignment modes (Before, After, Alternate, AlternateReverse) 2. Add Opposite Content: Display additional information opposite to the main content 3. Change Orientation: Switch between vertical and horizontal layouts 4. Customize Appearance: Apply custom CSS to dots, connectors, and items 5. Handle Events: Use Created and ItemRendered events for component lifecycle management

Troubleshooting

• Theme not loading: Verify the stylesheet path in index.html matches your installed package version
• Component not rendering: Ensure @using Syncfusion.Blazor.Layouts is in _Imports.razor
• Service errors: Confirm AddSyncfusionBlazor() is called in Program.cs
• Build errors: Reinstall NuGet packages with correct versions

Timeline Alignment

Table of Contents

• Overview
• Before Alignment
• After Alignment
• Alternate Alignment
• Alternate Reverse Alignment
• Using Opposite Content

Overview

The Alignment property controls how timeline content is displayed relative to the timeline axis. You can position content and opposite content in different arrangements to suit your layout needs.

The Timeline component supports four alignment options:

• Before: Content before/left, OppositeContent after/right
• After: Content after/right, OppositeContent before/left
• Alternate: Content alternates sides
• AlternateReverse: Content alternates in reverse order

Before Alignment

In Before alignment:

• For horizontal orientation: Item content is placed at the top, OppositeContent at the bottom
• For vertical orientation: Content is placed to the left, OppositeContent to the right

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline Alignment="TimelineAlignment.Before">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                    <OppositeContent> @item.OppositeContent </OppositeContent>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "ReactJs", OppositeContent = "Owned by Facebook" },
        new TimelineItemModel() { Content = "Angular", OppositeContent = "Owned by Google" },
        new TimelineItemModel() { Content = "VueJs", OppositeContent = "Owned by Evan you" },
        new TimelineItemModel() { Content = "Svelte", OppositeContent = "Owned by Rich Harris" }
    };
}

Use case: Ideal for displaying frameworks with their creators or events with their locations on opposite sides.

After Alignment

In After alignment:

• For horizontal orientation: Item content is placed at the bottom, OppositeContent at the top
• For vertical orientation: Content is placed to the right, OppositeContent to the left

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline Alignment="TimelineAlignment.After">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                    <OppositeContent> @item.OppositeContent </OppositeContent>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "ReactJs", OppositeContent = "Owned by Facebook" },
        new TimelineItemModel() { Content = "Angular", OppositeContent = "Owned by Google" },
        new TimelineItemModel() { Content = "VueJs", OppositeContent = "Owned by Evan you" },
        new TimelineItemModel() { Content = "Svelte", OppositeContent = "Owned by Rich Harris" }
    };
}

Use case: Reverse of Before alignment; useful for alternative visual flows.

Alternate Alignment

In Alternate alignment, item content is arranged alternatively on both sides, regardless of the Timeline orientation. This creates a balanced, zigzag pattern.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline Alignment="TimelineAlignment.Alternate">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                    <OppositeContent> @item.OppositeContent </OppositeContent>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "ReactJs", OppositeContent = "Owned by Facebook" },
        new TimelineItemModel() { Content = "Angular", OppositeContent = "Owned by Google" },
        new TimelineItemModel() { Content = "VueJs", OppositeContent = "Owned by Evan you" },
        new TimelineItemModel() { Content = "Svelte", OppositeContent = "Owned by Rich Harris" }
    };
}

Use case: Perfect for historical timelines, employee career progressions, or project milestones where you want balanced, alternating content display.

Alternate Reverse Alignment

In AlternateReverse alignment, item content is arranged in reverse alternate, regardless of the Timeline orientation. The items that would appear on the left in Alternate now appear on the right, and vice versa.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline Alignment="TimelineAlignment.AlternateReverse">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                    <OppositeContent> @item.OppositeContent </OppositeContent>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "ReactJs", OppositeContent = "Owned by Facebook" },
        new TimelineItemModel() { Content = "Angular", OppositeContent = "Owned by Google" },
        new TimelineItemModel() { Content = "VueJs", OppositeContent = "Owned by Evan you" },
        new TimelineItemModel() { Content = "Svelte", OppositeContent = "Owned by Rich Harris" }
    };
}

Use case: Alternative reverse alternation; useful when you want the opposite direction from standard Alternate.

Using Opposite Content

The OppositeContent is always displayed parallel to the main Content when configured within the TimelineItem directive. It allows you to display complementary information.

<TimelineItem>
    <Content>
        Main Information or Event
    </Content>
    <OppositeContent>
        Additional Information (Date, Location, Status, etc.)
    </OppositeContent>
</TimelineItem>

OppositeContent Examples:

• Shipping Timeline: Content = "Shipped", OppositeContent = "2024-01-15 10:00 AM"
• Project Timeline: Content = "Design Phase", OppositeContent = "Week 1-2"
• Career Timeline: Content = "Software Engineer", OppositeContent = "Jan 2023 - Present"
• Historical Timeline: Content = "Event Name", OppositeContent = "Date & Location"

Example with Different Alignments

@using Syncfusion.Blazor.Layouts

<div style="margin: 20px; padding: 20px; border: 1px solid #ddd;">
    <h3>Before Alignment</h3>
    <div style="height: 200px;">
        <SfTimeline Alignment="TimelineAlignment.Before">
            <TimelineItems>
                <TimelineItem>
                    <Content>Breakfast</Content>
                    <OppositeContent>8:00 AM</OppositeContent>
                </TimelineItem>
                <TimelineItem>
                    <Content>Lunch</Content>
                    <OppositeContent>1:00 PM</OppositeContent>
                </TimelineItem>
                <TimelineItem>
                    <Content>Dinner</Content>
                    <OppositeContent>8:00 PM</OppositeContent>
                </TimelineItem>
            </TimelineItems>
        </SfTimeline>
    </div>
</div>

<div style="margin: 20px; padding: 20px; border: 1px solid #ddd;">
    <h3>Alternate Alignment</h3>
    <div style="height: 200px;">
        <SfTimeline Alignment="TimelineAlignment.Alternate">
            <TimelineItems>
                <TimelineItem>
                    <Content>Breakfast</Content>
                    <OppositeContent>8:00 AM</OppositeContent>
                </TimelineItem>
                <TimelineItem>
                    <Content>Lunch</Content>
                    <OppositeContent>1:00 PM</OppositeContent>
                </TimelineItem>
                <TimelineItem>
                    <Content>Dinner</Content>
                    <OppositeContent>8:00 PM</OppositeContent>
                </TimelineItem>
            </TimelineItems>
        </SfTimeline>
    </div>
</div>

Choosing the Right Alignment

Key Properties Used

• Alignment="TimelineAlignment.Before|After|Alternate|AlternateReverse" - Sets the alignment mode
• <Content> - Primary content tag directive
• <OppositeContent> - Secondary content tag directive

Timeline Events

Table of Contents

• Overview
• Created Event
• ItemRendered Event
• Event Handling Patterns

Overview

The Timeline component triggers events at specific points in its lifecycle. These events allow you to execute custom code and react to component state changes.

Supported events:

• Created: Fires when the Timeline component rendering is completed
• ItemRendered: Fires after each Timeline item is rendered

Created Event

The Created event is triggered when the Timeline component finishes rendering. This is useful for initialization tasks that need to happen after the component is ready.

Basic Usage

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline Created="TimelineCreated">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private void TimelineCreated()
    {
        Console.WriteLine("Timeline component has been created successfully.");
        // Perform initialization tasks here
    }

    public class TimelineItemModel
    {
        public string Content { get; set; }
    }

    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planning" },
        new TimelineItemModel() { Content = "Developing" },
        new TimelineItemModel() { Content = "Testing" },
        new TimelineItemModel() { Content = "Launch" }
    };
}

When to Use

• Initialize related components
• Load additional data
• Log analytics events
• Trigger animations or transitions
• Set up event listeners on the DOM
• Update parent component state

Example with Side Effects

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <p>@statusMessage</p>
    <SfTimeline Created="OnTimelineCreated">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private string statusMessage = "Loading...";

    private void OnTimelineCreated()
    {
        statusMessage = "Timeline ready with " + timelineItems.Count + " items";
        Console.WriteLine("Timeline initialized at: " + DateTime.Now);
    }

    public class TimelineItemModel
    {
        public string Content { get; set; }
    }

    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planning" },
        new TimelineItemModel() { Content = "Developing" },
        new TimelineItemModel() { Content = "Testing" },
        new TimelineItemModel() { Content = "Launch" }
    };
}

ItemRendered Event

The ItemRendered event is triggered after each individual Timeline item is rendered. This is useful for applying custom styling or logic to specific items.

Event Arguments

The ItemRendered event receives TimelineRenderedEventArgs with the following information:

• Event information and context

Basic Usage

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline ItemRendered="TimelineItemRendered">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private void TimelineItemRendered(TimelineRenderedEventArgs args)
    {
        // Custom logic for each rendered item
        Console.WriteLine("Item rendered");
    }

    public class TimelineItemModel
    {
        public string Content { get; set; }
    }

    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planning" },
        new TimelineItemModel() { Content = "Developing" },
        new TimelineItemModel() { Content = "Testing" },
        new TimelineItemModel() { Content = "Launch" }
    };
}

Tracking Rendered Items

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <p>Items rendered: @renderedCount</p>
    <SfTimeline ItemRendered="OnItemRendered">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private int renderedCount = 0;

    private void OnItemRendered(TimelineRenderedEventArgs args)
    {
        renderedCount++;
        Console.WriteLine($"Rendered {renderedCount} items");
    }

    public class TimelineItemModel
    {
        public string Content { get; set; }
    }

    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planning" },
        new TimelineItemModel() { Content = "Developing" },
        new TimelineItemModel() { Content = "Testing" },
        new TimelineItemModel() { Content = "Launch" }
    };
}

Event Handling Patterns

Pattern 1: Simple Event Handler

<SfTimeline Created="OnCreated">
    <!-- content -->
</SfTimeline>

@code {
    private void OnCreated()
    {
        // Handle event
    }
}

Pattern 2: Event with Arguments

<SfTimeline ItemRendered="OnItemRendered">
    <!-- content -->
</SfTimeline>

@code {
    private void OnItemRendered(TimelineRenderedEventArgs args)
    {
        // Access event arguments
    }
}

Pattern 3: Async Event Handler

<SfTimeline Created="OnCreatedAsync">
    <!-- content -->
</SfTimeline>

@code {
    private async Task OnCreatedAsync()
    {
        // Perform async operations
        await Task.Delay(1000);
        Console.WriteLine("Timeline created after delay");
    }
}

Pattern 4: Multiple Events

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <p>@eventLog</p>
    <SfTimeline Created="OnCreated" ItemRendered="OnItemRendered">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private string eventLog = "";

    private void OnCreated()
    {
        eventLog += "Created event fired\n";
    }

    private void OnItemRendered(TimelineRenderedEventArgs args)
    {
        eventLog += "Item rendered event fired\n";
    }

    public class TimelineItemModel
    {
        public string Content { get; set; }
    }

    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planning" },
        new TimelineItemModel() { Content = "Developing" },
        new TimelineItemModel() { Content = "Testing" },
        new TimelineItemModel() { Content = "Launch" }
    };
}

Event Lifecycle

Timeline events fire in this order:

1. Component initialization 2. Created event fires (once per component lifecycle) 3. Items begin rendering 4. ItemRendered event fires (once per item) 5. All items rendered, component fully ready

Common Use Cases

Initialize Data After Timeline Loads

private async Task OnCreatedAsync()
{
    // Load additional data from service
    var data = await dataService.GetTimelineData();
    // Update component state
}

Track Item Rendering Progress

private void OnItemRendered(TimelineRenderedEventArgs args)
{
    renderedCount++;
    if (renderedCount == totalItems)
    {
        Console.WriteLine("All items rendered!");
    }
}

Apply Dynamic Styling

private void OnItemRendered(TimelineRenderedEventArgs args)
{
    // Apply dynamic CSS or logic to rendered items
}

Event Reference

Timeline Items

Table of Contents

• Overview
• Adding Content
• String Content
• Template Content
• Opposite Content
• Customizing Dots
• Disabling Items
• CSS Classes

Overview

Timeline items are added using the TimelineItem tag directive. Each item represents a single event or milestone in your timeline sequence. Items are configured with properties like Content, OppositeContent, DotCss, Disabled, and CssClass.

Adding Content

Define item content using the Content tag directive as a child to the TimelineItem directive.

String Content

The simplest way to add content is using plain strings:

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline>
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Shipped" },
        new TimelineItemModel() { Content = "Departed" },
        new TimelineItemModel() { Content = "Arrived" },
        new TimelineItemModel() { Content = "Out for Delivery" }
    };
}

When to use: Simple text-only timelines, status tracking, step-by-step processes.

Template Content

Specify complex template content for items by including HTML and components within the Content tag directive:

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 400px">
    <SfTimeline>
        <ChildContent>
            <TimelineItems>
                @foreach (var item in timelineItems)
                {
                    <TimelineItem>
                        <Content>
                            <div class="content-container">
                                <div class="title">
                                    @item.Title
                                </div>
                                <div class="description">
                                    @item.Description
                                </div>
                                <div class="info">
                                    @item.Info
                                </div>
                            </div>
                        </Content>
                    </TimelineItem>
                }
                <TimelineItem>
                    <Content> Out for Delivery </Content>
                </TimelineItem>
            </TimelineItems>
        </ChildContent>
    </SfTimeline>
</div>

<style>
    .content-container {
        position: relative;
        width: 180px;
        padding: 10px;
        margin-left: 5px;
        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        background-color: ghostwhite;
    }

    .content-container::before {
        content: '';
        position: absolute;
        left: -8px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 8px solid silver;
    }

    .content-container .title {
        font-size: 16px;
        font-weight: bold;
    }

    .content-container .description {
        color: #999999;
        font-size: 12px;
        margin-top: 5px;
    }

    .content-container .info {
        color: #999999;
        font-size: 10px;
        margin-top: 5px;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public string Info { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Title = "Shipped", Description = "Package details received", Info = "- Awaiting dispatch" },
        new TimelineItemModel() { Title = "Departed", Description = "In-transit", Info = "(International warehouse)" },
        new TimelineItemModel() { Title = "Arrived", Description = "Package arrived at nearest hub", Info = "(New york - US)" },
    };
}

When to use: Complex layouts, formatted information, multiple data fields per item, styled content boxes.

Opposite Content

Additional information can be added to each Timeline item using the OppositeContent tag directive. This content is positioned opposite to the item's main Content, and works with any alignment mode.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 250px">
    <SfTimeline>
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content>
                        @item.Content
                    </Content>
                    <OppositeContent>
                        @item.OppositeContent
                    </OppositeContent>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Breakfast", OppositeContent = "8:00 AM" },
        new TimelineItemModel() { Content = "Lunch", OppositeContent = "1:00 PM" },
        new TimelineItemModel() { Content = "Dinner", OppositeContent = "8:00 PM" },
    };
}

When to use: Pairing events with timestamps, locations with descriptions, primary and secondary information.

Customizing Dots

The DotCss property allows defining a CSS class to set icons, background colors, or images on timeline dots.

Adding Icons

Define a CSS class with icon styling using DotCss:

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 250px">
    <SfTimeline>
        <TimelineItems>
            <TimelineItem DotCss="e-icons e-check">
                <Content>Completed</Content>
            </TimelineItem>
            <TimelineItem DotCss="e-icons e-close">
                <Content>Cancelled</Content>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

Available icon classes: Use e-icons class with icon names like e-check, e-close, e-download, e-upload, etc.

Adding Images

Include images for Timeline items using DotCss by setting CSS background-image:

<style>
    .e-dot.custom-image {
        background-image: url('./dot-image.png');
        background-size: cover;
    }
</style>

<TimelineItem DotCss="custom-image">
    <Content>Image Dot</Content>
</TimelineItem>

Adding Text

Display text on dots using DotCss with CSS content property:

<style>
    .e-dot.custom-text::before {
        content: 'A';
        font-weight: bold;
        color: white;
    }
</style>

<TimelineItem DotCss="custom-text">
    <Content>Text Dot</Content>
</TimelineItem>

Complete Example

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 250px">
    <SfTimeline>
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem DotCss=@item.DotCss>
                    <Content>@item.Content</Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .e-dot.custom-image { background-image: url('./dot-image.png'); }
    .e-dot.custom-text::before { content: 'A'; }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string DotCss { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new()
    {
        new() { Content = "Default" },
        new() { Content = "Check", DotCss = "e-icons e-check" },
        new() { Content = "Image", DotCss = "custom-image" },
        new() { Content = "Text", DotCss = "custom-text" }
    };
}

Disabling Items

Use the Disabled property to disable an item. When set to true, the item appears disabled with reduced opacity. By default, its value is false.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 250px">
    <SfTimeline>
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem Disabled=@item.Disabled>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public bool Disabled { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Eat" },
        new TimelineItemModel() { Content = "Code" },
        new TimelineItemModel() { Content = "Repeat", Disabled = true },
    };
}

When to use: Show pending/incomplete steps, disable future milestones, indicate skipped items.

CSS Classes

Customize the appearance of a Timeline item by specifying a custom CSS class using the CssClass property. This applies styling to the entire item element.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 250px">
    <SfTimeline>
        <TimelineItems>
            <TimelineItem CssClass="item-pending">
                <Content>Pending Task</Content>
            </TimelineItem>
            <TimelineItem CssClass="item-completed">
                <Content>Completed Task</Content>
            </TimelineItem>
            <TimelineItem CssClass="item-important">
                <Content>Important Task</Content>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .item-pending {
        opacity: 0.6;
    }

    .item-completed {
        opacity: 1;
    }

    .item-important {
        font-weight: bold;
    }
</style>

When to use: Apply different styling based on status, importance, or category.

Key Properties Reference

Timeline Orientation

Table of Contents

• Overview
• Vertical Orientation
• Horizontal Orientation
• Combining with Alignment
• Responsive Considerations

Overview

The Orientation property controls the direction in which Timeline items are displayed. The Timeline component supports both vertical and horizontal layouts to accommodate different design requirements.

Two orientation options:

• Vertical: Items displayed sequentially from top to bottom (default)
• Horizontal: Items displayed side-by-side from left to right

Vertical Orientation

Vertical orientation displays items sequentially from top to bottom. This is the default orientation and works well for mobile devices and narrow containers.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline Orientation=TimelineOrientation.Vertical>
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content>
                        @item.Content
                    </Content>
                    <OppositeContent>
                        @item.OppositeContent
                    </OppositeContent>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Day 1, 4:00 PM", OppositeContent = "Check-in and campsite visit" },
        new TimelineItemModel() { Content = "Day 1, 7:00 PM", OppositeContent = "Dinner with music" },
        new TimelineItemModel() { Content = "Day 2, 5:30 AM", OppositeContent = "Sunrise between mountains" },
        new TimelineItemModel() { Content = "Day 2, 8:00 AM", OppositeContent = "Breakfast and check-out" }
    };
}

When to use:

• Mobile and tablet displays
• Long sequences of events
• When space width is limited
• Default and most compatible option

Alignment behavior in vertical mode:

• Before: Content on left, OppositeContent on right
• After: Content on right, OppositeContent on left
• Alternate: Content alternates left/right
• AlternateReverse: Content alternates right/left

Horizontal Orientation

Horizontal orientation displays items side-by-side from left to right. This layout works best for shorter sequences and wider screens.

@using Syncfusion.Blazor.Layouts

<SfTimeline Orientation=TimelineOrientation.Horizontal>
    <TimelineItems>
        @foreach (var item in timelineItems)
        {
            <TimelineItem>
                <Content>
                    @item.Content
                </Content>
                <OppositeContent>
                    @item.OppositeContent
                </OppositeContent>
            </TimelineItem>
        }
    </TimelineItems>
</SfTimeline>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Day 1, 4:00 PM", OppositeContent = "Check-in and campsite visit" },
        new TimelineItemModel() { Content = "Day 1, 7:00 PM", OppositeContent = "Dinner with music" },
        new TimelineItemModel() { Content = "Day 2, 5:30 AM", OppositeContent = "Sunrise between mountains" },
        new TimelineItemModel() { Content = "Day 2, 8:00 AM", OppositeContent = "Breakfast and check-out" }
    };
}

When to use:

• Desktop and wide-screen displays
• Short sequences (3-6 items recommended)
• Project phases or workflow steps
• When horizontal space is available

Alignment behavior in horizontal mode:

• Before: Content above, OppositeContent below
• After: Content below, OppositeContent above
• Alternate: Content alternates top/bottom
• AlternateReverse: Content alternates bottom/top

Combining with Alignment

The orientation and alignment work together to create different layouts. Here's how they interact:

Vertical + Before Alignment

<SfTimeline Orientation=TimelineOrientation.Vertical Alignment=TimelineAlignment.Before>
    <!-- Content on left, OppositeContent on right -->
</SfTimeline>

Vertical + Alternate Alignment

<SfTimeline Orientation=TimelineOrientation.Vertical Alignment=TimelineAlignment.Alternate>
    <!-- Content alternates left/right -->
</SfTimeline>

Horizontal + Before Alignment

<SfTimeline Orientation=TimelineOrientation.Horizontal Alignment=TimelineAlignment.Before>
    <!-- Content above, OppositeContent below -->
</SfTimeline>

Horizontal + Alternate Alignment

<SfTimeline Orientation=TimelineOrientation.Horizontal Alignment=TimelineAlignment.Alternate>
    <!-- Content alternates top/bottom -->
</SfTimeline>

Responsive Considerations

For responsive designs, consider switching orientation based on screen width:

@using Syncfusion.Blazor.Layouts

<div class="responsive-timeline">
    <SfTimeline Orientation="@selectedOrientation">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                    <OppositeContent> @item.OppositeContent </OppositeContent>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private TimelineOrientation selectedOrientation = TimelineOrientation.Vertical;

    protected override void OnInitialized()
    {
        // Set orientation based on window width
        // In production, use JavaScript interop or media queries
        selectedOrientation = TimelineOrientation.Vertical;
    }

    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string OppositeContent { get; set; }
    }

    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Phase 1", OppositeContent = "Q1 2024" },
        new TimelineItemModel() { Content = "Phase 2", OppositeContent = "Q2 2024" },
        new TimelineItemModel() { Content = "Phase 3", OppositeContent = "Q3 2024" }
    };
}

Recommendations:

• Mobile (< 768px): Use Vertical orientation
• Tablet (768px - 1024px): Use Vertical, allow horizontal for longer sequences
• Desktop (> 1024px): Horizontal can work, choose based on sequence length

Default Orientation

The default orientation is Vertical. If you don't specify the Orientation property, items will display vertically from top to bottom.

<SfTimeline>
    <!-- Defaults to Vertical orientation -->
    <TimelineItems>
        <!-- ... -->
    </TimelineItems>
</SfTimeline>

Layout Comparison

Key Properties

• Orientation="TimelineOrientation.Vertical|Horizontal" - Sets the layout direction
• Works in combination with Alignment property
• Affects how content and opposite content are positioned

Timeline Styling & Customization

Table of Contents

• Overview
• Connector Styling
• Dot Styling
• CSS Variables
• Dot Outline Mode
• Common Styling Patterns

Overview

The Timeline component provides extensive customization options through CSS. You can style connectors, dots, colors, sizes, shadows, and more using component-level CSS classes or custom classes applied via CssClass property.

Connector Styling

Connectors are the lines connecting Timeline items. They can be customized with colors, widths, and styles.

Common Connector Styling

Apply styles to all Timeline item connectors using the CSS selector .e-timeline-item.e-connector::after:

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 250px">
    <SfTimeline CssClass="custom-connector">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .custom-connector .e-timeline-item.e-connector::after {
        border-color: #f7c867;
        border-width: 1.4px;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Eat" },
        new TimelineItemModel() { Content = "Code" },
        new TimelineItemModel() { Content = "Repeat" }
    };
}

Individual Connector Styling

Apply unique styles to individual connectors to differentiate specific items:

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 250px">
    <SfTimeline CssClass="custom-connector">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem CssClass=@item.CssClass>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .custom-connector .state-initial.e-connector::after {
        border: 1.5px #f8c050 dashed;
    }

    .custom-connector .state-intermediate.e-connector::after {
        border: 1.5px #4d85f5 dashed;
    }

    .custom-connector .state-completed.e-connector::after {
        border: 1.5px #00c300 solid;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string CssClass { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planned", CssClass = "state-initial" },
        new TimelineItemModel() { Content = "In Progress", CssClass = "state-intermediate" },
        new TimelineItemModel() { Content = "Completed", CssClass = "state-completed" }
    };
}

Connector properties:

• border-color: Color of the connector line
• border-width: Thickness of the line
• border-style: Style (solid, dashed, dotted)

Dot Styling

Dots are the visual indicators for each Timeline item. They can be customized extensively.

Dot Color

Modify dot colors to highlight specific items. Use the .e-dot class selector:

@using Syncfusion.Blazor.Layouts

<div class="container">
    <SfTimeline CssClass="dot-color">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem CssClass=@item.CssClass>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .dot-color .state-completed .e-dot {
        background: #ff9900;
        outline: 1px dashed #ff9900;
        border-color: #ff9900;
    }

    .dot-color .state-progress .e-dot {
        background: #33cc33;
        outline: 1px dashed #33cc33;
        border-color: #33cc33;
    }

    .container {
        height: 250px;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string CssClass { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Ordered", CssClass = "state-completed" },
        new TimelineItemModel() { Content = "Shipped", CssClass = "state-progress" },
        new TimelineItemModel() { Content = "Delivered" }
    };
}

Dot Size

Adjust dot size using the --dot-size CSS variable:

@using Syncfusion.Blazor.Layouts

<div class="container">
    <SfTimeline CssClass="dot-size">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem CssClass=@item.CssClass>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .dot-size .e-dot {
        background: #33cc33;
    }

    .dot-size .x-small .e-dot {
        --dot-size: 12px;
    }

    .dot-size .small .e-dot {
        --dot-size: 18px;
    }

    .dot-size .medium .e-dot {
        --dot-size: 24px;
    }

    .dot-size .large .e-dot {
        --dot-size: 30px;
    }

    .container {
        height: 250px;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string CssClass { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Extra Small", CssClass = "x-small" },
        new TimelineItemModel() { Content = "Small", CssClass = "small" },
        new TimelineItemModel() { Content = "Medium", CssClass = "medium" },
        new TimelineItemModel() { Content = "Large", CssClass = "large" }
    };
}

Dot Shadow

Add shadow effects to dots using CSS variables:

@using Syncfusion.Blazor.Layouts

<div class="container">
    <SfTimeline CssClass="dot-shadow">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .dot-shadow .e-dot {
        --dot-outer-space: 3px;
        --dot-border: 3px;
        --dot-size: 20px;
        outline-color: #dee2e6;
        border-color: #fff;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5), 2px -2px 4px rgba(255, 255, 255, 0.5) inset;
    }

    .container {
        height: 250px;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Ordered" },
        new TimelineItemModel() { Content = "Shipped" },
        new TimelineItemModel() { Content = "Delivered" }
    };
}

Dot Variant

Create dot variants with different styles using pseudo-elements and CSS properties:

@using Syncfusion.Blazor.Layouts

<div class="container">
    <SfTimeline CssClass="dot-variant">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem CssClass=@item.CssClass>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .dot-variant .dot-filled .e-dot::before {
        content: 'A';
        color: #fff;
    }

    .dot-variant .dot-flat .e-dot::before {
        content: 'B';
        color: #fff;
    }

    .dot-variant .dot-outlined .e-dot::before {
        content: 'C';
    }

    .dot-variant .dot-filled .e-dot {
        background: #33cc33;
        --dot-outer-space: 3px;
        outline-color: #81ff05;
        --dot-size: 25px;
    }

    .dot-variant .dot-flat .e-dot {
        background: #33cc33;
        --dot-size: 25px;
        --dot-radius: 10%;
    }

    .dot-variant .dot-outlined .e-dot {
        outline-color: #33cc33;
        --dot-outer-space: 3px;
        background-color: unset;
        --dot-size: 25px;
    }

    .container {
        height: 250px;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
        public string CssClass { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Filled", CssClass = "dot-filled" },
        new TimelineItemModel() { Content = "Flat", CssClass = "dot-flat" },
        new TimelineItemModel() { Content = "Outlined", CssClass = "dot-outlined" }
    };
}

CSS Variables

Timeline provides CSS variables for fine-grained dot customization:

Dot Outline Mode

Enable outline mode using the e-outline class on the Timeline's CssClass property:

@using Syncfusion.Blazor.Layouts

<div class="container">
    <SfTimeline CssClass="e-outline">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content>
                        @item.Content
                    </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

<style>
    .container {
        height: 250px;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Shipped" },
        new TimelineItemModel() { Content = "Departed" },
        new TimelineItemModel() { Content = "Arrived" },
        new TimelineItemModel() { Content = "Out for Delivery" }
    };
}

Effect: Dots have a distinct outline style with hollow centers, visually emphasizing each item.

Common Styling Patterns

Pattern 1: Status-Based Colors

.status-pending .e-dot { background: #ffc107; }
.status-active .e-dot { background: #2196F3; }
.status-completed .e-dot { background: #4CAF50; }

Pattern 2: Gradient Dots

.gradient-dot .e-dot {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Pattern 3: Icon Dots

.icon-dot .e-dot::before {
    content: '✓';
    color: white;
    font-weight: bold;
}

Pattern 4: Animated Connectors

.animated-connector .e-timeline-item.e-connector::after {
    animation: connectorAnimation 1s ease-in-out infinite;
}

@keyframes connectorAnimation {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

Key CSS Selectors

Timeline Templates & Advanced Patterns

Table of Contents

• Overview
• Template Directive
• Template Context
• Complete Template Example
• Advanced Patterns
• Progress Bar Pattern

Overview

The Template tag directive allows complete customization of Timeline item appearance. With templates, you can:

• Create custom dot designs
• Build progress indicators
• Add custom connectors
• Implement complex layouts
• Render dynamic content

Template Directive

The Timeline component's Template directive provides access to each item's data and allows you to render a completely custom item structure.

<SfTimeline>
    <ChildContent>
        <TimelineItems>
            <!-- Define your items -->
        </TimelineItems>
    </ChildContent>
    <Template>
        <!-- Your custom template markup -->
    </Template>
</SfTimeline>

Template Context

The Template context provides the following information:

Accessing Item Data

<Template>
    <div>
        Current Index: @context.ItemIndex
        Item Data: @context.Item
    </div>
</Template>

Accessing Item Content

<Template>
    <div>
        @context.Item.Content(context)
    </div>
</Template>

Complete Template Example

Here's a comprehensive example showing custom template implementation with progress bars and styling:

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 150px; width: 600px;">
    <SfTimeline Orientation=TimelineOrientation.Horizontal CssClass="custom-timeline">
        <ChildContent>
            <TimelineItems>
                @foreach (var item in timelineItems)
                {
                    <TimelineItem>
                        <Content>
                            @item.Content
                        </Content>
                    </TimelineItem>
                }
            </TimelineItems>
        </ChildContent>
        <Template>
            <div class="@("template-container" + " " + "item-" + context.ItemIndex)">
                <div class="content-container">
                    <div class="timeline-content"> @context.Item.Content(context) </div>
                </div>
                <div class="content-connector"></div>
                <div class="progress-line">
                    <span class="indicator"></span>
                </div>
            </div>
        </Template>
    </SfTimeline>
</div>

<style>
    .container * {
        box-sizing: unset;
    }

    .custom-timeline .e-timeline-item.e-item-template {
        align-items: flex-end;
    }

    .custom-timeline .e-timeline-items {
        justify-content: center;
    }

    .template-container .content-connector {
        position: absolute;
        left: 88%;
        width: 3px;
        height: 28px;
    }

    .template-container .content-container {
        padding: 8px;
        border-width: 1px;
        border-style: solid;
    }

    .content-container .timeline-content {
        font-size: 14px;
    }

    /* Color customizations - Progress line, connector line, dot border */
    .item-0 .progress-line,
    .item-0 .content-connector {
        background-color: rgb(233, 93, 93);
    }

    .item-1 .progress-line,
    .item-1 .content-connector {
        background-color: rgba(247, 179, 22, 0.907);
    }

    .item-2 .progress-line,
    .item-2 .content-connector {
        background-color: rgb(60, 184, 60);
    }

    .item-3 .progress-line,
    .item-3 .content-connector {
        background-color: rgb(153, 29, 230);
    }

    .item-0 .progress-line .indicator,
    .item-0 .content-container {
        border-color: rgb(233, 93, 93);
    }

    .item-1 .progress-line .indicator,
    .item-1 .content-container {
        border-color: rgba(247, 179, 22, 0.907);
    }

    .item-2 .progress-line .indicator,
    .item-2 .content-container {
        border-color: rgb(60, 184, 60);
    }

    .item-3 .progress-line .indicator,
    .item-3 .content-container {
        border-color: rgb(153, 29, 230);
    }

    .item-0 .content-container {
        box-shadow: 2px 2px 8px rgb(233, 93, 93);
    }

    .item-1 .content-container {
        box-shadow: 2px 2px 8px rgba(247, 179, 22, 0.907);
    }

    .item-2 .content-container {
        box-shadow: 2px 2px 8px rgb(60, 184, 60);
    }

    .item-3 .content-container {
        box-shadow: 2px 2px 8px rgb(153, 29, 230);
    }

    /* Customizing Dot and progress line */
    .custom-timeline .template-container .indicator {
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #fff;
        border-width: 6px;
        border-style: solid;
        left: 88%;
        transform: translate(-50%, -40%);
        cursor: pointer;
    }

    .progress-line {
        position: absolute;
        height: 10px;
        width: 100%;
        left: 0;
        top: 50%;
    }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }

    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Kickoff meeting" },
        new TimelineItemModel() { Content = "Content approved" },
        new TimelineItemModel() { Content = "Design approved" },
        new TimelineItemModel() { Content = "Product delivered" }
    };
}

Advanced Patterns

Pattern 1: Item Index-Based Styling

Apply different styling based on item index:

<Template>
    <div class="@("item-step-" + context.ItemIndex)">
        <div class="step-number">@(context.ItemIndex + 1)</div>
        <div class="step-content">@context.Item.Content(context)</div>
    </div>
</Template>

<style>
    .item-step-0 { --step-color: #ff6b6b; }
    .item-step-1 { --step-color: #4ecdc4; }
    .item-step-2 { --step-color: #45b7d1; }
    .item-step-3 { --step-color: #96ceb4; }

    .step-number {
        background: var(--step-color);
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

Pattern 2: Conditional Rendering

Render different content based on conditions:

<Template>
    <div>
        @if (context.ItemIndex == 0)
        {
            <div class="first-item">
                <strong>START: </strong> @context.Item.Content(context)
            </div>
        }
        else if (context.ItemIndex == timelineItems.Count - 1)
        {
            <div class="last-item">
                <strong>END: </strong> @context.Item.Content(context)
            </div>
        }
        else
        {
            <div class="middle-item">
                @context.Item.Content(context)
            </div>
        }
    </div>
</Template>

Pattern 3: Status Indicators

Show status with visual indicators:

<Template>
    <div class="status-item">
        <div class="status-badge @("badge-" + statusList[context.ItemIndex])">
            @statusList[context.ItemIndex]
        </div>
        <div class="status-content">@context.Item.Content(context)</div>
    </div>
</Template>

<style>
    .badge-completed { background: #4CAF50; color: white; }
    .badge-pending { background: #FFC107; color: black; }
    .badge-failed { background: #F44336; color: white; }
</style>

@code {
    private List<string> statusList = new() { "Completed", "Pending", "Completed", "Pending" };
}

Progress Bar Pattern

Create a progress bar using templates:

@using Syncfusion.Blazor.Layouts

<div style="padding: 30px;">
    <div>Progress: @Math.Round((completedItems / (double)timelineItems.Count) * 100)%</div>
    <div style="width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; margin: 10px 0;">
        <div style="width: @($"{(completedItems / (double)timelineItems.Count) * 100}%"); height: 100%; background: #4CAF50; border-radius: 4px; transition: width 0.3s ease;"></div>
    </div>
</div>

<SfTimeline CssClass="progress-timeline">
    <ChildContent>
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content>@item.Content</Content>
                </TimelineItem>
            }
        </TimelineItems>
    </ChildContent>
    <Template>
        <div class="progress-item @("status-" + (context.ItemIndex < completedItems ? "done" : "pending"))">
            <div class="progress-dot">
                @if (context.ItemIndex < completedItems)
                {
                    <span class="checkmark">✓</span>
                }
                else
                {
                    <span class="pending-dot"></span>
                }
            </div>
            <div class="progress-content">@context.Item.Content(context)</div>
        </div>
    </Template>
</SfTimeline>

<style>
    .progress-item.status-done .progress-dot {
        background: #4CAF50;
        color: white;
    }

    .progress-item.status-pending .progress-dot {
        background: #ccc;
        color: #999;
    }

    .progress-dot {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .checkmark { font-size: 18px; }
</style>

@code {
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }

    private int completedItems = 2;

    private List<TimelineItemModel> timelineItems = new()
    {
        new TimelineItemModel() { Content = "Phase 1" },
        new TimelineItemModel() { Content = "Phase 2" },
        new TimelineItemModel() { Content = "Phase 3" },
        new TimelineItemModel() { Content = "Phase 4" }
    };
}

Template Best Practices

1. Keep templates simple: Complex templates can impact performance 2. Use Index wisely: Use ItemIndex for conditional styling and logic 3. Access content correctly: Use @context.Item.Content(context) to render item content 4. Style appropriately: Apply CSS for better visual hierarchy 5. Performance: Minimize DOM operations in templates 6. Consistency: Keep styling consistent across all items unless intentional variation

Template vs Content Directive