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 | 弹出框类型 | 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 组件库文档
写在最后
希望大佬们看到这篇文章,能给项目点个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)
相关文章推荐
- Bootstrap Blazor 组件介绍
- Blazor 组件库 BootstrapBlazor 中Tag组件介绍
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
- 详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
- BootstrapBlazor--Input 组件
- BootstrapBlazor - EditorForm 表单组件(一)
- mpvue的toast弹窗组件-mptosat
- (初识android) android组件 RadioButton,CheckBox,Toast简单介绍
- BootstrapBlazor 智能生成神器(一)AutoGenerateColumnAttribute 特性介绍
- Bootstrap分布组件使用介绍
- 创建vue项目步骤、项目目录介绍、es6语法之导入导出、定义并使用组件、集成bootstrap,jQuery,elementui、与后端交互
- Messenger 弹窗,一个非常酷的弹框组件的介绍与使用
- Bootstrap Blazor 组件入门
- 微信小程序 toast组件详细介绍
- Bootstrap Blazor Cascader 级联选择组件
- vue的toast弹窗组件实例详解
- Twitter-bootstrap-typeahead——一款模糊查询的jQuery支持ajax的组件介绍
- BootstrapBlazor 组件库使用体验---Table篇
- Bootstrap组件介绍
- UF超滤膜组件高分子材料与过滤原理介绍