Blazor 组件库 BootstrapBlazor 中Message组件介绍

组件介绍

上一篇文章我们介绍了Alert组件，但是实际上Alert组件只能直接把内容加载到页面内，这个做不到当作提示使用。

所以我们还有一个新的组件Message。这个组件的样式几乎与Alert组件一模一样。但是它可以浮动在窗口之上，4秒之后消失。

代码如下：

await MessageService.Show(new MessageOption()
        {
            Content = "这是一条提示消息",
            Icon = "fa fa-info-circle",
            ShowBar = true,
        });

是的，你注意到了，这里用了MessageService，这是一个类，专门用来显示Message的消息提示的。

我们需要注入这个类

[Inject]
    [NotNull]
    public MessageService? MessageService { get; set; }

注入后即可使用。

组件的其他属性

下列属性与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。

多出的属性：

Placement：消息出现的位置，类型为Placement，可选值有 Top|Bottom，默认值是Top