LgProgress

LgProgress affiche l'avancement d'un traitement sous forme de barre horizontale. Utilisez-le pour une progression bornée, une attente indéterminée ou un état d'avancement à commenter par un label.

<LgProgress Value="35" Min="0" Max="100" />

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

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Progression bornée

Renseignez Value, Min et Max. Lorsque Label n'est pas défini, le composant calcule automatiquement un pourcentage.

ImportProgressPage.razor

<LgProgress Value="@CurrentStep"
            Min="0"
            Max="@TotalSteps"
            Kind="Kind.Primary" />

ImportProgressPage.razor.cs

public partial class ImportProgressPage : LgPage
{
    // Nombre total d'étapes du traitement, utilisé comme borne maximale de la barre.
    private int TotalSteps { get; set; } = 10;

    // Étape courante : la barre calcule le pourcentage à partir de cette valeur.
    private int CurrentStep { get; set; } = 4;
}

Label personnalisé et position

Label remplace le pourcentage automatique. LabelPosition place le texte à gauche, au centre ou à droite de la barre.

ExportProgressPage.razor

<LgProgress Value="@ExportedRows"
            Min="0"
            Max="@TotalRows"
            Label="#ExportInProgress"
            LabelPosition="ProgressLabelPosition.Right" />

ExportProgressPage.razor.cs

public partial class ExportProgressPage : LgPage
{
    // Nombre de lignes déjà exportées, mis à jour par le traitement métier.
    private int ExportedRows { get; set; } = 120;

    // Nombre total de lignes à exporter, utilisé pour calculer l'avancement.
    private int TotalRows { get; set; } = 500;
}

Barre rayée et animée

Striped ajoute les rayures. Animated anime ces rayures, ce qui est particulièrement utile pour signaler une progression en cours.

SynchronizationPage.razor

<LgProgress Min="0"
            Max="0"
            Value="0"
            Kind="Kind.Info"
            Striped="true"
            Animated="true"
            Label="#SynchronizationInProgress" />

Progression indéterminée

Lorsque Max est inférieur ou égal à Min, LgProgress passe en état indéterminé. La barre occupe toute la largeur et le label automatique est masqué si vous ne fournissez pas Label.

Mise à jour depuis le code-behind

Mettez à jour Value depuis un traitement asynchrone et appelez StateHasChanged quand la progression change hors du cycle d'événements Blazor.

ProcessingPage.razor

<LgProgress Value="@Value"
            Min="0"
            Max="100"
            Kind="Kind.Success"
            LabelPosition="ProgressLabelPosition.Center" />

<LgButton Text="#RunProcessing" OnClick="RunProcessingAsync" />

ProcessingPage.razor.cs

public partial class ProcessingPage : LgPage
{
    // Pourcentage courant affiché par la barre de progression.
    private int Value { get; set; }

    // Simule un traitement long et met à jour la progression visible à chaque étape.
    private async Task RunProcessingAsync(ActionEventArgs args)
    {
        for (int i = 0; i <= 100; i++)
        {
            Value = i;
            await Task.Delay(50, args.CancellationToken);
            StateHasChanged();
        }
    }
}

Utilisation avec Lagoon.Helpers.Progress

Pour orchestrer des traitements avec sous-progressions, utilisez Lagoon.Helpers.Progress avec LgLoaderView. LgProgress reste le rendu visuel de la barre lorsque ProgressType vaut Bar.

BatchLoaderPage.razor

<LgLoaderView Progress="@Progress" ProgressType="ProgressType.Bar">
    @("#BatchCompleted".Translate())
</LgLoaderView>

<LgButton Text="#StartBatch" OnClick="StartBatchAsync" />

BatchLoaderPage.razor.cs

public partial class BatchLoaderPage : LgPage
{
    // Objet de progression partagé avec LgLoaderView pour piloter la barre automatiquement.
    private Progress Progress { get; } = new(100, "#BatchStarting");

    // Alimente l'objet Progress ; LgLoaderView reçoit les événements et rafraîchit la barre.
    private async Task StartBatchAsync(ActionEventArgs args)
    {
        Progress.Reset(100, "#BatchStarting");
        for (int i = 0; i <= 100; i++)
        {
            Progress.Report(i, "#BatchRunning");
            await Task.Delay(25, args.CancellationToken);
        }
    }
}

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
Animated	bool	false	LgProgress	Anime les rayures de la barre.
LabelPosition	ProgressLabelPosition	ProgressLabelPosition.Center	LgProgress	Position du label par rapport à la barre.
Striped	bool	false	LgProgress	Affiche une barre rayée.
CssClass	string	null	LgProgressBase	Classes CSS additionnelles appliquées au conteneur.
Kind	Kind	Kind.Primary	LgProgressBase	Style visuel de la progression.
Label	string	null	LgProgressBase	Label affiché avec la progression ; si absent, un pourcentage est généré en progression déterminée.
Max	int	100	LgProgressBase	Borne maximale de la progression.
Min	int	0	LgProgressBase	Borne minimale de la progression.
Value	int	0	LgProgressBase	Valeur courante de la progression.

Énumérations associées

Kind

Style visuel du composant. La valeur par défaut de LgProgress.Kind est Primary.

Valeur	Description
Primary	Style principal (valeur par défaut pour LgProgress).
Default	Style par défaut.
Secondary	Style secondaire.
Success	Style « succès ».
Error	Style « erreur ».
Warning	Style « avertissement ».
Info	Style « information ».

ProgressLabelPosition

Position du label affiché par la barre. La valeur par défaut est Center.

Valeur	Description
Left	Label affiché à gauche de la barre.
Center	Label affiché au centre de la barre (valeur par défaut).
Right	Label affiché à droite de la barre.

Accessibilité

• La barre interne est rendue avec role="progressbar", aria-valuenow, aria-valuemin et aria-valuemax.
• Fournissez un Label traduit lorsque le pourcentage seul ne suffit pas à comprendre l'opération en cours.
• Pour une progression indéterminée, accompagnez la barre d'un texte décrivant l'attente, par exemple via Label ou un titre proche.

Composants liés

• LgCircleProgress — indicateur de progression circulaire.
• LgLoaderView — conteneur de chargement qui peut rendre une barre de progression.
• LgBanner — message de feedback persistant.