Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Toast Lightweight Popup

Provides a lightweight toast popup

Component usage introduction：

1. Inject service ToastService

@inject ToastService ToastService

[Inject]
[NotNull]
private ToastService? ToastService { get; set; }

2. Call its instance api

await ToastService.Success("Title", "Content", autoHide: true);

Basic usage

When the user operates, the lower right corner will give appropriate prompt information

Demo

Save data successfully, automatically close after 4 seconds

Information prompt pop-up window, automatically closes after 4 seconds

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Toasts> Localizer
@inject ToastService ToastService

<div class="row g-3 overflow-hidden">
    <div class="col-12 col-lg-6 col-xl-3">
        <Toast class="d-toast show" Options="@Options1" />
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
        <Toast class="d-toast show" Options="@Options2" />
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
        <Toast class="d-toast show" Options="@Options3" />
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
        <Toast class="d-toast show" Options="@Options4" />
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
        <Button Color="Color.Success" Icon="fa-solid fa-circle-check" OnClick="@OnSuccessClick" Text="@Localizer["ToastsSuccess"]"></Button>
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
        <Button Color="Color.Danger" Icon="fa-solid fa-circle-xmark" OnClick="@OnErrorClick" Text="@Localizer["ToastsDanger"]"></Button>
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
        <Button Color="Color.Info" Icon="fa-solid fa-circle-exclamation" OnClick="@OnInfoClick" Text="@Localizer["ToastsInfo"]"></Button>
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
        <Button Color="Color.Warning" Icon="fa-solid fa-triangle-exclamation" OnClick="@OnWarningClick" Text="@Localizer["ToastsWarning"]"></Button>
    </div>
</div>

@code {
    [NotNull]
    private ToastOption? Options1 { get; set; }

    [NotNull]
    private ToastOption? Options2 { get; set; }

    [NotNull]
    private ToastOption? Options3 { get; set; }

    [NotNull]
    private ToastOption? Options4 { get; set; }

    [CascadingParameter]
    [NotNull]
    private BootstrapBlazorRoot? Root { get; set; }

    [NotNull]
    private ToastContainer? ToastContainer { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Options1 = new ToastOption { Title = "Save data", IsAutoHide = false, Content = "Save data successfully, automatically close after 4 seconds" };
        Options2 = new ToastOption { Category = ToastCategory.Error, Title = "Save data", IsAutoHide = false, Content = "Save data successfully, automatically close after 4 seconds" };
        Options3 = new ToastOption { Category = ToastCategory.Information, Title = "Prompt information", IsAutoHide = false, Content = "Information prompt pop-up window, automatically closes after 4 seconds" };
        Options4 = new ToastOption { Category = ToastCategory.Warning, Title = "Warning message", IsAutoHide = false, Content = "Information prompt pop-up window, automatically closes after 4 seconds" };

        ToastContainer = Root.ToastContainer;
    }

    private async Task OnSuccessClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Success,
            Title = "Successfully saved",
            Content = "Save data successfully, automatically close after 4 seconds"
        });
    }

    private async Task OnErrorClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Error,
            Title = "Failed to save",
            Content = "Failed to save data, automatically closes after 4 seconds"
        });
    }

    private async Task OnInfoClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "Notification",
            Content = "The system adds new components, it will automatically shut down after 4 seconds"
        });
    }

    private async Task OnWarningClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            Title = "Warning",
            Content = "If the system finds abnormality, please deal with it in time, and it will automatically shut down after 4 seconds"
        });
    }
}

Toast is closed manually

It will not close automatically, you need to manually click the close button

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Toasts> Localizer
@inject ToastService ToastService

<Button Icon="fa-solid fa-triangle-exclamation" OnClick="@OnNotAutoHideClick" Text="@Localizer["ToastsCloseNotificationText"]"></Button>

@code {
    [CascadingParameter]
    [NotNull]
    private BootstrapBlazorRoot? Root { get; set; }

    [NotNull]
    private ToastContainer? ToastContainer { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        ToastContainer = Root.ToastContainer;
    }

    private async Task OnNotAutoHideClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);

        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            IsAutoHide = false,
            Title = "Notification",
            Content = "I will not close automatically, please click the close button in the upper right corner"
        });
    }
}

No header

Set ShowHeader="false" remove Header

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Toasts> Localizer
@inject ToastService ToastService

