Notification Manager

Toast / notification support

Purpose of Component

The RfNotificationManager add support to manage and show themed toast / notifications. These notifications are built upon Bulma's notifications.

When to Use

Use RfNotificationManager when there is a need to notify the user of some event that happened be it good or bad.

When not to Use

RfNotificationManager shouldn't be used for:

  • Inline notifications. Instead recreate the Bulma notification on the page / component that needs it.
  • Notifications with forms. The RfNotificationManager is designed to inform the user not gather information. However, there is an overload to support custom content via a RenderFragement to support elements like buttons etc.

Basic Usage

It takes two parts to use RfNotificationManager. First the page will need to have an

<RfNotificationManager></RfNotificationManager>
registered somewhere that isn't inside of a overflow hidden element. Pererrabley it should be as high up the DOM tree to ensure some CSS rule doesn't affect it.

Secondly, the page will need to inject RForgeBlazor.Services.INotificationManager.cs. This interface is used to communicate between RfNotificationManager and the page. This interface supports several overloads for each various notification options including: info, success, warning, and errors along with a custom option.

NOTE: In projects that use rendermode: InteractiveServer. The backend may take advantage of INotificationManagerBackend.cs. I caution on using this. This should only be done if you are sure the project won't switch over to WASM.

Standard Request Flow

The RfNotificationManager works off calling RForgeBlazor.Services.INotificationManager.cs passing in the options for the notification or using the default on the RfNotificationManager for the severity type.

How to Setup

Setting up RForge is simple. Follow the below steps to add RForge Blazor components to your project.

  1. Install the Nuget package
  2. Import the namespaces (optional)
  3. Register RForge services
  4. Include Bulma CSS

Install the Nuget Package

RForge Blazor components are installed via Nuget. There are two packages. One for the blazor app and one for the library if any.

Blazor Project Installation

Command Line
dotnet add package RForge.Blazor
Package Manager Console
Install-Package RForge.Blazor

Library Project Installation

This is optional but may be useful if you want to use common enums across the backend and frontend.

Command Line
dotnet add package RForge.Abstractions
Package Manager Console
Install-Package RForge.Abstractions

Import the namespaces

To simplify namespacing while using RForge, the package is designed with most all components sitting within the root RForge namespace.

You may want to include the following namespaces in your _import.razor for ease of use.

@using RForgeBlazor
@using RForgeBlazor.Services
@using RForge.Abstractions
Namespace Purpose
RForgeBlaozr Houses all of the blazor components.
RForgeBlaozr.Services Houses interfaces you may need to communicate with certain components.
RForgeBlaozr.Abstractions Common enums used through out the components.

Register RForge Services

In order for some components to work they must first have their services registered.

Open up Program.cs and add the following line before the var app = builder.Build();.

Heads Up!
If your project is using the multi project solution where one project is server and the other is client. You will need to register the services in both projects.

using RForgeBlazor;
//...
builder.Services.AddRfForgeBlazorServices();
//...
var app = builder.Build();
    

Include Bulma CSS

RForge makes use of Bulma CSS to stylize the components. Add / install Bulma and add the CSS file to the head. Link to download: Bulma releases.

An unhandled error has occurred. Reload 🗙