Toast

by Blazored

Blazored /Toast

A JavaScript free toast library for Blazor and Razor Component applications

201 Stars 36 Forks Last release: 5 months ago (v3.1.1) MIT License 131 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Blazored Toast

This is a JavaScript free toast implementation for Blazor and Razor Components applications. It supports icons that are either specified by class name (such as fontawesome) or by a specified element (Material Design).

Build & Test Main

Nuget

Screenshot of component in action

Getting Setup

You can install the package via the NuGet package manager just search for Blazored.Toast. You can also install via powershell using the following command.

Install-Package Blazored.Toast

Or via the dotnet CLI.

dotnet add package Blazored.Toast

1. Register Services

You will need to register the Blazored Toast service in your application

Blazor Server

Add the following line to your applications

Startup.ConfigureServices
method.
public void ConfigureServices(IServiceCollection services)
{
    services.AddBlazoredToast();
}

Blazor WebAssembly

Add the following line to your applications

Program.Main
method.
builder.Services.AddBlazoredToast();

2. Add Imports

Add the following to your _Imports.razor

@using Blazored.Toast
@using Blazored.Toast.Services

3. Register and Configure Toasts Component

Add the

 tag into your applications MainLayout.razor.

Toasts are configured using parameters on the

 component. The following options are available.

  • InfoClass
  • InfoIcon
  • SuccessClass
  • SuccessIcon
  • WarningClass
  • WarningIcon
  • ErrorClass
  • ErrorIcon
  • IconType (Default: IconType.FontAwesome)
  • Position (Default: ToastPosition.TopRight)
  • Timeout (Default: 5)

By default, you don't need to provide any settings everything will just work. But if you want to add icons to toasts or override the default styling then you can use the options above to do that.

For example, to add an icon from Font Awesome to all success toasts you can do the following.


Setting the position also requires a reference to

Blazored.Toast.Configuration
, for example:
@using Blazored.Toast.Configuration

The example above is from the client side samples.


The example above is from the server side samples and demonstrates the use of Material Design icons.

4. Add reference to style sheet(s)

Add the following line to the

head
tag of your
_Host.cshtml
(Blazor Server app) or
index.html
(Blazor WebAssembly). The blazored-toast.css includes the open-iconic-bootstrap.min.css.

We ship both minified and unminified CSS.

For minifed use:


For unminifed use:



Presumably, if you want to use the Material Icons your project already includes some form of the icons. If not see Material Design Icons for the available alternatives.

Usage

In order to show a toast you have to inject the

IToastService
into the component or service you want to trigger a toast. You can then call one of the following methods depending on what kind of toast you want to display, passing in a message and an optional heading.
  • ShowInfo
  • ShowSuccess
  • ShowWarning
  • ShowError
@page "/toastdemo"
@inject IToastService toastService

Toast Demo

To show a toast just click one of the buttons below.

toastService.ShowInfo("I'm an INFO message"))">Info Toast toastService.ShowSuccess("I'm a SUCCESS message with a custom title", "Congratulations!"))">Success Toast toastService.ShowWarning("I'm a WARNING message"))">Warning Toast toastService.ShowError("I'm an ERROR message"))">Error Toast

Full examples for client and server-side Blazor are included in the samples.

Show Progress Bar

You can display a progress bar which gives a visual indicator of the time remaining before the toast will disappear. In order to show the progress bar set the

ShowProgressBar
parameter to true.

Remove Toasts When Navigating

If you wish to clear any visible toasts when the user navigates to a new page you can enable the

RemoveToastsOnNavigation
parameter. Setting this to true will remove any visible toasts whenever the
LocationChanged
event fires.

FAQ

The toasts are not showing

  • Check the
    z-index
    of your other
    DOM Elements
    , make sure that the
    .blazored-toast-container
    has a higher
    z-index
    than the other components. ### I upgraded my version of Blazored Toasts and I have errors in my razor file where I declare the BlazoredToasts component.
  • The parameter IconType is a mandatory parameter. An exception will be thrown if any icon is specified.
  • Check the icon parameter names if you have upgraded from a version prior to 2.0.10. Previous to this version the icons supported were specified by class and the parameters were of the form SuccessIconClass. With the addition of Material icon support the parameter form is now simply SuccessIcon.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.