Blazorise Notification service
Notification service is used to provide feedback to the user.
They communicate information about activities, processes, and events in the application.
The INotificationService
is built on top of Snackbar
component and is used for showing simple
alerts and notifications.
Quick Setup
To install and use Notifications you just need to follow a few simple steps.
Step 1: Download from NuGet
Install extension from NuGet.Install-Package Blazorise.Components
Step 2. Define Usings
Since notification service is created as a wrapper around theSnackbar
component so it is also required to define the namespace inside of your main _Imports.razor file.
@using Blazorise.Components @using Blazorise.Snackbar
Step 3. Define wrapper component
INotificationService
is automatically registered by Blazorise but it needs just one thing on your side
to make it work. You need to place NotificationProvider
somewhere in your application razor code. It can
be placed anywhere, but a good approach is to place it in App.razor
like in the following example.
<Router AppAssembly="typeof(App).Assembly"> <Found>...</Found> <NotFound>...</NotFound> </Router> <NotificationProvider />
Step 4. Static files
This step is only needed if you didn't already define any CSS files for the Snackbar component. Remember, TheINotificationService
is built on top of Snackbar
.
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
Examples
Basic
Once you’re done you can start using it by injecting theINotificationService
in your page and then simple
calling the built-in methods.
<Button Color="Color.Warning" Clicked="">Show alert!</Button>
@code{ [Inject] INotificationService NotificationService { get; set; } Task ShowWarningNotification() { return NotificationService.Warning( "This is a simple notification message!", "Hello" ); } }
Best Practices
Use Sparingly
Notifications are disruptive by design and should be used sparingly. Use fewer notifications by reserving them for more important information that may otherwise go unnoticed by the user.
Less urgent notifications can be provided through a link or drop-down in the application header or footer, instead of immediate notifications.
Limit Content Length
Aim for one or two lines of content. Notifications should be brief and to the point. More information can be provided through an embedded link or Button.