LgTimelineContainer

LgTimelineContainer organise une suite de LgTimelineStep dans une timeline horizontale. Il conserve l'ordre des étapes, calcule les séparateurs et remonte l'identifiant de l'étape cliquée.

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

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgComponentBase
• Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Déclarer des étapes

Placez uniquement des LgTimelineStep dans ChildContent. Chaque étape doit avoir un Id unique, car OnStepClicked renvoie cet identifiant.

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
{
    // Étapes affichées dans l'ordre de lecture de la timeline.
    private List<OrderStep> _steps = new()
    {
        new() { Id = "draft", TopLabelKey = "#TimelineDraft", BottomLabelKey = "#TimelineCreated", IsValidated = true },
        new() { Id = "review", TopLabelKey = "#TimelineReview", BottomLabelKey = "#TimelineWaiting", IsClickable = true }
    };

    // Valide l'étape cliquée et active la suivante.
    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
    {
        // Identifiant transmis au conteneur et renvoyé lors du clic.
        public string Id { get; set; }

        // Clé de traduction du libellé supérieur.
        public string TopLabelKey { get; set; }

        // Clé de traduction du libellé inférieur.
        public string BottomLabelKey { get; set; }

        // Indique si l'utilisateur peut sélectionner cette étape.
        public bool IsClickable { get; set; }

        // Indique si l'étape est déjà validée.
        public bool IsValidated { get; set; }
    }
}

Gérer la séquence métier

Le conteneur n'impose aucune règle de workflow : vous choisissez quelles étapes sont cliquables et lesquelles sont validées. Cela permet d'autoriser une seule étape courante, plusieurs choix ou une étape d'annulation.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgTimelineContainer	Contenu contenant les étapes.

Événements

Nom	Type	Description
OnStepClicked	EventCallback<string>	Déclenché lorsqu'une étape cliquable est sélectionnée ; l'argument est l'Id de l'étape.

Accessibilité

• Rendez seulement les étapes réellement disponibles cliquables avec IsClickable.
• Ajoutez un libellé supérieur ou inférieur compréhensible pour chaque étape.
• Si vous personnalisez StepContent, conservez une indication visuelle claire de l'état validé.

Composants liés

• LgTimelineStep : étape enfant obligatoire dans le conteneur.