LgTimelineStep

LgTimelineStep représente une étape dans un LgTimelineContainer. Elle peut afficher des libellés au-dessus et au-dessous, un contenu central personnalisé, un état cliquable et un état validé.

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

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

danger

Id obligatoire

Chaque LgTimelineStep doit être placée dans un LgTimelineContainer et doit définir Id. Sans Id, le composant lève une exception à l'initialisation.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Étape simple

Utilisez les vrais paramètres du composant : TopLabel, BottomLabel, IsClickable, IsValidated et Id. Le composant ne possède pas de paramètres Title, IconName, Description ni Kind.

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
{
    // Mémorise l'étape active pour piloter le workflow côté page.
    private string _selectedStepId;

    // Reçoit l'identifiant fourni par le conteneur lorsque l'utilisateur clique une étape.
    private Task SelectStepAsync(string id)
    {
        _selectedStepId = id;
        return Task.CompletedTask;
    }
}

Rendu personnalisé

TopLabelContent, BottomLabelContent et StepContent remplacent les rendus par défaut. Pour afficher une icône, placez un LgIcon dans 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
{
    // Étapes avec une icône fournie au fragment StepContent.
    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
    {
        // Identifiant transmis au conteneur et renvoyé lors du clic.
        public string Id { get; set; }

        // Classe CSS optionnelle appliquée à l'étape.
        public string CssClass { 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; }

        // Icône affichée dans le fragment StepContent.
        public string IconName { 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; }
    }
}

Styles d'étape

CssClass est appliqué aux libellés, au cercle et aux séparateurs. Utilisez-le pour distinguer une étape annulée ou mettre en évidence un chemin métier spécifique.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
Id	string	null	LgTimelineStep	Identifiant unique de l'étape ; obligatoire.
CssClass	string	null	LgTimelineStep	Classe CSS ajoutée aux éléments de l'étape.
TopLabel	string	null	LgTimelineStep	Libellé affiché au-dessus de l'étape.
BottomLabel	string	null	LgTimelineStep	Libellé affiché sous l'étape.
IsClickable	bool	false	LgTimelineStep	Rend l'étape sélectionnable par l'utilisateur.
IsValidated	bool	false	LgTimelineStep	Marque l'étape et ses séparateurs comme validés.
TopLabelContent	RenderFragment	null	LgTimelineStep	Rendu personnalisé du libellé supérieur.
BottomLabelContent	RenderFragment	null	LgTimelineStep	Rendu personnalisé du libellé inférieur.
StepContent	RenderFragment	null	LgTimelineStep	Rendu personnalisé du contenu central ; par défaut, le numéro d'étape est affiché.
ChildContent	RenderFragment	null	LgTimelineStep	Contenu enfant déclaré entre les balises du composant.

Accessibilité

• Renseignez un texte compréhensible via TopLabel, BottomLabel ou leurs fragments.
• Si StepContent ne contient qu'une icône, conservez un libellé textuel adjacent.
• Ne signalez pas l'avancement uniquement par la couleur : combinez IsValidated avec un libellé explicite.

Composants liés

• LgTimelineContainer : conteneur parent obligatoire.