Project
Version
Language
Contributors Edit (10/5/2023)
Avatar

MultipleVersionDocumentInfo

UI

Blazor Notification System

Installation

  • Install the Dignite.Abp.NotificationCenter.Blazor NuGet package into your Blazor project.

    Add DigniteAbpNotificationCenterBlazorModule to the [DependsOn(...)] property list of the module class.

  • Install the Dignite.Abp.NotificationCenter.HttpApi.Client NuGet package into your HttpApi.Client project.

    Add DigniteAbpNotificationCenterHttpApiClientModule to the [DependsOn(...)] property list of the module class.

  • Install the Dignite.Abp.NotificationCenter.Blazor.WebAssembly NuGet package into your Blazor.WebAssembly project.

    Add DigniteAbpNotificationCenterBlazorWebAssemblyModule to the [DependsOn(...)] property list of the module class.

  • Run abp bundle in your Blazor project.

Notification Components

Each notification component consists of a notification icon component and a notification data component:

NotificationsComponent

  • Create a notification icon component

    Create a Blazor component by inheriting from the NotificationIconComponentBase abstract class.

    NotificationName: The notification name set in Define a Notification.

    @using Dignite.Abp.Notifications.Components;
@using NotificationCenterSample.Notifications;
@inherits NotificationIconComponentBase

<Icon Name="IconName.Grin" IconSize="IconSize.Large" TextColor="TextColor.Primary"></Icon>

@code {
  public override string NotificationName { get; } = NotificationCenterSampleNotifications.TestNotification;
}

    If there is no corresponding icon component for the notification name, the system will use the default icon component.

  • Create a notification data component

    Create a Blazor component by inheriting from the NotificationDataComponentBase<TNotificationData> abstract class.

    TNotificationData: The type inherited from the NotificationData abstract class.

    The system provides components for two notification data types: MessageNotificationData and LocalizableMessageNotificationData.

    Example of a notification data component for the MessageNotificationData notification data type:

    @using Dignite.Abp.Notifications
@inherits NotificationDataComponentBase<MessageNotificationData>
<Paragraph Style="min-width:300px;">
  @NotificationData.Message
</Paragraph>

Sample

Download the sample from GitHub and follow the instructions to experience the Blazor version of the notification system.

InThisDocument