ChrisMingay.BlazorTailwindToast
1.0.2
See the version list below for details.
dotnet add package ChrisMingay.BlazorTailwindToast --version 1.0.2
NuGet\Install-Package ChrisMingay.BlazorTailwindToast -Version 1.0.2
<PackageReference Include="ChrisMingay.BlazorTailwindToast" Version="1.0.2" />
paket add ChrisMingay.BlazorTailwindToast --version 1.0.2
#r "nuget: ChrisMingay.BlazorTailwindToast, 1.0.2"
// Install ChrisMingay.BlazorTailwindToast as a Cake Addin
#addin nuget:?package=ChrisMingay.BlazorTailwindToast&version=1.0.2
// Install ChrisMingay.BlazorTailwindToast as a Cake Tool
#tool nuget:?package=ChrisMingay.BlazorTailwindToast&version=1.0.2
Blazor Tailwind Toast
This is a JavaScript free toast implementation for Blazor and Razor Components applications using tailwindcss for styling.
This project is a fork of Blazored.Toast with some minor differences.
Differences from Blazored Toast
- Uses tailwind for styling rules
- Removed icons
- Removed progress bar
- Ability to select which position a toast instance appears on screen.
- Hover pauses the timeout
- Toast content has to be a string (for now), whereas Blazored Toast lets you send a RenderFragment
Getting Setup
You can install the package via the NuGet package manager just search for ChrisMingay.BlazorTailwindToast. You can also install via powershell using the following command.
Install-Package ChrisMingay.BlazorTailwindToast
Or via the dotnet CLI
dotnet add package ChrisMingay.BlazorTailwindToast
1. Register Services
You will need to register the Toast service in your application
Blazor Server
Add the following line to your applications Startup.ConfigureServices
method.
public void ConfigureServices(IServiceCollection services)
{
services.AddBlazorTailwindToast();
}
Blazor WebAssembly
Add the following line to your applications Program.Main
method.
builder.Services.AddBlazorTailwindToast();
2. Add Imports
Add the following to your _Imports.razor
@using BlazorTailwindToast
@using BlazorTailwindToast.Services
@using BlazorTailwindToast.Enums
@using BlazorTailwindToast.Configuration
3. Register Toasts Component
Add the <Toaster />
tag into your applications MainLayout.razor.
4. Add reference to style sheet
Add the following line to the head
tag of your _Host.cshtml
(Blazor Server app) or index.html
(Blazor WebAssembly).
For minifed use:
<link href="_content/ChrisMingay.BlazorTailwindToast/app.min.css" rel="stylesheet" />
The stylesheet app.min.css
contains only the tailwind styles defined in the build process. It is not required that you reference tailwind in your host project, all styles are self contained.
Usage
Toast instances are configured with the ToastOptions
class:
public class ToastOptions
{
// The theme to use for this instance
public ToastLevel Level { get; set; } = ToastLevel.Info;
// The position of this instance
public ToastPosition Position { get; set; } = ToastPosition.TopRight;
// An optional heading
public string Heading { get; set; }
// The message body
public string Message { get; set; }
// How long the instance stays on screen in millisends
public int Timeout { get; set; } = 5000; // i.e. 5 secods
// An option on click event can be run
public Action? OnClick { get; set; }
// When an action is provided this is used for the button text.
public string ButtonLabel { get; set; }
}
Code Example
@page "/toastdemo"
@inject IToastService toastService
<h1>Toast Demo</h1>
<button style="padding: 10px; margin: 10px; border: 1px solid #ccc" type="button" @onclick='() => toastService.ShowToast("Message","Heading")'>
Inline message and heading
</button>
<button style="padding: 10px; margin: 10px; border: 1px solid #ccc" type="button" @onclick='() => toastService.ShowToast(new ToastOptions(){
Message = " Toast option based message",
Heading=null,
Timeout=10000,
Level=ToastLevel.Error,
Position=ToastPosition.BottomCenter
})'>
ToastOption based
</button>
Full examples for client and server-side Blazor are included in the samples.
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.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. net6.0 was computed. 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 was computed. 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 was computed. 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. |
.NET Core | netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.1 is compatible. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.1
- Microsoft.AspNetCore.Components (>= 3.1.6)
- Microsoft.AspNetCore.Components.Web (>= 3.1.6)
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 3.1.6)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Fix the zindex of the toaster elements