A Blazor port of Toastr.js in pure .Net.
The transitions are implemented using System.Threading.Timer
timers so the resource usage should be closely monitored when using the server-side hosting model.
While on client-side projects the css file is still loaded automatically, on server side projects the following reference must be added to the _Host.cshtml file:
<link href="_content/Sotsera.Blazor.Toaster/toastr.min.css" rel="stylesheet" />
The client-side sample project has been published here.
version 0.11.0
- moved to 3.0.0-preview7.19365.7
- Breaking changes
- repackaged as Razor Component Library: on server-side projects the css must be referenced explicitly by the host component
- option NewestOnTop defaults to false
See the RELEASE-NOTES for the previous versions.
Install-Package Sotsera.Blazor.Toaster
services.AddToaster(config =>
{
//example customizations
config.PositionClass = Defaults.Classes.Position.TopRight;
config.PreventDuplicates = true;
config.NewestOnTop = false;
});
Only for Blazor Server Apps, add the following reference to the toaster css in the _Host.cshtml component
<link href="_content/Sotsera.Blazor.Toaster/toastr.min.css" rel="stylesheet" />
The toast container must be added to the App.razor
component or to another component always loaded in the application like MainLayout.razor
. It is important to have exactly one instance of this component rendered in the application tree at any given time.
@using Sotsera.Blazor.Toaster
<ToastContainer />
In a component
@inject Sotsera.Blazor.Toaster.IToaster Toaster
In a class
[Inject]
protected Sotsera.Blazor.Toaster.IToaster Toaster { get; set; }
then call one of the display methods:
Toaster.Info("toast body text");
Toaster.Success("toast body text");
Toaster.Warning("toast body text");
Toaster.Error("toast body text");
Each of these methods can accept a title and an action for the toast specific configuration
Toaster.Info("toast body text");
Toaster.Info("toast body text", "toast title");
Toaster.Info("toast body text", "toast title", options =>
{
options.Clicked += toast => Console.WriteLine($"Toast '{toast.Message}' Clicked!");
});
This is a simple attempt to port Toastr.js to Blazor.
Currently the css styles used are literally COPIED from Toastr.js.
The logo has been made by Freepik from Flaticon and is licensed by CC 3.0 BY
Sotsera.Blazor.Toaster is licensed under MIT license