Sotsera.Blazor.Toaster 1.0.0-preview9.1

Toastr.js port to Blazor - no javascript involved

This is a prerelease version of Sotsera.Blazor.Toaster.
There is a newer version of this package available.
See the version list below for details.
This package has a SemVer 2.0.0 package version.
This package will only be available to download with SemVer 2.0.0 compatible NuGet clients, such as Visual Studio 2017 (version 15.3) and above or NuGet client 4.3.0 and above. Read more
Install-Package Sotsera.Blazor.Toaster -Version 1.0.0-preview9.1
dotnet add package Sotsera.Blazor.Toaster --version 1.0.0-preview9.1
<PackageReference Include="Sotsera.Blazor.Toaster" Version="1.0.0-preview9.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Sotsera.Blazor.Toaster --version 1.0.0-preview9.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Sotsera.Blazor.Toaster

A Blazor port of Toastr.js to Server and Webassembly Blazor Apps.

The transitions are implemented using System.Threading.Timer timers so the resource usage should be closely monitored when using the server-side hosting model.

Css inclusion for both Blazor Server and Blazor Webassembly (client) Apps

The following reference must be added to the _Host.cshtml or the index.html files:

<link href="_content/Sotsera.Blazor.Toaster/toastr.min.css" rel="stylesheet" />

Only for server-side projects

The static assets from Razor Component Libraries are available by default only on Development mode. They can be anabled on Production using the UseStaticWebAssets() method in the Program.cs file as in the following example:

public static IHostBuilder CreateHostBuilder(string[] args) =>
	Host.CreateDefaultBuilder(args)
		.ConfigureWebHostDefaults(webBuilder =>
		{
			webBuilder.UseStaticWebAssets();
			webBuilder.UseStartup<Startup>();
		});

Sample

The client-side sample project has been published here.

Changes

version 1.0.0-preview9.1

  • moved to 3.0.0-preview9.19424.4

version 1.0.0-preview.8.1

  • moved to 3.0.0-preview8.19405.7 and to SemVer 2.0.0
  • Breaking changes
    • the reference to the css file must be explicitly added also in client-side apps

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.

Configuration

Installation

Install-Package Sotsera.Blazor.Toaster -Pre

or

dotnet add package Sotsera.Blazor.Toaster --version 1.0.0-preview9.1

Dependency injection configuration

using Sotsera.Blazor.Toaster.Core.Models; // Needed for the configuration objects

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // Add the library to the DI system
        services.AddToaster(config =>
        {
            //example customizations
            config.PositionClass = Defaults.Classes.Position.TopRight;
            config.PreventDuplicates = true;
            config.NewestOnTop = false;
        });
    }
}

Css inclusion

Add the following reference to the toaster css in the _Host.cshtml component for server side-apps or in the index.html file for client side-apps:

<link href="_content/Sotsera.Blazor.Toaster/toastr.min.css" rel="stylesheet" />

Main toaster component

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 />

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

Sotsera.Blazor.Toaster

A Blazor port of Toastr.js to Server and Webassembly Blazor Apps.

The transitions are implemented using System.Threading.Timer timers so the resource usage should be closely monitored when using the server-side hosting model.

Css inclusion for both Blazor Server and Blazor Webassembly (client) Apps

The following reference must be added to the _Host.cshtml or the index.html files:

<link href="_content/Sotsera.Blazor.Toaster/toastr.min.css" rel="stylesheet" />

Only for server-side projects

The static assets from Razor Component Libraries are available by default only on Development mode. They can be anabled on Production using the UseStaticWebAssets() method in the Program.cs file as in the following example:

public static IHostBuilder CreateHostBuilder(string[] args) =>
	Host.CreateDefaultBuilder(args)
		.ConfigureWebHostDefaults(webBuilder =>
		{
			webBuilder.UseStaticWebAssets();
			webBuilder.UseStartup<Startup>();
		});

Sample

The client-side sample project has been published here.

Changes

version 1.0.0-preview9.1

  • moved to 3.0.0-preview9.19424.4

version 1.0.0-preview.8.1

  • moved to 3.0.0-preview8.19405.7 and to SemVer 2.0.0
  • Breaking changes
    • the reference to the css file must be explicitly added also in client-side apps

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.

Configuration

Installation

Install-Package Sotsera.Blazor.Toaster -Pre

or

dotnet add package Sotsera.Blazor.Toaster --version 1.0.0-preview9.1

Dependency injection configuration

using Sotsera.Blazor.Toaster.Core.Models; // Needed for the configuration objects

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // Add the library to the DI system
        services.AddToaster(config =>
        {
            //example customizations
            config.PositionClass = Defaults.Classes.Position.TopRight;
            config.PreventDuplicates = true;
            config.NewestOnTop = false;
        });
    }
}

Css inclusion

Add the following reference to the toaster css in the _Host.cshtml component for server side-apps or in the index.html file for client side-apps:

<link href="_content/Sotsera.Blazor.Toaster/toastr.min.css" rel="stylesheet" />

Main toaster component

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 />

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

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.0.0 252 9/28/2019
1.0.0-preview9.1 343 9/4/2019
1.0.0-preview.8.1 243 8/14/2019
0.11.1 248 7/30/2019
0.10.1 127 7/13/2019
0.10.0 303 6/16/2019
0.9.0-preview-3 424 4/25/2019
0.9.0-preview-1 406 3/12/2019
0.8.0-preview-4 213 2/14/2019
0.6.1 645 2/12/2019
0.6.0 2,277 10/4/2018
0.5.3 330 8/25/2018
0.5.2 251 7/30/2018
0.5.1 167 7/26/2018
0.4.1 183 7/23/2018
0.4.0 229 7/18/2018