Note
The MessageBox depends on IDialogService
and MudDialogProvider
Any global configuration done on the MudDialogProvider will affect all MessageBoxes in your application.
Check the Dialog Configuration section for instructions on how to configure your dialogs globally.
Message Box
The simplest way to show a message box is to use IDialogService.ShowMessageBox
. It is a purely procedural way of showing a message box and awaiting the user's decision.
The number of buttons (Yes, No, Cancel) and their text are simply controlled via providing a string or leaving them null. The result is a nullable bool
which corresponds directly
to the buttons: Yes => true
, No => false
, Cancel => null
.
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnButtonClicked" >Delete</MudButton> <MudChip T="string">@state</MudChip>
@code { [Inject] private IDialogService DialogService { get; set; } string state = "Message box hasn't been opened yet"; private async void OnButtonClicked() { bool? result = await DialogService.ShowMessageBox( "Warning", "Deleting can not be undone!", yesText:"Delete!", cancelText:"Cancel"); state = result == null ? "Canceled" : "Deleted!"; StateHasChanged(); } }
Custom Message Box
MudMessageBox
can also be inlined in Razor to be able to customize all its properties with render fragments. The following example shows how we customize the Yes button's color
and icon. All visual elements of the message box can be customized. For Title
there is TitleContent
, for Message
there is MessageContent
, etc.
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnButtonClicked" >Delete</MudButton> <MudChip T="string">@state</MudChip> <MudMessageBox @ref="mbox" Title="Warning" CancelText="Cancel"> <MessageContent> Deleting can <b><i>not</i></b> be undone! </MessageContent> <YesButton> <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.DeleteForever">Delete!</MudButton> </YesButton> </MudMessageBox>
@code { MudMessageBox mbox { get; set; } string state = "Message box hasn't been opened yet"; private async void OnButtonClicked() { bool? result = await mbox.Show(); state = result == null ? "Canceled" : "Deleted!"; StateHasChanged(); } }