Blazor Bootstrap Toast组件：如何使用轻量级弹窗功能？

本文共计624个文字，预计阅读时间需要3分钟。

轻量级 Toast 弹窗 DEMOhttps://www.blazor.zone/toasts基础用法：用户操作时，右下角显示相应的提示信息 ToastBox class=d-block Options=@Options />@code { private ToastOption Options1=new ToastOption { Title=保存数据, IsAuto=true };}

轻量级 Toast 弹窗

DEMO www.blazor.zone/toasts

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

<ToastBox class="d-block" Options="@Options1" /> @code{ Options1 = new ToastOption { Title = "保存数据", IsAutoHide = false, Content = "保存数据成功，4 秒后自动关闭" }; } Toast 手动关闭: 不会自动关闭，需要人工点击关闭按钮

<Button Icon="fa fa-exclamation-triangle" OnClick="@OnNotAutoHideClick" Text="成功通知"></Button> @code{ private async Task OnNotAutoHideClick() { Toast.SetPlacement(Placement.BottomEnd); await ToastService.Show(new ToastOption() { Category = ToastCategory.Warning, IsAutoHide = false, Title = "消息通知", Content = "我不会自动关闭哦，请点击右上角关闭按钮" }); } } 特别注意

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

注入服务提供以下几种快捷调用方法

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

示例如下：

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

或

private void OnInfoClick() { ToastService.Show(new ToastOption() { // 通知类别 Category = ToastCategory.Information, // 通知框 Title 值 Title = "消息通知", // 通知正文内容 Content = "系统增加新组件啦，4 秒后自动关闭" }); } 属性 参数说明类型可选值默认值Category弹出框类型ToastCategorySuccess/Information/Error/WarningSuccessCotent弹窗内容string—Delay自动隐藏时间间隔int—4000IsAutoHide是否自动隐藏booleantrueIsHtml内容中是否包含 Html 代码booleanfalsePlacement位置PlacementAuto / Top / Left / Bottom / RightAutoTitle弹窗标题string— Blazor Bootstrap 组件库文档

www.blazor.zone

写在最后

　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！

star流程：

1、访问点击项目链接：BootstrapBlazor

　　gitee.com/LongbowEnterprise/BootstrapBlazor

2、点击star，如下图，即可完成star，关注项目不迷路：
　　
　　

另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：

　　BootstrapAdmin 项目地址：

　　gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 项目地址：

　　gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）欢迎加群讨论

　　 BA & Blazor ①（795206915）　　　　　　　 BA & Blazor ②（675147445）