Skip to content
A JavaScript free toast library for Blazor and Razor Component applications
Branch: master
Clone or download
Latest commit 0125210 Mar 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
samples/BlazorSample Upgraded packages to 0.9.0 Mar 9, 2019
src/Blazored.Toast
.gitignore
Blazored.Toast.sln
LICENSE Initial commit Jan 20, 2019
README.md Update README.md Mar 9, 2019
azure-pipelines.yml Upgrade to Blazor 0.8.0 Feb 9, 2019

README.md

Blazored Toast

This is a JavaScript free toast implementation for Blazor and Razor Components applications.

Build Status

Nuget

Important Notice For ASP.NET Core Razor Components Apps

There is currently an issue with ASP.NET Core Razor Components apps (not Blazor). They are unable to import static assets from component libraries such as this one.

You can still use this package, however, you will need to manually add the CSS to your apps wwwroot folder. You will then need to add a reference to it in the head tag of your apps index.html page.

Alternatively, there is a great package by Mister Magoo which offers a solution to this problem without having to manually copy files.

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

First, you will need to add the following line to your applications Startup.ConfigureServices method.

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

2. Add Imports

Second, add the following to your _ViewImports.cshtml

@using Blazored
@using Blazored.Toast.Services

@addTagHelper *, Blazored.Toast

3. Register Toasts Component

Third and finally you will need to register the <BlazoredToasts /> component in your applications MainLayout.cshtml.

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 the ShowToast method passing in the toast level you require along with the message to display and an optional heading.

@page "/toastdemo"
@inject IToastService toastService

<h1>Toast Demo</h1>

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

<button class="btn btn-info" onclick="@(() => toastService.ShowToast(ToastLevel.Info, "I'm an INFO message"))">Info Toast</button>
<button class="btn btn-success" onclick="@(() => toastService.ShowToast(ToastLevel.Success, "I'm a SUCCESS message with a custom title", "Congratulations!"))">Success Toast</button>
<button class="btn btn-warning" onclick="@(() => toastService.ShowToast(ToastLevel.Warning, "I'm a WARNING message"))">Warning Toast</button>
<button class="btn btn-danger" onclick="@(() => toastService.ShowToast(ToastLevel.Error, "I'm an ERROR message"))">Error Toast</button>
You can’t perform that action at this time.