Blazor Bootstrap: Toasts Component Examples
Usage:
Toast:
<Toasts class="p-3" Messages="messages" Placement="ToastsPlacement.TopRight" AutoHide="false">
</Toasts>
<div class="mb-3">
<Button Color="ButtonColor.Primary" @onclick="ShowToast">Show Toast</Button>
</div>
List<ToastMessage> messages = new List<ToastMessage>();
private void ShowToast()
{
messages?.Add(new ToastMessage
{
Type = ToastType.Warning,
IconName = IconName.Alarm,
Title = "Blazor Bootstrap",
HelpText = $"{DateTime.Now}",
Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
});
}
Simple Toast:
<Toasts class="p-3" Messages="messages" Placement="ToastsPlacement.TopRight" AutoHide="false">
</Toasts>
<div class="mb-3">
<Button Color="ButtonColor.Primary" @onclick="ShowSimpleToast">Show Simple Toast</Button>
</div>
List<ToastMessage> messages = new List<ToastMessage>();
private void ShowSimpleToast()
{
messages?.Add(new ToastMessage
{
Type = ToastType.Success,
IconName = IconName.Alarm,
Message = $"Hello, world! This is a simple toast message. DateTime: {DateTime.Now}",
});
}
Blazor Bootstrap Links:
- Blazor Bootstrap: Quick Start
- Blazor Bootstrap: Alert Component Examples
- Blazor Bootstrap: Buttons Examples
- Blazor Bootstrap: Icons Component Examples
- Blazor Bootstrap: Modal Component Examples
- Blazor Bootstrap: Offcanvas Component Example
- Blazor Bootstrap: Toasts Component Examples
- Blazor Bootstrap: Tooltip Component Examples
-
CreatedDec 08, 2021
-
UpdatedDec 12, 2021
-
Views3,922
Related Articles
Fixed: Blazor Webassembly - Google Authentication Issue - Access to XMLHttpRequest at 'https://login.microsoftonline.com/.well-known/openid-configuration' from origin 'https://localhost:7215' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Blazor Bootstrap: Tooltip Component Examples
Blazor Bootstrap: Alert Component Examples
Blazor Bootstrap: Icon Component Examples
Blazor Bootstrap: Modal Component Examples
Blazor Bootstrap: Offcanvas examples
Blazor Bootstrap: Button Examples
Blazor Bootstrap: Quick Start
How to migrate Blazor WebAssembly App to .NET 5
Blazor: How to bind employees to table / grid