Toast 轻量弹窗

提供轻量级 Toast 弹窗

基础用法

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

Demo

Toast 手动关闭

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

Demo

Toast 显示位置

提供设置 Toast 弹窗出现位置

Demo

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

特别注意

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

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

  • Success()
  • Error()
  • Information()

示例如下:

ToastService?.Success("保存成功", "保存数据成功,4 秒后自动关闭");
private void OnInfoClick()
{
    ToastService.Show(new ToastOption()
    {
        // 通知类别
        Category = ToastCategory.Information,

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

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

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

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

通过 Startup 文件中的 ConfigureServices 方法配置,适用于 Server-Side AppWebAssembly 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;
    });
}

Attributes 属性

Loading...
An error has occurred. This application may no longer respond until reloaded. Reload