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
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfTimeline
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Layouts
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfTimeline : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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
[Parameter]
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.

Created

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

Declaration
[Parameter]
public EventCallback<object> Created { get; set; }
Property Value
Type Description
EventCallback<object>

An event call back function.

CssClass

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

Declaration
[Parameter]
public string CssClass { get; set; }
Property Value
Type Description
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
[Parameter]
public string ID { get; set; }
Property Value
Type Description
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
[Parameter]
public EventCallback<TimelineRenderedEventArgs> ItemRendered { get; set; }
Property Value
Type Description
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
[Parameter]
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
[Parameter]
public bool Reverse { get; set; }
Property Value
Type Description
bool

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
[Parameter]
public RenderFragment<TimelineItemContext> Template { get; set; }
Property Value
Type Description
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
RenderTreeBuilder __builder
Overrides

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

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

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
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
Task

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

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
Task
Overrides

Implements