Bootstrap Blazor - 一套企业级 UI 组件库

Toast 轻量弹窗

提供轻量级 Toast 弹窗

基础用法

用户操作时，右下角给予适当的提示信息

Demo

保存数据成功，4 秒后自动关闭

保存数据失败，4 秒后自动关闭

信息提示弹窗，4 秒后自动关闭

<ToastBox class="d-block" Title="保存数据" IsAutoHide="false" Content="保存数据成功，4 秒后自动关闭"></ToastBox>
<ToastBox class="d-block" Category="ToastCategory.Error" Title="保存数据" IsAutoHide="false" Content="保存数据失败，4 秒后自动关闭"></ToastBox>
<ToastBox class="d-block" Category="ToastCategory.Information" Title="提示信息" IsAutoHide="false"  Content="信息提示弹窗，4 秒后自动关闭"></ToastBox>
<Button Color="Color.Success" OnClick="@OnSuccessClick">成功通知</Button>
<Button Color="Color.Danger" OnClick="@OnErrorClick" >失败通知</Button>
<Button Color="Color.Info" OnClick="@OnInfoClick" >信息通知</Button>

<Toast @ref="Toast"></Toast>

@code{
    /// <summary>
    /// 
    /// </summary>
    [Inject]
    [NotNull]
    public ToastService ToastService { get; set; }

    [NotNull]
    private Toast Toast { get; set; }

    protected async Task OnSuccessClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Success,
            Title = "保存成功",
            Content = "保存数据成功，4 秒后自动关闭"
        });
    }

    protected async Task OnErrorClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Error,
            Title = "保存失败",
            Content = "保存数据失败，4 秒后自动关闭"
        });
    }

    protected async Task OnInfoClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "消息通知",
            Content = "系统增加新组件啦，4 秒后自动关闭"
        });
    }
}

Toast 手动关闭

不会自动关闭，需要人工点击关闭按钮

Demo

<Button OnClick="@OnNotAutoHideClick">成功通知</Button>

<Toast @ref="Toast"></Toast>

@code{
    /// <summary>
    /// 
    /// </summary>
    [Inject]
    [NotNull]
    public ToastService? ToastService { get; set; }

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

    protected async Task OnNotAutoHideClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            IsAutoHide = false,
            Title = "消息通知",
            Content = "我不会自动关闭哦，请点击右上角关闭按钮"
        });
    }
}

Toast 显示位置

提供设置 Toast 弹窗出现位置

Demo

通过设置 Toast 组件的 Placement 值来设置弹窗出现的位置，默认值为 BottomEnd 除此之外的值均为右上角

<Button OnClick="e => OnPlacementClick(Placement.TopEnd)">右上角</Button>
<Button OnClick="e => OnPlacementClick(Placement.BottomEnd)">右下角</Button>
<Button OnClick="e => OnPlacementClick(Placement.TopStart)">左上角</Button>
<Button OnClick="e => OnPlacementClick(Placement.BottomStart)">左下角</Button>

<Toast @ref="Toast"></Toast>

@code{
    /// <summary>
    /// 
    /// </summary>
    [Inject]
    [NotNull]
    public ToastService? ToastService { get; set; }

    [NotNll]
    private Toast Toast { get; set; }

    protected async Task OnPlacementClick(Placement placement)
    {
        Toast.SetPlacement(placement);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "消息通知",
            Content = "<b>Toast</b> 组件更改位置啦，4 秒后自动关闭"
        });
    }
}

特别注意

本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用

注入服务提供三种快捷调用方法

Success()
Error()
Information()

示例如下：

ToastService?.Success("保存成功", "保存数据成功，4 秒后自动关闭");

private void OnInfoClick()
{
    ToastService.Show(new ToastOption()
    {
        // 通知类别
        Category = ToastCategory.Information,

        // 通知框 Title 值
        Title = "消息通知",

        // 通知正文内容
        Content = "系统增加新组件啦，4 秒后自动关闭"
    });
}

小技巧

需要在使用本组件的页面中内置 Toast 组件，或者在 MainLayout 主布局组件中内置，示例代码如下：

<Toast />

小技巧

特别说明: 可以通过 BootstrapBlazorOptions 全局统一配置参数可以设置整个系统内的 Toast 组件 Delay 参数值

通过配置文件 appsetting.json 文件配置，适用于 Server-Side App

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

通过 Startup 文件中的 ConfigureServices 方法配置，适用于 Server-Side App 和 WebAssembly App

public void ConfigureServices(IServiceCollection services)
{
    // 统一设置 Toast 组件自动消失时间
    services.Configure<BootstrapBlazorOptions>(options =>
    {
        options.ToastDelay = 4000;
    });
}

或者，仅适用于 Server-Side App

public void ConfigureServices(IServiceCollection services)
{
    // 增加 BootstrapBlazor 组件
    services.AddBootstrapBlazor(options =>
    {
        // 统一设置 Toast 组件自动消失时间
        options.ToastDelay = 4000;
    });
}

Toast 轻量弹窗

提供轻量级 Toast 弹窗

基础用法

Demo

Toast 手动关闭

Demo

Toast 显示位置

Demo

特别注意

小技巧

小技巧

Attributes 属性