Introducing the New Blazor Timeline Component
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (215)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (228)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (948)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (141)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (662)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (619)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Introducing the New Blazor Timeline Component

TLDR: Exploring the robust features of the new Syncfusion Blazor Timeline, highlighting its orientation, items alignment, and customization of displaying items using templates. 

We’re thrilled to introduce the new Syncfusion Blazor Timeline component as part of our Essential Studio 2024 Volume 1 release.

The Blazor Timeline is a tool to display a series of data in chronological order, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more. It includes several built-in features, such as orientation, opposite content, item alignment, reverse timeline, and template customization.

Integrating the Timeline Component in Blazor
Integrating the Timeline Component in Blazor

In this blog, we’ll explore the key features of the Blazor Timeline component.

Use Cases

The Blazor Timeline component is well-suited for various applications:

  • Historical Events: Showcase historical milestones or company achievements with a clear and organized display of events over different years.
  • Project Management: Effortlessly track project milestones, deadlines, and achievements, providing teams with a visual representation of progress throughout the project lifecycle.
  • Order Tracking: Guide users through the stages of an e-commerce application, from adding items to the cart to finalizing orders with clear and organized steps.

Key Features

The key features of the Timeline component are as follows: 

Orientations

The Blazor Timeline component has two orientation modes:

  • Horizontal: Displays items side-by-side.
  • Vertical: Default orientation that displays items one below the other.

In the following code example, the Orientation property defines the layout options with possible values of TimelineOrientation.

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

<SfButton OnClick="ChangeOrientation">Change Orientation</SfButton>

<div class="timeline-component" style="height: 350px">
    <SfTimeline Orientation="@orientation">
        <TimelineItems>
            <TimelineItem>
                <Content>January 1, 2022</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>April 5, 2023</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>February 12, 2024</Content>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private TimelineOrientation orientation = TimelineOrientation.Horizontal;

    private void ChangeOrientation()
    {
        orientation = orientation == TimelineOrientation.Horizontal ? TimelineOrientation.Vertical : TimelineOrientation.Horizontal;
    }
}
Orientations options in Blazor Timeline
Orientations options in Blazor Timeline

Note: For more details, refer to layout options in Blazor Timeline and GitHub demos.

Display Additional Information

Enhance each timeline item with supplementary information positioned alongside the main content. This additional information, placed opposite to the main content, enriches the context of every item, providing users with a comprehensive view of the timeline.

You can set the supplementary information for each item using the OppositeContent property.

Refer to the following example.

@using Syncfusion.Blazor.Layouts

<div class="timeline-component" style="height: 350px">
 <SfTimeline>
  <TimelineItems>
   <TimelineItem>
    <Content>Order Recieved</Content>
    <OppositeContent>6:45 PM</OppositeContent>
   </TimelineItem>
   <TimelineItem>
    <Content>Preparing Order</Content>
    <OppositeContent>6:50 PM</OppositeContent>
   </TimelineItem>
   <TimelineItem>
    <Content>On The Way</Content>
    <OppositeContent>7:05 PM</OppositeContent>
   </TimelineItem>
   <TimelineItem>
    <Content>Delivered!</Content>
    <OppositeContent>7:15 PM</OppositeContent>
   </TimelineItem>
  </TimelineItems>
 </SfTimeline>
</div>
Display Additional Information in Blazor Timeline
Display Additional Information in Blazor Timeline

Note: For more details, refer to set additional information to each Timeline item documentation.

Items alignment

The Blazor Timeline component supports aligning the items’ content and opposite content as follows:

  • Before: Align the item content to the left (or top for horizontal orientation) and the opposite content to the right (or bottom).
  • After: The default alignment aligns the item content to the right (or bottom for horizontal orientation) and the opposite content to the left (or top).
  • Alternate: Align the content of the first item to the right and the opposite content to the left, and vice versa for subsequent items.
  • AlternateReverse: Align the content of the first item to the left and the opposite content to the right, and vice versa for subsequent items.

In the following code example, the Alignment property aligns the items’ content and opposite content with possible values specified by TimelineAlignment.

@using Syncfusion.Blazor.Layouts

<div class="timeline-component" style="height: 350px">
    <SfTimeline Alignment="TimelineAlignment.Alternate">
        <TimelineItems>
            <TimelineItem>
                <Content>Order Recieved</Content>
                <OppositeContent>6:45 PM</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Preparing Order</Content>
                <OppositeContent>6:50 PM</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>On The Way</Content>
                <OppositeContent>7:05 PM</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Delivered!</Content>
                <OppositeContent>7:15 PM</OppositeContent>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>
Items alignment in Blazor Timeline
Items alignment in Blazor Timeline

Note: For more details, refer to aligning the items’ content and opposite content documentation and the GitHub live demo.

Reverse Timeline

The Blazor Timeline component offers the option to present timeline items in reverse order, providing a unique perspective and enhancing user engagement. This feature allows users to focus on the most recent events first, improving the overall usability of the timeline.

You can specify whether to display the Timeline items in reverse order using the Reverse property.

Refer to the following code example.

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

<SfButton OnClick="UpdateTimeline">Change to Reverse</SfButton>

