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:

  1. Blazor Bootstrap: Quick Start
  2. Blazor Bootstrap: Alert Component Examples
  3. Blazor Bootstrap: Buttons Examples
  4. Blazor Bootstrap: Icons Component Examples
  5. Blazor Bootstrap: Modal Component Examples
  6. Blazor Bootstrap: Offcanvas Component Example
  7. Blazor Bootstrap: Toasts Component Examples
  8. Blazor Bootstrap: Tooltip Component Examples