Aller au contenu principal

LgNotificationItem

LgNotificationItem<TItem> rend une notification individuelle : titre, description, date, icône, actions de lecture / non-lecture et suppression. Le composant reçoit son contexte parent via LgNotificationMenuItem<TItem>; il est donc principalement destiné au rendu interne du menu.

<LgNotificationMenuItem TItem="NotificationVm">
    <ChildContent>
        <LgNotificationItem TItem="NotificationVm"
                            Item="PreviewNotification"
                            IconName="@IconNames.All.BellFill" />
    </ChildContent>
</LgNotificationMenuItem>
  • Espace de noms : Lagoon.UI.Components
  • Hérite de : LgComponentBase
  • Package NuGet : Lagoon.UI.Notifications
Usage recommandé

N'instanciez pas LgNotificationItem pour personnaliser le rendu standard du menu. Utilisez plutôt la propriété NotificationTemplate de LgNotificationMenuItem. LgNotificationItem dépend d'un parent LgNotificationMenuItem fourni en cascade.

Utilisation​

Prévisualisation dans le contenu bas du menu​

L'exemple suivant montre une utilisation valide avec un parent en cascade. Dans une application, le rendu des éléments de la liste est normalement créé automatiquement par LgNotificationMenuItem.

NotificationPreview.razor
<LgNotificationMenuItem TItem="NotificationVm" Text="#Notifications">
    <ChildContent>
        <LgNotificationItem TItem="NotificationVm"
                            Item="PreviewNotification"
                            IconName="@IconNames.All.BellFill"
                            CssClass="notification-preview" />
    </ChildContent>
</LgNotificationMenuItem>
NotificationPreview.razor.cs
public partial class NotificationPreview : LgComponentBase
{
    // Notification d'exemple affichée dans la zone de contenu du menu.
    private NotificationVm PreviewNotification { get; } = new()
    {
        Title = "#NotificationPreviewTitle",
        Description = "#NotificationPreviewDescription",
        CreationDate = DateTime.Now,
        UpdateDate = DateTime.Now,
        NotificationId = Guid.NewGuid(),
        NotificationUserId = Guid.NewGuid()
    };
}

Propriétés​

NomTypeDéfautDéclaré dansDescription
ItemTItemnullLgNotificationItem<TItem>Notification à afficher. TItem doit hériter de NotificationVmBase.
OnDeleteEventCallback<NotificationEventArgs<TItem>>defaultLgNotificationItem<TItem>Callback exposé pour la suppression; l'implémentation actuelle supprime via INotificationService<TItem> et ne l'invoque pas.
OnClickEventCallback<NotificationEventArgs<TItem>>defaultLgNotificationItem<TItem>Callback déclenché lors du clic sur la carte de notification.
IconNamestringnullLgNotificationItem<TItem>Nom de l'icône affichée à gauche du titre.
CssClassstringnullLgNotificationItem<TItem>Classe CSS ajoutée au conteneur de l'élément.

Événements​

NomTypeDescription
OnClickEventCallback<NotificationEventArgs<TItem>>Déclenché lorsque l'utilisateur clique sur la carte de notification.
OnDeleteEventCallback<NotificationEventArgs<TItem>>Paramètre public déclaré, mais non déclenché par le bouton de suppression dans l'implémentation actuelle.

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

Accessibilité​

Le rendu standard affiche le titre, la description, la date et deux boutons Lagoon avec tooltips traduits pour marquer la notification lue / non lue ou la supprimer. Fournissez un titre et une description compréhensibles, et choisissez une icône qui ne soit pas le seul support d'information.

Composants liés​