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