Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
轻量级 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)
Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍的更多相关文章
- vue 移动端轻量日期组件不依赖第三方库
Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件 小轮子 轻量可复用: https://github.com/BeckReed ...
- OWIN轻量型框架介绍
OWIN轻量型框架介绍 阅读目录 引言 框架的特色 如何启动 各项功能 静态路由的3种写法 伪静态路由的支持 处理Form表单提交的文件 流式处理Post请求的数据 多种请求类型自动识别 响应处理 请 ...
- 编写轻量ajax组件01-对比webform平台上的各种实现方式
前言 Asp.net WebForm 和 Asp.net MVC(简称MVC) 都是基于Asp.net的web开发框架,两者有很大的区别,其中一个就是MVC更加注重http本质,而WebForm试图屏 ...
- 微信小程序 MinUI 组件库系列之 price 价格组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.小程序组件化框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件 ...
- 编写轻量ajax组件03-实现(附源码)
前言 通过前两篇的介绍,我们知道要执行页面对象的方法,核心就是反射,是从请求获取参数并执行指定方法的过程.实际上这和asp.net mvc框架的核心思想很类似,它会解析url,从中获取controll ...
- 编写轻量ajax组件02-AjaxPro浅析
前言 上一篇介绍了在webform平台实现ajax的一些方式,并且实现一个基类.这一篇我们来看一个开源的组件:ajaxpro.虽然这是一个比较老的组件,不过实现思想和源码还是值得我们学习的.通过上一篇 ...
- winrt组件库(包括翻书组件)
http://www.mindscapehq.com/products/metroelements/controls/book-control-for-winrt 点击“down free trial ...
- vue组件库(四):组件功能模块划分
涉及的平台 移动端 一.公共样式 常用变量 var.scss 颜色模块 主题色.状态色.文本色.灰度色(边框和分隔线) 字体 字体.大小.行间距 2.控件 3. 三大模块 样式.有哪些控件
- BootstrapBlazor 组件库介绍
项目介绍 演示系统地址:https://www.blazor.zone Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富 ...
随机推荐
- RDMA——libibverbs 代码分析(1)
下载libibverbs最新代码,https://downloads.openfabrics.org/verbs/README.html 为1.2.0版本.后面开始逐步分析libibverbs源码. ...
- 知识点简单总结——FWT(快速沃尔什变换),FST(快速子集变换)
知识点简单总结--FWT(快速沃尔什变换),FST(快速子集变换) 闲话 博客园的markdown也太傻逼了吧. 快速沃尔什变换 位运算卷积 形如 $ f[ i ] = \sum\limits_{ j ...
- sqlserver下载地址及密匙
SqlServer 2017 下载地址及密钥 下载地址: ed2k://|file|cn_sql_server_2017_developer_x64_dvd_11296175.iso|17697771 ...
- idea 下 Vue
一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...
- 多数据源并且数据库类型不同的情况下PageHelper的使用
一.问题来源 最近开发一个项目需要依赖两个数据源,数据源类型分别为oracle和postgresql,代码中使用com.github.pagehelper分页插件进行分页,代码运行过程中postgre ...
- Kafka 判断一个节点是否还活着有那两个条件?
(1)节点必须可以维护和 ZooKeeper 的连接,Zookeeper 通过心跳机制检查每 个节点的连接 (2)如果节点是个 follower,他必须能及时的同步 leader 的写操作,延时不能太 ...
- String常用方法解析
package com.javaBase.string; import java.util.Locale; /** * 〈一句话功能简述〉; * 〈String类中常用的方法整理〉 * * @auth ...
- java-Map集合hei
/* Map集合的特点: Map集合市一个双列集合,一个元素包含两个值:一个key,一个value Map集合中的元素,key和value的数据类型可以相同,也可以不同 Map集合中的元素,key不允 ...
- kafka生产者网络层总结
1 层次结构 负责进行网络IO请求的是NetworkClient,主要层次结构如下 ClusterConnectionStates报存了每个节点的状态,以node为key,以node的状态为value ...
- 为什么 Java 中的 String 是不可变的(Immutable)?
Java 中的 String 不可变是因为 Java 的设计者认为字符串使用非常频繁,将字 符串设置为不可变可以允许多个客户端之间共享相同的字符串.