LgNotificationMenuItem

LgNotificationMenuItem<TItem> ajoute au menu Lagoon une entrée de notifications avec icône, compteur de non-lues et, par défaut, une liste déroulante synchronisée par INotificationService<TItem>.

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill" />

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

Utilisation

Démonstration

Essayez les notifications dans le showcase Lagoon.

Menu standard

Le menu initialise le service client, charge les notifications locales, ouvre la connexion SignalR et affiche le nombre de notifications non lues dans le tag de l'élément de menu.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill"
                        OnNotificationClick="OnNotificationClickAsync" />

MenuConfiguration.razor.cs

public partial class MenuConfiguration
{
    // Traite le clic sur une notification affichée dans le menu.
    private Task OnNotificationClickAsync(NotificationEventArgs<NotificationVm> args)
    {
        return Task.CompletedTask;
    }
}

Filtrer et personnaliser les éléments

FilterPredicate permet de créer plusieurs entrées de menu sur la même collection. ItemIconName et ItemCssClass personnalisent chaque élément rendu par le modèle standard.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#OrderNotifications"
                        IconName="@IconNames.All.BellFill"
                        FilterPredicate="IsOrderNotification"
                        ItemIconName="GetItemIconName"
                        ItemCssClass="GetItemCssClass" />

MenuConfiguration.razor.cs

public partial class MenuConfiguration
{
    // Conserve uniquement le flux métier affiché par ce menu.
    private bool IsOrderNotification(NotificationVm notification)
    {
        return notification.Category == "order";
    }

    // Sélectionne l'icône affichée dans chaque carte de notification.
    private string GetItemIconName(NotificationVm notification)
    {
        return IconNames.All.BellFill;
    }

    // Ajoute une classe selon l'état de lecture de la notification.
    private string GetItemCssClass(NotificationVm notification)
    {
        return notification.IsRead ? "notification-read" : "notification-unread";
    }
}

Personnaliser le rendu avec NotificationTemplate

Lorsque NotificationTemplate est renseigné, le rendu standard de LgNotificationItem est remplacé par votre fragment.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill">
    <NotificationTemplate Context="notification">
        <LgCard>
            <div class="notification-template-title">
                @notification.Title.CheckTranslate()
            </div>
            <div class="notification-template-description">
                @notification.Description.CheckTranslate()
            </div>
        </LgCard>
    </NotificationTemplate>
</LgNotificationMenuItem>

Ajouter des actions en bas du menu

ChildContent est affiché sous la liste des notifications.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm" Text="#Notifications">
    <ChildContent>
        <LgButton Text="#SeeAllNotifications"
                  Tooltip="#SeeAllNotificationsTooltip"
                  IconName="@IconNames.All.EyeFill"
                  Uri="notifications" />
    </ChildContent>
</LgNotificationMenuItem>

Rediriger sans détail déroulant

Si ShowMenuDetail vaut false, le composant transmet Uri et Target à l'élément de menu sous-jacent au lieu d'afficher la liste en sous-menu.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill"
                        ShowMenuDetail="false"
                        Uri="notifications"
                        Target="_self" />

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgNotificationMenuItem<TItem>	Contenu affiché sous la liste des notifications.
NotificationTemplate	RenderFragment<TItem>	null	LgNotificationMenuItem<TItem>	Modèle de rendu personnalisé pour chaque notification.
ShowMenuDetail	bool	true	LgNotificationMenuItem<TItem>	Indique si la liste des notifications est affichée dans le sous-menu.
Target	string	null	LgNotificationMenuItem<TItem>	Nom de la fenêtre cible lorsque ShowMenuDetail vaut false.
Uri	string	null	LgNotificationMenuItem<TItem>	URI ouverte par l'élément de menu lorsque ShowMenuDetail vaut false.
IconName	string	IconNames.All.BellFill	LgNotificationMenuItem<TItem>	Icône de l'entrée de menu.
Text	string	null	LgNotificationMenuItem<TItem>	Texte affiché dans le menu.
OnNotificationClick	EventCallback<NotificationEventArgs<TItem>>	default	LgNotificationMenuItem<TItem>	Callback appelé lorsqu'une notification du menu est cliquée.
FilterPredicate	Func<TItem, bool>	null	LgNotificationMenuItem<TItem>	Filtre appliqué à la collection de notifications avant le tri.
ItemIconName	Func<TItem, string>	null	LgNotificationMenuItem<TItem>	Fonction qui retourne l'icône de chaque notification.
ItemCssClass	Func<TItem, string>	null	LgNotificationMenuItem<TItem>	Fonction qui retourne la classe CSS de chaque notification.

Événements

Nom	Type	Description
OnNotificationClick	EventCallback<NotificationEventArgs<TItem>>	Déclenché lorsque l'utilisateur clique sur une notification rendue par le menu.

NotificationEventArgs<TItem> expose la propriété Item, qui contient la notification cliquée.

Contrat des endpoints

Uri n'appelle pas l'API de notifications : c'est une route de navigation transmise à LgMenuItem uniquement quand ShowMenuDetail vaut false. La page ou l'endpoint correspondant à cette URI doit donc exister dans l'application. Les échanges de synchronisation restent gérés par INotificationService<TItem> via le contrôleur interne api/-/notification et le hub hubs/notification.

Accessibilité

Renseignez Text avec une clé traduite pour donner un libellé explicite à l'entrée de menu. Le tag numérique est calculé à partir des notifications non lues; il complète l'information mais ne doit pas remplacer le libellé. Dans un NotificationTemplate, conservez un titre textuel et des actions accessibles au clavier.

Composants liés

• LgNotificationCounter
• LgNotificationItem