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
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

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

OnParametersSetAsync()

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