PSC.Blazor.Components.Modals 6.0.4

Modals for Blazor

This component helps you to create modal windows and modal popup in your Blazor application.

Install

In your index.html you have to add the style in the head of the page and the script at the bottom like

<link href="_content/PSC.Blazor.Components.Modals/themes/default.css" rel="stylesheet" />
<script src="_content/PSC.Blazor.Components.Modals/js/pscmodals.js"></script>

Then, in your MainLayout.razor you have to place the container for the modals adding

<ModalContainer />

So, the component it is ready to use. In the Razor page when you want to use this controller, you have to inject the IModalService adding

@inject IModalService ModalService

Use embedded modal

In the component the embedded modal allow you to show a message and wait for the interaction from the user. You can create a simple box with a message and an Ok button with the following code:

await ModalService.ShowDialogAsync(new DialogOptions
    {
        MainText = "You have a new message",
        SubText = "Check your inbox for more information",
        CancelText = "",
        IconElements = SVGIcons.Message,
        StatusColor = "#1e293b"
    });

IconElement is a SVG image and for that you can use my other component PSC.Blazor.Components.Icons.

If you want to display a message box with 2 buttons (for example Ok and Cancel), the code is the following

var result = await ModalService.ShowDialogAsync(new DialogOptions
    {
        MainText = "Are you sure?",
        SubText = "Please note this can not be undone",
        IconElements = SVGIcons.Question_mark,
        StatusColor = "#ff0000"
    });

If you want to display your own Razor component in the modal, you can use the following code:

private ModalOptions modalOptions = new ModalOptions { Size = ModalSize.Large, Draggable = true };

var component = new RenderComponent<YourRazorComponent>();
var result = await ModalService.ShowAsync("This is a Title", component, modalOptions);

Options