您的位置:首页 > Web前端 > BootStrap

Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍

2022-04-17 07:49 676 查看

轻量级 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弹出框类型ToastCategorySuccess/Information/Error/WarningSuccess
Cotent弹窗内容string
Delay自动隐藏时间间隔int4000
IsAutoHide是否自动隐藏booleantrue
IsHtml内容中是否包含 Html 代码booleanfalse
Placement位置PlacementAuto / Top / Left / Bottom / RightAuto
Title弹窗标题string

Blazor Bootstrap 组件库文档

https://www.blazor.zone

写在最后

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

star流程:

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

  https://gitee.com/LongbowEnterprise/BootstrapBlazor

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

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

  BootstrapAdmin 项目地址:

  https://gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 项目地址:

  https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群(QQ)欢迎加群讨论

   BA & Blazor ①(795206915)        BA & Blazor ②(675147445)

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: