bootstrap4和5的区别ootstrap4（bootstrap4和5的区别）

投稿用户 • 2022年5月21日 11:31:05 • 资讯动态 • 阅读 61

轻量级 Toast 弹窗

DEMO https://www.blazor.zone/toasts

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

bootstrap4和5的区别ootstrap4（bootstrap4和5的区别）

<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