轻量级 Toast 弹窗
DEMO https://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 |
弹出框类型 |
ToastCategory |
Success/Information/Error/Warning |
Success |
Cotent |
弹窗内容 |
string |
— |
|
Delay |
自动隐藏时间间隔 |
int |
— |
4000 |
IsAutoHide |
是否自动隐藏 |
boolean |
true |
|
IsHtml |
内容中是否包含 Html 代码 |
boolean |
false |
|
Placement |
位置 |
Placement |
Auto / Top / Left / Bottom / Right |
Auto |
Title |
弹窗标题 |
string |
— |
Blazor Bootstrap 组件库文档
https://www.blazor.zone
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 cloud@ksuyun.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.daxuejiayuan.com/17281.html
如若转载,请注明出处:https://www.daxuejiayuan.com/17281.html