<div class="timeline-component" style="height: 350px">
    <SfTimeline Reverse="@isReverseTimeline" CssClass="custom-timeline">
        <TimelineItems>
            <TimelineItem DotCss="completed-state" CssClass="connector-success">
                <Content>Order</Content>
            </TimelineItem>
            <TimelineItem DotCss="in-progress-state" CssClass=@(isReverseTimeline ? "connector-success" : "")>
                <Content>Shipped</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>Out for delivery</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>Delivered</Content>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private bool isReverseTimeline { get; set; } = false;

    private void UpdateTimeline()
    {
        isReverseTimeline = !isReverseTimeline;
    }
}

<style>

    .custom-timeline .in-progress-state {
        background-color: #0078D6;
        --dot-size: 24px;
        --dot-border: 3px;
    }

    .custom-timeline .completed-state {
        background-color: #4CAF50;
    }

    .custom-timeline .e-timeline-item.e-connector.connector-success::after {
        border-color: #4CAF50;
        border-style: solid;
    }

    .custom-timeline .e-timeline-item.e-connector::after {
        border-style: dashed;
    }
</style>
Reverse Timeline in Blazor Timeline
Reverse Timeline in Blazor Timeline

Note: For more details, refer to reversing the order of timeline items documentation.

Customization using Templates

With the Blazor Timeline component, you can easily customize its appearance, including styling dot items and templating content. This feature provides a high level of flexibility and control over the timeline’s presentation, ensuring it matches your application’s design perfectly.

The following code example demonstrates the project management phases using the Template property for customizing each item and its styling.

@using Syncfusion.Blazor.Layouts

<div class="timeline-component" style="height: 350px">
    <SfTimeline>
        <ChildContent>
            <TimelineItems>
                <TimelineItem>
                    <Content>Phase 1</Content>
                </TimelineItem>
                <TimelineItem>
                    <Content>Phase 2</Content>
                </TimelineItem>
                <TimelineItem>
                    <Content>Phase 3</Content>
                </TimelineItem>
            </TimelineItems>
        </ChildContent>
        <Template>
            <div class="custom-content">
                <label>@context.Item.Content(context)</label>
                @if (context.ItemIndex != 2)
                {
                    <span>↓</span>
                }
            </div>
            <div class="details">
                <div></div>
                <div class="description">
                    @if (context.ItemIndex == 0)
                    {
                        <b>Initiation & Planning</b>
                        <ol>
                            <li>Objectives, scope</li>
                            <li>Feasibility study</li>
                            <li>Project charter</li>
                        </ol>
                    }
                    else if (context.ItemIndex == 1)
                    {
                        <p><b>Execution & Monitoring</b></p>
                        <ol>
                            <li>Planning</li>
                            <li>Assign tasks, resources</li>
                            <li>Conduct team meetings</li>
                        </ol>
                    }
                    else
                    {
                        <p><b>Closure & Evaluation</b></p>
                        <ol>
                            <li>Project review</li>
                            <li>Documentation</li>
                            <li>Project closure</li>
                        </ol>
                    }
                </div>
            </div>
        </Template>
    </SfTimeline>
</div>

<style>
    .custom-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .custom-content label {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 8px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: italic;
        font-weight: bold;
        background-color: green;
        color: white;
    }

    .details {
        display: flex;
        align-items: center;
    }

    .details div {
        width: 80px;
        border: 1px dashed grey;
        height: 0px;
        margin: 0 5px;
    }

    .details .description {
        height: 100%;
        border: 1px solid grey;
        width: 170px;
        display: flex;
        border-radius: 5px;
        text-align: center;
        flex-direction: column;
        padding: 5px;
        align-items: flex-start;
    }

    .details .description ol {
        padding-left: 25px;
        text-align: left;
    }

    .details .description p {
        margin: 0;
    }

    .custom-content span {
        font-size: 60px;
        line-height: 60px;
        font-family: ui-monospace;
        height: 70px;
    }

</style>
Customization Templates in Blazor Timeline
Customization Templates in Blazor Timeline

Note: For more details, refer to the customizing the display of items using templates in the Blazor Timeline documentation.

References

For more details, refer to our complete Blazor Timeline component demos and documentation.

Supported Platforms

The Timeline component is also available on the following platforms. 

Platform 

Live Demo 

Documentation 

JavaScript

JavaScript Timeline Demos 

Getting Started with JavaScript Timeline

Angular

Angular Timeline Demos 

Getting Started with Angular Timeline

React

React Timeline Demos

Getting Started with React Timeline

Vue

Vue Timeline Demos

Getting Started with Vue Timeline

ASP.Net Core

ASP.Net Core Timeline Demos 

Getting Started with ASP.Net Core Timeline

ASP.Net MVC

ASP.Net MVC Timeline Demos 

Getting Started with ASP.Net MVC Timeline

Conclusion

Thanks for reading! In this blog, we have seen the features of the new Syncfusion Blazor Timeline component that rolled out in our 2024 Volume 1 release. These features are also listed on our Release Notes and the What’s New pages. Try out the component and share your feedback as comments on this blog.

You can also reach us through our support forums, support portal, or feedback portal. Our team is always ready to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed