Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

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"
});

Basic usage

Appears from the top and automatically disappears after 4 seconds

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Messages> Localizer
@inject MessageService MessageService

<button class="btn btn-primary" @onclick="@ShowMessage">@Localizer["MessagesMessagePrompt"]</button>
<Message @ref="Message" Placement="Placement.Bottom" />

@code {
    [NotNull]
    private Message? Message { get; set; }

    private async Task ShowMessage()
    {
        Message.SetPlacement(Placement.Top);
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message"
        });
    }
}

message box with icon

Change the small icon on the left side of the message box by setting the Icon property of MessageOption

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Messages> Localizer
@inject MessageService MessageService

<button class="btn btn-primary" @onclick="@ShowIconMessage">@Localizer["MessagesMessagePrompt"]</button>

@code {
    private async Task ShowIconMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info"
        });
    }
}

message box with close button

Change the close button to appear on the right side of the message box by setting the ShowDismiss property of MessageOption

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Messages> Localizer
@inject MessageService MessageService

<button class="btn btn-primary" @onclick="@ShowCloseMessage">@Localizer["MessagesMessagePrompt"]</button>

@code {
    private async Task ShowCloseMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info",
            ShowDismiss = true,
        });
    }
}

message box with border on the left

Change the left border style of the message box by setting the ShowBar property of MessageOption

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Messages> Localizer
@inject MessageService MessageService

<button class="btn btn-primary" @onclick="@ShowBarMessage">@Localizer["MessagesMessagePrompt"]</button>

@code {
    private async Task ShowBarMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info",
            ShowBar = true,
        });
    }
}

message boxes in different colors

Change the message box color by setting the Color property of MessageOption

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Messages> Localizer
@inject MessageService MessageService

<div class="row g-3">
    <div class="col-6 col-sm-auto">
        <button class="btn btn-primary" @onclick="@(e => ShowColorMessage(Color.Primary))">@Localizer["MessagesDifferentColorPrimary"]</button>
    </div>
    <div class="col-6 col-sm-auto">
        <button class="btn btn-success" @onclick="@(e => ShowColorMessage(Color.Success))">@Localizer["MessagesDifferentColorSuccess"]</button>
    </div>
    <div class="col-6 col-sm-auto">
        <button class="btn btn-info" @onclick="@(e => ShowColorMessage(Color.Info))">@Localizer["MessagesDifferentColorInfo"]</button>
    </div>
    <div class="col-6 col-sm-auto">
        <button class="btn btn-danger" @onclick="@(e => ShowColorMessage(Color.Danger))">@Localizer["MessagesDifferentColorDanger"]</button>
    </div>
    <div class="col-6 col-sm-auto">
        <button class="btn btn-warning" @onclick="@(e => ShowColorMessage(Color.Warning))">@Localizer["MessagesDifferentColorWarning"]</button>
    </div>
    <div class="col-6 col-sm-auto">
        <button class="btn btn-secondary" @onclick="@(e => ShowColorMessage(Color.Secondary))">@Localizer["MessagesDifferentColorSecondary"]</button>
    </div>
</div>

@code {
    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
        });
    }
}

message box pop-up location

Specify the Message component that has set the bottom display position by setting the component parameter of the MessageService service

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Messages> Localizer
@inject MessageService MessageService

<button class="btn btn-primary" @onclick="@ShowBottomMessage">@Localizer["MessagesMessagePrompt"]</button>
<Message @ref="Message" Placement="Placement.Bottom" />

@code {
    [NotNull]
    private Message? Message { get; set; }

    private async Task ShowBottomMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info",
        }, Message);
    }
}

Attributes

MessageItem property

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

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

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

MessageItem property

Bootstrap Blazor Component library updated to 7.4.4-beta01