Toast 轻量弹窗
提供轻量级 Toast 弹窗
基础用法
用户操作时,右下角给予适当的提示信息
Demo
保存数据
保存数据成功,4 秒后自动关闭
保存数据
保存数据失败,4 秒后自动关闭
提示信息
信息提示弹窗,4 秒后自动关闭
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 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;
});
}
Attributes 属性
Loading...