Sotsera.Blazor.Toaster 0.9.0-preview-1

Sotsera.Blazor.Toaster

A Blazor port of Toastr.js in pure .Net.

Razor components currently cannot reference static assets from component libraries. As a temporary workaround the css can be saved into the server project wwwroot and loaded by the index.html with something like <link href="toastr.min.css" rel="stylesheet"/>.

The sample project has been published here.

The transitions are implemented using System.Threading.Timer so this library should be used only by client side blazor (webassembly).

Changes

See the RELEASE-NOTES

Configuration

Install-Package Sotsera.Blazor.Toaster

Configure the dependency injection

services.AddToaster(config =>
{
    config.PositionClass = Defaults.Classes.Position.TopRight;
    config.PreventDuplicates = true;
    config.NewestOnTop = false;
});

and add the toast container to App.cshtml (or to another component always loaded in the application)

@addTagHelper *, Sotsera.Blazor.Toaster
<toastContainer />

Usage

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!");
});

Credits

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

License

Sotsera.Blazor.Toaster is licensed under MIT license