Blazored.Toast
4.2.1
Prefix Reserved
dotnet add package Blazored.Toast --version 4.2.1
NuGet\Install-Package Blazored.Toast -Version 4.2.1
<PackageReference Include="Blazored.Toast" Version="4.2.1" />
paket add Blazored.Toast --version 4.2.1
#r "nuget: Blazored.Toast, 4.2.1"
// Install Blazored.Toast as a Cake Addin #addin nuget:?package=Blazored.Toast&version=4.2.1 // Install Blazored.Toast as a Cake Tool #tool nuget:?package=Blazored.Toast&version=4.2.1
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).
Installing
To install the package add the following line to you csproj file replacing x.x.x with the latest version number (found at the top of this file):
<PackageReference Include="Blazored.Toast" Version="x.x.x" />
You can also install via the .NET CLI with the following command:
dotnet add package Blazored.Toast
If you're using Visual Studio or JetBrains Rider you can also install via the built in NuGet package manager.
Setup
You will need to register the Blazored Toast service with the service collection in your Program.cs file.
builder.Services.AddBlazoredToast();
Add Imports
Add the following to your _Imports.razor
@using Blazored.Toast
@using Blazored.Toast.Services
Add reference to style sheet(s)
Blazored Toast uses CSS isolation. If your application is already using CSS isolation then the styles for Toast will be included automatically and you can skip this step. However, if your application isn't using isolated CSS, you will need to add a reference to the CSS bundle. You can checkout the Microsoft Docs for additional details.
<link href="{YOUR APP ASSEMBLY NAME}.styles.css" rel="stylesheet">
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.
Register and Configure Toasts Component
Add the <BlazoredToasts />
tag into your applications MainLayout.razor.
Toasts are configured using parameters on the <BlazoredToasts />
component. The following options are available.
- IconType (Default:
IconType.Blazored
) - InfoClass
- InfoIcon
- SuccessClass
- SuccessIcon
- WarningClass
- WarningIcon
- ErrorClass
- ErrorIcon
- Position (Default:
ToastPosition.TopRight
) - Timeout (Default: 5)
- MaxToastCount (Default:
int.MaxValue
) - RemoveToastsOnNavigation
- ShowProgressBar
- CloseButtonContent (provide custom close button)
- ShowCloseButton (Default:
true
) - DisableTimeout
- PauseProgressOnHover (Default:
false
) - ExtendedTimeout
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:
<BlazoredToasts IconType="IconType.FontAwesome" SuccessIcon="fa fa-thumbs-up"/>
Setting the position also requires a reference to Blazored.Toast.Configuration
, for example:
@using Blazored.Toast.Configuration
<BlazoredToasts Position="ToastPosition.BottomRight"
Timeout="10"
IconType="IconType.FontAwesome"
SuccessClass="success-toast-override"
SuccessIcon="fa fa-thumbs-up"
ErrorIcon="fa fa-bug" />
If you want to have your own custom close button, that can be configured via the CloseButtonContent
parameter:
<BlazoredToasts Position="ToastPosition.BottomRight"
Timeout="10">
<CloseButtonContent>
<div>
<span>×</span>
</div>
</CloseButtonContent>
</BlazoredToasts>
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
<h1>Toast Demo</h1>
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"))">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>
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.
<BlazoredToasts Position="ToastPosition.BottomRight"
Timeout="10"
ShowProgressBar="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.
Limiting number of toasts shown at once
If you want to limit the number of toasts displayed at any given time, you can set the MaxToastCount
parameter. For example, if the value is set to 3 only three toast instances will be displayed. Any additional toasts that are triggered will be held in a queue and will be displayed as older toasts time out.
Custom Component
You can call the ShowToast
method passing the type of component you want the toast to display.
For example if I have a component called MyToast
which I want to display in the toast and I want to call it from the Index
component on a button click.
@page "/toastdemo"
@inject IToastService toastService
<h1>Custom Toast Demo</h1>
<button class="btn btn-primary" @onclick="@(() => toastService.ShowToast<MyToast>())">Custom Toast</button>
Passing Parameters
If you want to pass values to the component you're displaying in the toast, then you can use the ToastParameters
object. The name you provide must match the name of a parameter defined on the component being displayed.
@page "/toastdemo"
@inject IToastService toastService
<h1>Custom Toast Demo</h1>
<button class="btn btn-primary" @onclick="@(() => toastService.ShowToast<MyToast>(_toastParameters))">Custom Toast with parameters</button>
@code
{
private ToastParameters _toastParameters;
protected override void OnInitialized()
{
_toastParameters = new ToastParameters();
_toastParameters.Add(nameof(MyToast.Heading), "MyToast heading");
_toastParameters.Add(nameof(MyToast.Message), "MyToast message");
}
}
Custom Component Options
Custom toast components can be customized. These settings can be set globally or changed programatically on a per toast basis. This is achieved using the ToastInstanceSettings
class.
The following settings are available.
Timeout
ShowProgressBar
For Example if you want to change the duration of the timeout and disable the progress bar.
@page "/toastdemo"
@inject IToastService toastService
<h1>Custom Toast Demo</h1>
<button class="btn btn-primary" @onclick="@(() => toastService.ShowToast<MyToast>(new ToastInstanceSettings(5, false)))">Custom Toast</button>
Full examples for Blazor WebAssembly and Blazor Interactive Server are included in the samples.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Microsoft.AspNetCore.Components (>= 6.0.27)
- Microsoft.AspNetCore.Components.Web (>= 6.0.27)
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 6.0.0)
-
net7.0
- Microsoft.AspNetCore.Components (>= 7.0.16)
- Microsoft.AspNetCore.Components.Web (>= 7.0.16)
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 7.0.0)
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.2)
- Microsoft.AspNetCore.Components.Web (>= 8.0.2)
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 8.0.0)
NuGet packages (15)
Showing the top 5 NuGet packages that depend on Blazored.Toast:
Package | Downloads |
---|---|
Blazored.Toast.TestExtensions
A testing library to provide helper extensions for Blazored.Toast |
|
BlazingApple.Components
BlazingApple is a collection of business objects and corresponding components to speed application development. BlazingApple.Components provides a set of core components to easily create beautiful applications |
|
Bluefish.Blazor
A collection of useful Razor components |
|
Lookif.UI.Component
Some predefined components. It contains: *Crud page *Form *Dropdown - Selective *Grid ---- Blazored.Modal and Blazored.Toast are used in this project. |
|
Yamf.Core.Themed.Blazor
Package Description |
GitHub repositories (9)
Showing the top 5 popular GitHub repositories that depend on Blazored.Toast:
Repository | Stars |
---|---|
dotnet-architecture/eShopOnDapr
A sample .NET distributed application based on eShopOnContainers, powered by Dapr.
|
|
DragoQCC/HardHatC2
A C# Command & Control framework
|
|
hamed-shirbandi/TaskoMask
Task management system based on .NET 8 with Microservices, DDD, CQRS, Event Sourcing and Testing Concepts
|
|
CuriousDrive/BlazingChat
BlazingChat is a Blazor WebAssembly app developed by CuriousDrive for the community. This is a sample application for developers who are just getting started with Blazor.
|
|
Jcparkyn/nodexr
Graphical regular expression editor
|
Version | Downloads | Last updated |
---|---|---|
4.2.1 | 187,953 | 3/19/2024 |
4.2.0 | 105,168 | 2/19/2024 |
4.1.0 | 452,129 | 2/23/2023 |
4.0.0 | 97,134 | 1/4/2023 |
3.2.2 | 1,130,071 | 10/8/2021 |
3.2.1 | 2,760 | 10/8/2021 |
3.1.2 | 671,125 | 5/20/2020 |
3.1.1 | 25,661 | 5/9/2020 |
3.1.0 | 3,981 | 5/8/2020 |
3.0.0 | 13,619 | 5/3/2020 |
2.0.9 | 40,585 | 2/19/2020 |
2.0.8 | 24,362 | 12/13/2019 |
2.0.7 | 9,286 | 9/25/2019 |
2.0.6 | 2,526 | 9/17/2019 |
2.0.5 | 567 | 9/5/2019 |
2.0.4 | 580 | 8/13/2019 |
2.0.3 | 960 | 7/25/2019 |
2.0.2 | 356 | 7/25/2019 |
2.0.1 | 378 | 7/24/2019 |
2.0.0 | 533 | 7/6/2019 |
1.2.1 | 946 | 6/13/2019 |
1.2.0 | 1,372 | 5/31/2019 |
1.1.4 | 1,371 | 5/17/2019 |
1.1.3 | 1,537 | 4/26/2019 |
1.1.2 | 1,319 | 4/25/2019 |
1.1.1 | 1,318 | 4/3/2019 |
1.1.0 | 1,329 | 3/30/2019 |
1.0.3 | 1,446 | 3/9/2019 |
1.0.2 | 1,482 | 2/9/2019 |
1.0.1 | 1,461 | 1/20/2019 |
1.0.0 | 1,761 | 1/20/2019 |