
Message 消息提示
常用于主动操作后的反馈提示。与 Toast 的区别是后者更多用于系统级通知的被动提醒
基础用法
从顶部出现,4 秒后自动消失
Demo
带图标的消息框
通过设置 MessageOption
的 Icon
属性,更改消息框左侧小图标
Demo
带关闭按钮的消息框
通过设置 MessageOption
的 ShowDismiss
属性,更改消息框右侧出现关闭按钮
Demo
左侧带边框的消息框
通过设置 MessageOption
的 ShowBar
属性,更改消息框左侧边框样式
Demo
不同颜色的消息框
通过设置 MessageOption
的 Color
属性,更改消息框颜色
Demo
消息框弹出位置
通过设置 Message
组件的 Placement
属性,更改消息框弹出位置
Demo
<Message />
Attributes
Loading...
MessageItem 属性
Loading...
@page "/messages"
<h3>Message 消息提示</h3>
<h4>常用于主动操作后的反馈提示。与 Toast 的区别是后者更多用于系统级通知的被动提醒</h4>
<Block Title="基础用法" Introduction="从顶部出现,4 秒后自动消失">
<button class="btn btn-primary" @onclick="@ShowMessage">打开消息提示</button>
</Block>
<Block Title="带图标的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>Icon</code> 属性,更改消息框左侧小图标">
<button class="btn btn-primary" @onclick="@ShowIconMessage">打开消息提示</button>
</Block>
<Block Title="带关闭按钮的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>ShowDismiss</code> 属性,更改消息框右侧出现关闭按钮">
<button class="btn btn-primary" @onclick="@ShowCloseMessage">打开消息提示</button>
</Block>
<Block Title="左侧带边框的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>ShowBar</code> 属性,更改消息框左侧边框样式">
<button class="btn btn-primary" @onclick="@ShowBarMessage">打开消息提示</button>
</Block>
<Block Title="不同颜色的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>Color</code> 属性,更改消息框颜色">
<div class="form-inline">
<div class="row">
<div class="form-group col-6 col-sm-auto">
<button class="btn btn-primary" @onclick="@(e => ShowColorMessage(Color.Primary))">Primary 消息</button>
</div>
<div class="form-group col-6 col-sm-auto">
<button class="btn btn-success" @onclick="@(e => ShowColorMessage(Color.Success))">Success 消息</button>
</div>
<div class="form-group col-6 col-sm-auto">
<button class="btn btn-info" @onclick="@(e => ShowColorMessage(Color.Info))">Info 消息</button>
</div>
<div class="form-group col-6 col-sm-auto">
<button class="btn btn-danger" @onclick="@(e => ShowColorMessage(Color.Danger))">Danger 消息</button>
</div>
<div class="form-group col-6 col-sm-auto">
<button class="btn btn-warning" @onclick="@(e => ShowColorMessage(Color.Warning))">Warning 消息</button>
</div>
<div class="form-group col-6 col-sm-auto">
<button class="btn btn-secondary" @onclick="@(e => ShowColorMessage(Color.Secondary))">Secondary 消息</button>
</div>
</div>
</div>
</Block>
<Block Title="消息框弹出位置" Introduction="通过设置 <code>Message</code> 组件的 <code>Placement</code> 属性,更改消息框弹出位置">
<button class="btn btn-primary" @onclick="@ShowBottomMessage">打开消息提示</button>
</Block>
<Tips class="mt-3">
<p>
<code>Message</code> 组件使用了全局组件,需要再使用本组件的页面或者全局组件中内置本组件,示例代码如下:
</p>
</Tips>
<Pre><Message /></Pre>
<Message @ref="MessageElement" />
<AttributeTable Items="@GetAttributes()" />
<AttributeTable Title="MessageItem 属性" Items="@GetMessageItemAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class Messages
{
#nullable disable
private Message MessageElement { get; set; }
#nullable restore
/// <summary>
///
/// </summary>
[Inject] public MessageService? MessageService { get; set; }
private void ShowMessage()
{
MessageElement.SetPlacement(Placement.Top);
MessageService?.Show(new MessageOption()
{
Host = MessageElement,
Content = "这是一条提示消息"
});
}
private void ShowIconMessage()
{
MessageElement.SetPlacement(Placement.Top);
MessageService?.Show(new MessageOption()
{
Host = MessageElement,
Content = "这是一条提示消息",
Icon = "fa fa-info-circle"
});
}
private void ShowCloseMessage()
{
MessageElement.SetPlacement(Placement.Top);
MessageService?.Show(new MessageOption()
{
Host = MessageElement,
Content = "这是一条提示消息",
Icon = "fa fa-info-circle",
ShowDismiss = true,
});
}
private void ShowBarMessage()
{
MessageElement.SetPlacement(Placement.Top);
MessageService?.Show(new MessageOption()
{
Host = MessageElement,
Content = "这是一条提示消息",
Icon = "fa fa-info-circle",
ShowBar = true,
});
}
private void ShowColorMessage(Color color)
{
MessageElement.SetPlacement(Placement.Top);
MessageService?.Show(new MessageOption()
{
Host = MessageElement,
Content = "这是带颜色的消息",
Icon = "fa fa-info-circle",
Color = color
});
}
private void ShowBottomMessage()
{
MessageElement.SetPlacement(Placement.Bottom);
MessageService?.Show(new MessageOption()
{
Host = MessageElement,
Content = "这是一条提示消息",
Icon = "fa fa-info-circle",
});
}
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Placement",
Description = "消息弹出位置",
Type = "Placement",
ValueList = "Top|Bottom",
DefaultValue = "Top"
}
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetMessageItemAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "ChildContent",
Description = "内容",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Class",
Description = "样式",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Color",
Description = "颜色",
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Primary"
},
new AttributeItem() {
Name = "Icon",
Description = "图标",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ShowDismiss",
Description = "关闭按钮",
Type = "bool",
ValueList = " — ",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowBar",
Description = "是否显示左侧 Bar",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
}
};
}
}