Blazored - Libraries and Components designed for Microsoft's Blazor Framework

Blazored - Libraries and Components designed for Microsoft's Blazor Framework

1. Blazored Typeahead
2. Blazored Modal
3. Blazored Local Storage
4. Blazored Toast
5. Blazored Menu
6. Blazored FluentValidation

In this article we will learn how to use Blazored Toast in Blazor Project. In similar way we can use all libraries in Blazor Server Application.

1. Install-Package Blazored.Toast

2. Include the following CSS  file in 

_Host.cshtml

<link href="_content/Blazored.Toast/blazored-toast.css" rel="stylesheet" />

3. Add the following using statement to your main 

_Imports.razor

@using Blazored.Toast

@using Blazored.Toast.Services

4. Add the following line to your applications Startup.ConfigureServices method:
public void ConfigureServices(IServiceCollection services)
{
       services.AddBlazoredToast();
}

5. Add the <BlazoredToasts /> tag into your applications MainLayout.razor.
@using Blazored.Toast.Configuration
<BlazoredToasts Position="ToastPosition.BottomRight"
Timeout="10"
SuccessClass="success-toast-override"
SuccessIconClass="fa fa-thumbs-up"
ErrorIconClass="fa fa-bug" />

6. In order to show a toast you have to inject the IToastService into the component or service you want to trigger a toast. 

@page "/toastdemo"
@inject IToastService toastService
Toast Demo
To show a toast just click one of the buttons below.
<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
<button class="btn btn-success" @onclick="@(() => toastService.ShowSuccess("I'm a SUCCESS message with a custom title", "Congratulations!"))">Success Toast</button>
<button class="btn btn-warning" @onclick="@(() => toastService.ShowWarning("I'm a WARNING message"))">Warning Toast</button>
<button class="btn btn-danger" @onclick="@(() => toastService.ShowError("I'm an ERROR message"))">Error Toast</button>

For more details please visit: https://www.youtube.com/ashproghelp

How to use Toast Notification in Blazor | Blazored Toast:
https://www.youtube.com/watch?v=WyY6gjOsifA

How to use Modal Popup in Balzor | Blazored Modal:
https://www.youtube.com/watch?v=8WzO1T3b0Fw

How to use Blazored Menu in Blazor | Blazored Menu:
https://www.youtube.com/watch?v=4ufYxzKLbnk

LocalStorage in Blazor | Blazored LocalStorage:
https://www.youtube.com/watch?v=RRroAZxNhIw

AutoComplete in Blazor | Blazored Typeahead:
https://www.youtube.com/watch?v=SswX4KAf1d8

How to use Fluent Validation in Blazor | Blazored FluentValidation:
https://www.youtube.com/watch?v=DQxsQu9yg20