<Button Icon="fa-solid fa-circle-exclamation" OnClick="@OnShowHeaderClick" Text="@Localizer["ShowHeaderText"]"></Button>

@code {
    [CascadingParameter]
    [NotNull]
    private BootstrapBlazorRoot? Root { get; set; }

    [NotNull]
    private ToastContainer? ToastContainer { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        ToastContainer = Root.ToastContainer;
    }

    private async Task OnShowHeaderClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            ShowHeader = false,
            Content = "The system adds new components, it will automatically shut down after 4 seconds"
        });
    }
}

Custom header

set HeaderTemplate custom the header content

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Toasts> Localizer
@inject ToastService ToastService

<Button Icon="fa-solid fa-circle-exclamation" OnClick="@OnHeaderTemplateClick" Text="@Localizer["ShowHeaderText"]"></Button>

@code {
    RenderFragment RenderHeader =>
        @<div class="d-flex flex-fill pe-3">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
            <strong class="me-auto">Bootstrap</strong>
            <small class="text-muted">just now</small>
        </div>;
}

@code {
    [NotNull]
    private ToastContainer? ToastContainer { get; set; }

    [CascadingParameter]
    [NotNull]
    private BootstrapBlazorRoot? Root { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        ToastContainer = Root.ToastContainer;
    }

    private async Task OnHeaderTemplateClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            HeaderTemplate = RenderHeader,
            Content = "The system adds new components, it will automatically shut down after 4 seconds"
        });
    }
}

Toast display location

Provides settings where the Toast popup appears

Demo

Set the location where the popup appears by setting the Placement value of the Toast component. The default value is BottomEnd. upper right corner

@inject ToastService ToastService

<div class="row g-3 row-cols-3">
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.TopStart)">Top Start</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.TopCenter)">Top Center</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.TopEnd)">Top End</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.MiddleStart)">Middle Start</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.MiddleCenter)">Middle Center</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.MiddleEnd)">Middle End</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.BottomStart)">Bottom Start</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.BottomCenter)">Bottom Center</Button>
    </div>
    <div class="col">
        <Button OnClick="e => OnPlacementClick(Placement.BottomEnd)">Bottom End</Button>
    </div>
</div>

@code {
    [NotNull]
    private ToastContainer? ToastContainer { get; set; }

    [CascadingParameter]
    [NotNull]
    private BootstrapBlazorRoot? Root { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        ToastContainer = Root.ToastContainer;
    }

    private async Task OnPlacementClick(Placement placement)
    {
        ToastContainer.SetPlacement(placement);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "Notification",
            Content = "<b>Toast</b> The component has changed position, it will automatically shut down after 4 seconds"
        });
    }
}

pay attention

This component provides functions in the form of injection services, and the user experience is very comfortable when used, and can be called anytime, anywhere
The injection service provides the following shortcut invocation methods:

Success()
Error()
Information()
Warning()

Examples are as follows：

ToastService?.Success("Successfully saved", "Save data successfully, automatically close after 4 seconds");

private void OnInfoClick()
{
    ToastService.Show(new ToastOption()
    {
        // Notification category
        Category = ToastCategory.Information,

        // Notification box Title value
        Title = "notification",

        // Notification body content
        Content = "The system adds new components, it will automatically shut down after 4 seconds"
    });
}

Tips

Special Note: The Delay parameter value of the Toast component in the entire system can be set through the BootstrapBlazorOptions global unified configuration parameter

Configured through the configuration file appsetting.json file, suitable for Server-Side App

"BootstrapBlazorOptions": {
    "ToastDelay": 4000,
    "MessageDelay": 4000,
    "SwalDelay": 4000
}

Configured via the ConfigureServices method in the Startup file for Server-Side App and WebAssembly App

public void ConfigureServices(IServiceCollection services)
{
    // Uniformly set the automatic disappearance time of the Toast component
    services.Configure<BootstrapBlazorOptions>(options =>
    {
        options.ToastDelay = 4000;
    });
}

Or, for Server-Side App only

public void ConfigureServices(IServiceCollection services)
{
    // Add BootstrapBlazor component
    services.AddBootstrapBlazor(options =>
    {
        // Uniformly set the automatic disappearance time of the Toast component
        options.ToastDelay = 4000;
    });
}

Attributes

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Toast Lightweight Popup

Provides a lightweight toast popup

Demo

Demo

Demo

Demo

Demo

pay attention

Tips

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01