MessageBox

Description

This component represents a modal message box in Blazor using the Gap.Blazor.MessageBox model. It uses the Telerik Dialog component to display messages with configurable icons, text, and button layouts. The component supports various standard button configurations such as OK, OK/Cancel, Yes/No, and Yes/No/Cancel.

Usage

<TelerikDialog @bind-Visible="@this.messageBox.Visible"
               Title="@this.messageBox.Text"
               Width="@this.messageBox.GetWidthPx()"
               Height="@this.messageBox.GetHeightPx()">
    <DialogContent>
        <div style="display: flex; align-items: center; justify-content: center;">
            <img src="@this.GetIcon()" style="width:40px; height:40px; margin-right: 10px;" />
            <span style="white-space: pre-line;">@this.messageBox.LabelMessage.Text</span>
        </div>
    </DialogContent>
    <DialogButtons>
        @switch (this.messageBox.Buttons)
        {
            case MessageBoxButtons.OK:
                <WMButtonComponent model="@this.messageBox.ButtonOk" />
                break;
            case MessageBoxButtons.OKCancel:
                <WMButtonComponent model="@this.messageBox.ButtonOk" />
                <WMButtonComponent model="@this.messageBox.ButtonCancel" />
                break;
            case MessageBoxButtons.YesNo:
                <WMButtonComponent model="@this.messageBox.ButtonYes" />
                <WMButtonComponent model="@this.messageBox.ButtonNo" />
                break;
            case MessageBoxButtons.YesNoCancel:
                <WMButtonComponent model="@this.messageBox.ButtonYes" />
                <WMButtonComponent model="@this.messageBox.ButtonNo" />
                <WMButtonComponent model="@this.messageBox.ButtonCancel" />
                break;
        }
    </DialogButtons>
</TelerikDialog>

Properties

  • messageBox: Instance of the Gap.Blazor.MessageBox model.

  • LabelMessage.Text: The main message content displayed in the dialog.

  • Buttons: Enum (MessageBoxButtons) that determines which buttons are shown.

  • Icon: Enum (MessageBoxIcon) that determines which icon is displayed.

Methods

  • GetIcon(): Returns the appropriate icon image based on the MessageBoxIcon value:

    • Information → info icon

    • Warning → warning icon

    • Error → error icon

    • Question → question icon

    • Default → info icon

Dynamic Rendering

  • TelerikDialog: Renders the modal dialog.

  • DialogContent: Displays the icon and message text.

  • DialogButtons: Dynamically renders buttons based on the Buttons enum.

  • WMButtonComponent: Used to render each button, bound to the corresponding model.

Button Layouts

Enum Value
Buttons Rendered

OK

OK

OKCancel

OK, Cancel

YesNo

Yes, No

YesNoCancel

Yes, No, Cancel

Last updated