LgTimelineStep

LgTimelineStep represents a step in an LgTimelineContainer. It can display labels above and below, custom central content, a clickable state, and a validated state.

<LgTimelineContainer OnStepClicked="SelectStepAsync">
    <LgTimelineStep Id="draft"
                    TopLabel="@("#TimelineDraft".Translate())"
                    BottomLabel="@("#TimelineCreated".Translate())"
                    IsValidated="true" />
</LgTimelineContainer>

• Namespace: Lagoon.UI.Components
• Inherits from: LgComponentBase
• NuGet package: Lagoon.UI

danger

Mandatory Id

Each LgTimelineStep must be placed in an LgTimelineContainer and must define Id. Without Id, the component raises an exception during initialization.

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple step

Use the actual component parameters: TopLabel, BottomLabel, IsClickable, IsValidated, and Id. The component does not have Title, IconName, Description, or Kind parameters.

OrderStepPage.razor

<LgTimelineContainer OnStepClicked="SelectStepAsync">
    <LgTimelineStep Id="draft"
                    TopLabel="@("#TimelineDraft".Translate())"
                    BottomLabel="@("#TimelineCreated".Translate())"
                    IsValidated="true" />
    <LgTimelineStep Id="review"
                    TopLabel="@("#TimelineReview".Translate())"
                    BottomLabel="@("#TimelineWaiting".Translate())"
                    IsClickable="true" />
</LgTimelineContainer>

OrderStepPage.razor.cs

public partial class OrderStepPage : LgPage
{
    // Remembers the active step to control the workflow on the page side.
    private string _selectedStepId;

    // Receives the identifier provided by the container when the user clicks a step.
    private Task SelectStepAsync(string id)
    {
        _selectedStepId = id;
        return Task.CompletedTask;
    }
}

Custom rendering

TopLabelContent, BottomLabelContent, and StepContent replace the default renderings. To display an icon, place an LgIcon in StepContent.

OrderStepCustomPage.razor

<LgTimelineContainer OnStepClicked="SelectStepAsync">
    @foreach (OrderStep step in _steps)
    {
        <LgTimelineStep Id="@step.Id"
                        CssClass="@step.CssClass"
                        IsClickable="@step.IsClickable"
                        IsValidated="@step.IsValidated">
            <TopLabelContent>
                <LgLabel Text="@step.TopLabelKey" />
            </TopLabelContent>
            <BottomLabelContent>
                <LgLabel Text="@step.BottomLabelKey" />
            </BottomLabelContent>
            <StepContent>
                <LgIcon IconName="@step.IconName" />
            </StepContent>
        </LgTimelineStep>
    }
</LgTimelineContainer>

OrderStepCustomPage.razor.cs

public partial class OrderStepCustomPage : LgPage
{
    // Steps with an icon provided to the StepContent fragment.
    private List<OrderStep> _steps = new()
    {
        new() { Id = "draft", TopLabelKey = "#TimelineDraft", BottomLabelKey = "#TimelineCreated", IconName = IconNames.All.GearFill, IsValidated = true },
        new() { Id = "review", TopLabelKey = "#TimelineReview", BottomLabelKey = "#TimelineWaiting", IconName = IconNames.All.Calendar2MonthFill, IsClickable = true }
    };

    private class OrderStep
    {
        // Identifier transmitted to the container and returned on click.
        public string Id { get; set; }

        // Optional CSS class applied to the step.
        public string CssClass { get; set; }

        // Translation key for the top label.
        public string TopLabelKey { get; set; }

        // Translation key for the bottom label.
        public string BottomLabelKey { get; set; }

        // Icon displayed in the StepContent fragment.
        public string IconName { get; set; }

        // Indicates whether the user can select this step.
        public bool IsClickable { get; set; }

        // Indicates whether the step is already validated.
        public bool IsValidated { get; set; }
    }
}

Step styles

CssClass is applied to labels, the circle, and separators. Use it to distinguish a cancelled step or highlight a specific business path.

Properties

Name	Type	Default	Declared in	Description
Id	string	null	LgTimelineStep	Unique step identifier; mandatory.
CssClass	string	null	LgTimelineStep	CSS class added to step elements.
TopLabel	string	null	LgTimelineStep	Label displayed above the step.
BottomLabel	string	null	LgTimelineStep	Label displayed below the step.
IsClickable	bool	false	LgTimelineStep	Makes the step selectable by the user.
IsValidated	bool	false	LgTimelineStep	Marks the step and its separators as validated.
TopLabelContent	RenderFragment	null	LgTimelineStep	Custom rendering of the top label.
BottomLabelContent	RenderFragment	null	LgTimelineStep	Custom rendering of the bottom label.
StepContent	RenderFragment	null	LgTimelineStep	Custom rendering of the central content; by default, the step number is displayed.
ChildContent	RenderFragment	null	LgTimelineStep	Child content declared between the component tags.

Accessibility

• Provide understandable text via TopLabel, BottomLabel, or their fragments.
• If StepContent contains only an icon, keep an adjacent text label.
• Do not signal progress by color alone: combine IsValidated with an explicit label.

Related components

• LgTimelineContainer: mandatory parent container.