
Message prompt
Often used for feedback prompts after active operations. The difference from Toast is that the latter is more passive reminder for system-level notifications
Component usage introduction:
1. Inject service MessageService
@inject MessageService MessageService
[Inject]
[NotNull]
private MessageService? MessageService { get; set; }
2. call its instance api
await MessageService.Show(new MessageOption()
{
Content = "This is a reminder message"
});
Appears from the top and automatically disappears after 4 seconds
Demo
Change the small icon on the left side of the message box by setting the Icon
property of MessageOption
Demo
Change the close button to appear on the right side of the message box by setting the ShowDismiss
property of MessageOption
Demo
Change the left border style of the message box by setting the ShowBar
property of MessageOption
Demo
Change the message box color by setting the Color
property of MessageOption
Demo
Specify the Message
component that has set the bottom display position by setting the component parameter of the MessageService
service
Demo
Attributes
MessageItem property
@page "/messages"
@inject IStringLocalizer<Messages> Localizer
<h3>Message prompt</h3>
<h4>Often used for feedback prompts after active operations. The difference from Toast is that the latter is more passive reminder for system-level notifications</h4>
<p>Component usage introduction:</p>
<p class="code-label">1. Inject service <code>MessageService</code></p>
<Pre>@inject MessageService MessageService</Pre>
<Pre>[Inject]
[NotNull]
private MessageService? MessageService { get; set; }
</Pre>
<p class="code-label">2. call its instance <code>api</code></p>
<Pre>await MessageService.Show(new MessageOption()
{
Content = "This is a reminder message"
});</Pre>
<DemoBlock Title="Basic usage" Introduction="Appears from the top and automatically disappears after 4 seconds" Name="Normal">
<button class="btn btn-primary" @onclick="@ShowMessage">Open the message prompt</button>
</DemoBlock>
<DemoBlock Title="message box with icon" Introduction="Change the small icon on the left side of the message box by setting the <code>Icon</code> property of <code>MessageOption</code>" Name="Icon">
<button class="btn btn-primary" @onclick="@ShowIconMessage">Open the message prompt</button>
</DemoBlock>
<DemoBlock Title="message box with close button" Introduction="Change the close button to appear on the right side of the message box by setting the <code>ShowDismiss</code> property of <code>MessageOption</code>" Name="CloseButton">
<button class="btn btn-primary" @onclick="@ShowCloseMessage">Open the message prompt</button>
</DemoBlock>
<DemoBlock Title="message box with border on the left" Introduction="Change the left border style of the message box by setting the <code>ShowBar</code> property of <code>MessageOption</code>" Name="LeftBoard">
<button class="btn btn-primary" @onclick="@ShowBarMessage">Open the message prompt</button>
</DemoBlock>
<DemoBlock Title="message boxes in different colors" Introduction="Change the message box color by setting the <code>Color</code> property of <code>MessageOption</code>" Name="DifferentColor">
<div class="row g-3">
<div class="col-6 col-sm-auto">
<button class="btn btn-primary" @onclick="@(e => ShowColorMessage(Color.Primary))">Primary message</button>
</div>
<div class="col-6 col-sm-auto">
<button class="btn btn-success" @onclick="@(e => ShowColorMessage(Color.Success))">success message</button>
</div>
<div class="col-6 col-sm-auto">
<button class="btn btn-info" @onclick="@(e => ShowColorMessage(Color.Info))">Info message</button>
</div>
<div class="col-6 col-sm-auto">
<button class="btn btn-danger" @onclick="@(e => ShowColorMessage(Color.Danger))">Danger message</button>
</div>
<div class="col-6 col-sm-auto">
<button class="btn btn-warning" @onclick="@(e => ShowColorMessage(Color.Warning))">Warning message</button>
</div>
<div class="col-6 col-sm-auto">
<button class="btn btn-secondary" @onclick="@(e => ShowColorMessage(Color.Secondary))">Secondary message</button>
</div>
</div>
</DemoBlock>
<DemoBlock Title="message box pop-up location" Introduction="Specify the <code>Message</code> component that has set the bottom display position by setting the component parameter of the <code>MessageService</code> service" Name="Position">
<button class="btn btn-primary" @onclick="@ShowBottomMessage">Open the message prompt</button>
<Message @ref="Message" Placement="Placement.Bottom" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<AttributeTable Title="MessageItem property" 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/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Messages
{
[NotNull]
private Message? Message { get; set; }
/// <summary>
///
/// </summary>
[Inject]
[NotNull]
public MessageService? MessageService { get; set; }
private async Task ShowMessage()
{
Message.SetPlacement(Placement.Top);
await MessageService.Show(new MessageOption()
{
Content = "This is a reminder message"
});
}
private async Task ShowIconMessage()
{
await MessageService.Show(new MessageOption()
{
Content = "This is a reminder message",
Icon = "fa-solid fa-circle-info"
});
}
private async Task ShowCloseMessage()
{
await MessageService.Show(new MessageOption()
{
Content = "This is a reminder message",
Icon = "fa-solid fa-circle-info",
ShowDismiss = true,
});
}
private async Task ShowBarMessage()
{
await MessageService.Show(new MessageOption()
{
Content = "This is a reminder message",
Icon = "fa-solid fa-circle-info",
ShowBar = true,
});
}
private async Task ShowColorMessage(Color color)
{
await MessageService.Show(new MessageOption()
{
Content = "This is a colored message",
Icon = "fa-solid fa-circle-info",
Color = color
});
}
private async Task ShowBottomMessage()
{
await MessageService.Show(new MessageOption()
{
Content = "This is a reminder message",
Icon = "fa-solid fa-circle-info",
}, Message);
}
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem() {
Name = "Placement",
Description = "message popup location",
Type = "Placement",
ValueList = "Top|Bottom",
DefaultValue = "Top"
}
};
/// <summary>
/// get property method
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetMessageItemAttributes() => new AttributeItem[]
{
new AttributeItem() {
Name = "ChildContent",
Description = "Content",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Class",
Description = "Style",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Color",
Description = "Color",
Type = "Color",
ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
DefaultValue = "Primary"
},
new AttributeItem() {
Name = "Icon",
Description = "Icon",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ShowDismiss",
Description = "Show close button",
Type = "bool",
ValueList = " — ",
DefaultValue = "false"
},
new AttributeItem() {
Name = "ShowBar",
Description = "Whether to show the left Bar",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
}
};
}