menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfTimeline - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfTimeline

    The Blazor Timeline component presents a series of events or activities in chronological order, allowing users to track the progression of time.

    Inheritance
    System.Object
    SfBaseComponent
    SfTimeline
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Layouts
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfTimeline : SfBaseComponent
    Remarks

    Timeline items can be populated by specifying TimelineItem within SfTimeline tag directive.

    Examples

    In the below code example, a basic Timeline component is initialized with TimelineItem tag directive.

     
    <SfTimeline>
        <TimelineItems>
            <TimelineItem></TimelineItem>
            <TimelineItem></TimelineItem>
            <TimelineItem></TimelineItem>
            <TimelineItem></TimelineItem>
        </TimelineItems>
    </SfTimeline>

    Constructors

    SfTimeline()

    Declaration
    public SfTimeline()

    Properties

    Alignment

    Gets or sets the alignment of the item content in relation to the SfTimeline component.

    Declaration
    public TimelineAlignment Alignment { get; set; }
    Property Value
    Type Description
    TimelineAlignment

    A value indicates the alignment of timeline items. The default value is After.

    Remarks

    Use this property to control the display of item content appear before or after each item in the SfTimeline component.

    ChildContent

    Gets or sets a value that indicates the child content for the Timeline including HTML element.

    Declaration
    public RenderFragment ChildContent { get; set; }
    Property Value
    Type
    Microsoft.AspNetCore.Components.RenderFragment

    Created

    Gets or sets an event callback that is raised when the SfTimeline rendering is completed.

    Declaration
    public EventCallback<object> Created { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Object>

    An event call back function.

    CssClass

    Gets or sets the custom CSS class to customize the SfTimeline component.

    Declaration
    public string CssClass { get; set; }
    Property Value
    Type Description
    System.String

    A string representing the CSS class to be applied. The default value is an empty string.

    Remarks

    You can use this property to apply custom styles to the SfTimeline component by specifying a CSS class.

    ID

    Sets id attribute for the timeline element.

    Declaration
    public string ID { get; set; }
    Property Value
    Type Description
    System.String

    Accepts the string value.

    ItemRendered

    Gets or sets an event callback that is raised when a timeline item in the SfTimeline component is rendered.

    Declaration
    public EventCallback<TimelineRenderedEventArgs> ItemRendered { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TimelineRenderedEventArgs>

    An event callback function that is triggered when a item is rendered within the Timeline.

    Remarks

    Subscribe to this event to perform additional actions or apply custom styling after a item has been rendered. It provides an opportunity to dynamically modify the appearance or behavior of individual items during the rendering process.

    Orientation

    Gets or sets the orientation of the SfTimeline component.

    Declaration
    public TimelineOrientation Orientation { get; set; }
    Property Value
    Type Description
    TimelineOrientation

    A TimelineOrientation value representing the orientation of the SfTimeline. The default value is Vertical.

    Remarks

    The TimelineOrientation enumeration defines the possible orientations for the SfTimeline component. You can set this property to control whether the timeline is displayed horizontally or vertically.

    Reverse

    Gets or sets a value indicating whether the SfTimeline items are rendered in reverse order.

    Declaration
    public bool Reverse { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if the items are rendered in reverse order; otherwise, false. The default value is false.

    Template

    Gets or sets a template that defines the appearance of each item in the SfTimeline component.

    Declaration
    public RenderFragment<TimelineItemContext> Template { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment<TimelineItemContext>

    The template content. The default value is null.

    Remarks

    The Template allows you to define a custom template for rendering each step. Use the template’s context parameter to access Item and ItemIndex properties.

    Examples
    <SfTimeline>
       <ChildContent>
           <TimelineItems>
               <TimelineItem IconCss = "e-icons e-circle-info"></TimelineItem>
               <TimelineItem IconCss = "e-icons e-circle-add"></TimelineItem>
               <TimelineItem IconCss = "e-icons e-circle-check"></TimelineItem>
               <TimelineItem IconCss = "e-icons e-circle-close"></TimelineItem>
           </TimelineItems>
       </ChildContent>
       <Template>
           <div class="e-connector">
               <span class="e-indicator @context.Item.IconCss"></span>
           </div>
       </Template>
    </SfTimeline>

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    OnAfterRenderAsync(Boolean)

    Method invoked after each time the component has been rendered.

    Declaration
    protected override Task OnAfterRenderAsync(bool firstRender)
    Parameters
    Type Name Description
    System.Boolean firstRender

    Set to true for the first time component rendering; otherwise gets false.

    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Overrides
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    OnInitializedAsync()

    Method invoked when the component is ready to start.

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    A System.Threading.Tasks.Task representing any asynchronous operation.

    Overrides
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type
    System.Threading.Tasks.Task
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved