LgNotificationItem

LgNotificationItem<TItem> renders an individual notification: title, description, date, icon, mark as read/unread actions, and deletion. The component receives its parent context via LgNotificationMenuItem<TItem>; it is therefore primarily intended for internal menu rendering.

<LgNotificationMenuItem TItem="NotificationVm">
    <ChildContent>
        <LgNotificationItem TItem="NotificationVm"
                            Item="PreviewNotification"
                            IconName="@IconNames.All.BellFill" />
    </ChildContent>
</LgNotificationMenuItem>

• Namespace: Lagoon.UI.Components
• Inherits from: LgComponentBase
• NuGet package: Lagoon.UI.Notifications

Recommended usage

Do not instantiate LgNotificationItem to customize the standard menu rendering. Instead, use the NotificationTemplate property of LgNotificationMenuItem. LgNotificationItem depends on a parent LgNotificationMenuItem provided via cascading.

Usage

Preview in the bottom menu content

The following example shows valid usage with a cascading parent. In an application, list item rendering is normally created automatically by 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
{
    // Example notification displayed in the menu content area.
    private NotificationVm PreviewNotification { get; } = new()
    {
        Title = "#NotificationPreviewTitle",
        Description = "#NotificationPreviewDescription",
        CreationDate = DateTime.Now,
        UpdateDate = DateTime.Now,
        NotificationId = Guid.NewGuid(),
        NotificationUserId = Guid.NewGuid()
    };
}

Properties

Name	Type	Default	Declared in	Description
Item	TItem	null	LgNotificationItem<TItem>	Notification to display. TItem must inherit from NotificationVmBase.
OnDelete	EventCallback<NotificationEventArgs<TItem>>	default	LgNotificationItem<TItem>	Callback exposed for deletion; the current implementation deletes via INotificationService<TItem> and does not invoke it.
OnClick	EventCallback<NotificationEventArgs<TItem>>	default	LgNotificationItem<TItem>	Callback triggered when clicking on the notification card.
IconName	string	null	LgNotificationItem<TItem>	Name of the icon displayed to the left of the title.
CssClass	string	null	LgNotificationItem<TItem>	CSS class added to the item's container.

Events

Name	Type	Description
OnClick	EventCallback<NotificationEventArgs<TItem>>	Triggered when the user clicks on the notification card.
OnDelete	EventCallback<NotificationEventArgs<TItem>>	Public parameter declared, but not triggered by the delete button in the current implementation.

NotificationEventArgs<TItem> exposes the Item property, which contains the related notification.

Accessibility

The standard rendering displays the title, description, date, and two Lagoon buttons with translated tooltips to mark the notification as read/unread or delete it. Provide a clear title and description, and choose an icon that is not the sole source of information.

Related components

• LgNotificationMenuItem
• LgNotificationCounter