LgEmptyMessage

LgEmptyMessage affiche un état vide lorsqu'une zone ne contient aucune donnée. Il présente une icône, un titre et une description dans un bloc dédié.

<LgEmptyMessage IconName="@IconNames.Empty"
                Title="#EmptyOrdersTitle"
                Description="#EmptyOrdersDescription" />

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

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Liste sans résultat

Affichez le composant lorsque la collection est vide. Le composant ne déclare pas de paramètre Show : la condition d'affichage reste portée par la page.

OrderListPage.razor

@if (!HasOrders)
{
    <LgEmptyMessage IconName="@IconNames.Empty"
                    Title="#NoOrderTitle"
                    Description="#NoOrderDescription" />
}

OrderListPage.razor.cs

public partial class OrderListPage : LgPage
{
    // Indique si la liste contient au moins un élément à afficher.
    private bool HasOrders => Orders.Count > 0;

    // Données de démonstration utilisées par la condition d'état vide.
    private List<OrderVm> Orders { get; } = new();

    private sealed class OrderVm
    { }
}

État vide personnalisé par CSS

Ajoutez CssClass pour cibler un style spécifique à la zone fonctionnelle.

DocumentListPage.razor

<LgEmptyMessage CssClass="documents-empty-state"
                IconName="@IconNames.Empty"
                Title="#NoDocumentTitle"
                Description="#NoDocumentDescription" />

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
CssClass	string	null	LgEmptyMessage	Classes CSS supplémentaires ajoutées au conteneur du message.
IconName	string	null	LgEmptyMessage	Nom de l'icône affichée dans l'état vide.
Description	string	null	LgEmptyMessage	Texte descriptif affiché sous le titre lorsqu'il n'est pas vide après traduction.
Title	string	null	LgEmptyMessage	Titre affiché lorsqu'il n'est pas vide après traduction.

Accessibilité

• Préférez un titre court qui annonce clairement l'absence de données.
• Utilisez la description pour proposer l'étape suivante, par exemple lancer une recherche ou créer un élément.
• N'utilisez pas l'icône comme unique information : le titre et la description doivent porter le sens.

Composants liés

• LgBigMessage — message pleine page ou état bloquant.
• Toasts — retours brefs déclenchés depuis le code.