Repository files navigation

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

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.

You will need to register the Blazored Toast service with the service collection in yourProgram.cs file.

builder.Services.AddBlazoredToast();

Add the following to your_Imports.razor

@usingBlazored.Toast@usingBlazored.Toast.Services

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 theMicrosoft Docs for additional details.

<linkhref="{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 seeMaterial Design Icons for the available alternatives.

Add the<BlazoredToasts /> tag into your applicationsMainLayout.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:

<BlazoredToastsIconType="IconType.FontAwesome"SuccessIcon="fa fa-thumbs-up"/>

Setting the position also requires a reference toBlazored.Toast.Configuration, for example:

@usingBlazored.Toast.Configuration<BlazoredToastsPosition="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 theCloseButtonContent parameter:

<BlazoredToastsPosition="ToastPosition.BottomRight"Timeout="10">    <CloseButtonContent>        <div>            <span>&times;</span>        </div>    </CloseButtonContent></BlazoredToasts>

In order to show a toast you have to inject theIToastService 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"@injectIToastServicetoastService<h1>Toast Demo</h1>To show a toast just click one of the buttons below.<buttonclass="btn btn-info"@onclick="@(() => toastService.ShowInfo("I'm an INFO message"))">Info Toast</button><button @onclick="@(() => toastService.ShowSuccess("I'maSUCCESSmessagewithacustomtitle"))">Success Toast</button><buttonclass="btn btn-warning"@onclick="@(() => toastService.ShowWarning("I'm a WARNING message"))">Warning Toast</button><button @onclick="@(() => toastService.ShowError("I'manERRORmessage"))">Error Toast</button>

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 theShowProgressBar parameter to true.

<BlazoredToastsPosition="ToastPosition.BottomRight"Timeout="10"ShowProgressBar="true" />

If you wish to clear any visible toasts when the user navigates to a new page you can enable theRemoveToastsOnNavigation parameter. Setting this to true will remove any visible toasts whenever theLocationChanged event fires.

If you want to limit the number of toasts displayed at any given time, you can set theMaxToastCount parameter. For example, if the value is set to3 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.

You can call theShowToast method passing the type of component you want the toast to display.

For example if I have a component calledMyToast which I want to display in the toast and I want to call it from theIndex component on a button click.

@page"/toastdemo"@injectIToastServicetoastService<h1>Custom Toast Demo</h1><buttonclass="btn btn-primary"@onclick="@(() => toastService.ShowToast<MyToast>())">Custom Toast</button>

If you want to pass values to the component you're displaying in the toast, then you can use theToastParameters object. The name you provide must match the name of a parameter defined on the component being displayed.

@page"/toastdemo"@injectIToastServicetoastService<h1>Custom Toast Demo</h1><buttonclass="btn btn-primary"@onclick="@(() => toastService.ShowToast<MyToast>(_toastParameters))">Custom Toast with parameters</button>@code{privateToastParameters_toastParameters;protectedoverridevoidOnInitialized(){_toastParameters=newToastParameters();_toastParameters.Add(nameof(MyToast.Heading),"MyToast heading");_toastParameters.Add(nameof(MyToast.Message),"MyToast message");}}

Custom toast components can be customized. These settings can be set globally or changed programatically on a per toast basis. This is achieved using theToastInstanceSettings 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"@injectIToastServicetoastService<h1>Custom Toast Demo</h1><buttonclass="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 thesamples.