LgTimelineContainer

LgTimelineContainer organizes a series of LgTimelineStep in a horizontal timeline. It preserves the order of steps, calculates separators, and returns the identifier of the clicked step.

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

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

Usage

Demonstration

Try this component in the Lagoon showcase.

Declaring steps

Place only LgTimelineStep in ChildContent. Each step must have a unique Id because OnStepClicked returns this identifier.

OrderTimelinePage.razor

<LgTimelineContainer OnStepClicked="SelectStepAsync">
    @foreach (OrderStep step in _steps)
    {
        <LgTimelineStep Id="@step.Id"
                        TopLabel="@step.TopLabelKey.Translate()"
                        BottomLabel="@step.BottomLabelKey.Translate()"
                        IsClickable="@step.IsClickable"
                        IsValidated="@step.IsValidated" />
    }
</LgTimelineContainer>

OrderTimelinePage.razor.cs

public partial class OrderTimelinePage : LgPage
{
    // Steps displayed in the order of the timeline.
    private List<OrderStep> _steps = new()
    {
        new() { Id = "draft", TopLabelKey = "#TimelineDraft", BottomLabelKey = "#TimelineCreated", IsValidated = true },
        new() { Id = "review", TopLabelKey = "#TimelineReview", BottomLabelKey = "#TimelineWaiting", IsClickable = true }
    };

    // Validates the clicked step and enables the next one.
    private Task SelectStepAsync(string id)
    {
        OrderStep step = _steps.Single(item => item.Id == id);
        step.IsClickable = false;
        step.IsValidated = true;
        return Task.CompletedTask;
    }

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

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

        // Localization key for the bottom label.
        public string BottomLabelKey { 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; }
    }
}

Managing the business workflow

The container does not enforce any workflow rules: you choose which steps are clickable and which are validated. This allows you to enable a single current step, multiple choices, or a cancellation step.

Properties

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgTimelineContainer	Content containing the steps.

Events

Name	Type	Description
OnStepClicked	EventCallback<string>	Triggered when a clickable step is selected; the argument is the Id of the step.

Accessibility

• Make only the truly available steps clickable using IsClickable.
• Add a clear top or bottom label for each step.
• If you customize StepContent, keep a clear visual indication of the validated state.

Related components

• LgTimelineStep : required child step in the container.