Blazor 组件库 BootstrapBlazor 中Alert组件介绍

组件介绍

Alert组件几乎是组件库里必不可少的组件了,即使浏览器,也自带了一个alert,会弹出一个模态框。

但是这个模态框有点太丑了,所以各大组件库分分实现了自己的Alert组件。

当然BootstrapBlazor也不例外,同样实现了自己的Alert

样子如下:

alert.png

对应的代码为:

<Alert Color="Color.Primary">@AlertPrimaryText</Alert>
<Alert Color="Color.Secondary">@AlertSecondaryText</Alert>
<Alert Color="Color.Success">@AlertSuccessText</Alert>
<Alert Color="Color.Danger">@AlertDangerText</Alert>
<Alert Color="Color.Warning">@AlertWarningText</Alert>
<Alert Color="Color.Info">@AlertInfoText</Alert>
<Alert Color="Color.Dark">@AlertDarkText</Alert>

组件的其他属性

ChildContent:内容的RenderFragment,可以是简单的文本也可以是复杂的组件。所以我们可以利用警告框来实现例如强调等其他作用。

Class:额外的css样式。

Color:颜色,可选值有 Primary / Secondary / Success / Danger / Warning / Info / Dark

Icon:图标,可以直接输入FontAwasome 4.7的图标名,如fa fa-home

ShowDismiss:显示关闭按钮。为true则会在Alert的最后显示一个关闭按钮。

OnDismiss:类型为 EventCallback<MouseEventArgs>的回调,此回调在点击关闭按钮后执行。

ShowBar:左侧显示一个Bar。

posted @   jvx  阅读(1441)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示