MultipleVersionDocumentInfo

UI

Blazor 版通知系统

安装

  • Dignite.Abp.NotificationCenter.Blazor Nuget 包安装到 Blazor 项目中。

    添加 DigniteAbpNotificationCenterBlazorModule模块类 [DependsOn(...)] 属性列表中。

  • Dignite.Abp.NotificationCenter.HttpApi.Client Nuget 包安装到 HttpApi.Client 项目中。

    添加 DigniteAbpNotificationCenterHttpApiClientModule模块类 [DependsOn(...)] 属性列表中。

  • Dignite.Abp.NotificationCenter.Blazor.WebAssembly Nuget 包安装到 Blazor.WebAssembly 项目中。

    添加 DigniteAbpNotificationCenterBlazorWebAssemblyModule模块类 [DependsOn(...)] 属性列表中。

  • 在 Blazor 项目中执行一次 abp bundle

通知组件

每一条通知组件由通知图标组件和通知数据组件组成:

NotificationsComponent

  • 创建通知图标组件

    继承 NotificationIconComponentBase 抽象类创建一个 Blazor 组件。

    NotificationName定义通知中设置的通知名称。

    @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;
    }
    

    如果没有创建对应通知名称的图标组件,系统将使用默认图标组件。

  • 创建通知数据组件

    继承 NotificationDataComponentBase<TNotificationData> 抽象类创建一个 Blazor 组件。

    TNotificationData: 继承自 NotificationData 抽象类的类型。

    系统已实现内置 MessageNotificationDataLocalizableMessageNotificationData 两个通知数据类型的组件。

    MessageNotificationData 通知数据类型的组件源码:

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

示例

请前往 Github 下载示例,并按说明运行体验 Blazor 版通知系统。

InThisDocument