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

2022-04-17 08:00:17 阅读：238 来源： 互联网

轻量级 Toast 弹窗

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

<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

写在最后

　　希望大佬们看到这篇文章，能给项目点个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）

标签：Toast,star,https,Title,关闭,组件,轻量,弹窗
来源： https://www.cnblogs.com/densen2014/p/16147334.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9