LgBanner

LgBanner affiche une information contextuelle persistante dans la page : alerte fonctionnelle, confirmation, maintenance, absence de connexion ou message global. Utilisez-le quand l'utilisateur doit voir l'information dans son flux de lecture, sans ouvrir de notification temporaire.

<LgBanner Kind="Kind.Info" IconName="@IconNames.About">
    @("#BannerInformation".Translate())
</LgBanner>

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

Contenu de la bannière

LgBanner n'a pas de paramètre Text. Placez toujours le message dans ChildContent.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Bannière d'information simple

Placez le texte traduit dans le contenu enfant. Kind pilote le style visuel et IconName ajoute un pictogramme de contexte.

ConnectionStatusPage.razor

<LgBanner Kind="Kind.Info" IconName="@IconNames.About">
    @("#ConnectionInformation".Translate())
</LgBanner>

Variantes fonctionnelles

Utilisez Kind pour distinguer l'information, le succès, l'avertissement ou l'erreur. Les variantes suivent les styles Bootstrap disponibles dans Lagoon.

OperationFeedbackPage.razor

<LgBanner Kind="Kind.Success" IconName="@IconNames.All.CheckCircleFill">
    @("#OperationSucceeded".Translate())
</LgBanner>

<LgBanner Kind="Kind.Warning" IconName="@IconNames.All.ExclamationCircleFill">
    @("#PlatformMaintenanceWarning".Translate())
</LgBanner>

<LgBanner Kind="Kind.Error" IconName="@IconNames.All.XCircleFill">
    @("#ConnectionLostError".Translate())
</LgBanner>

Bannière refermable

Closable affiche une icône de fermeture. Combinez Show et ShowChanged pour garder l'état d'affichage dans la page.

DismissibleBannerPage.razor

<LgBanner Kind="Kind.Warning"
          IconName="@IconNames.All.ExclamationCircleFill"
          Closable="true"
          Show="@IsBannerVisible"
          ShowChanged="OnBannerClosedAsync">
    @("#MaintenanceWarning".Translate())
</LgBanner>

<LgButton Text="#ShowBanner" OnClick="ShowBannerAsync" />

DismissibleBannerPage.razor.cs

public partial class DismissibleBannerPage : LgPage
{
    // Mémorise l'état d'affichage pour pouvoir rouvrir la bannière après une fermeture utilisateur.
    private bool IsBannerVisible { get; set; } = true;

    // Synchronise l'état côté page lorsque l'utilisateur clique sur l'icône de fermeture.
    private Task OnBannerClosedAsync()
    {
        IsBannerVisible = false;
        return Task.CompletedTask;
    }

    // Réaffiche explicitement la bannière depuis une action de la page.
    private Task ShowBannerAsync(ActionEventArgs args)
    {
        IsBannerVisible = true;
        return Task.CompletedTask;
    }
}

Attributs additionnels et classes CSS

Les attributs non reconnus sont transmis au conteneur rendu. Utilisez CssClass pour compléter le style et des attributs data-* pour les tests automatisés.

TrackedBannerPage.razor

<LgBanner Kind="Kind.Primary"
          CssClass="order-banner"
          data-testid="order-banner">
    @("#OrderBannerMessage".Translate())
</LgBanner>

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgBanner	Attributs additionnels appliqués à l'élément rendu.
ChildContent	RenderFragment	null	LgBanner	Contenu affiché dans la bannière.
Closable	bool	false	LgBanner	Affiche une action de fermeture dans la bannière.
CssClass	string	null	LgBanner	Classes CSS additionnelles appliquées à la bannière.
IconName	string	null	LgBanner	Icône affichée au début de la bannière.
Kind	Kind	Kind.Info	LgBanner	Style visuel de la bannière.
Show	bool	true	LgBanner	Indique si la bannière est rendue.
ShowChanged	EventCallback	—	LgBanner	Callback invoqué lorsque la bannière change d'état d'affichage.

Événements

Nom	Type	Description
ShowChanged	EventCallback	Déclenché lorsque la bannière est fermée par l'utilisateur.

Énumérations associées

Kind

Style visuel du composant. La valeur par défaut de LgBanner.Kind est Info.

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

Accessibilité

• La bannière est rendue avec role="alert" : son contenu doit être court, utile et compréhensible hors contexte.
• Ajoutez une icône seulement si elle renforce le sens du message ; le texte reste obligatoire pour porter l'information.
• Pour une bannière refermable, conservez une action alternative permettant de réafficher l'information si elle reste nécessaire.

Composants liés

• LgProgress — barre de progression linéaire.
• LgCircleProgress — progression circulaire.
• LgLoaderView — vue de chargement avec contenu de remplacement.