Persilsoft.Dialog.Blazor 1.0.2

Persilsoft.Dialog.Blazor

A simple implementation of Bootstrap Dialog

Example

You can use it.

@page "/dialogdemo"
@using Persilsoft.Dialog.Blazor

<PageTitle>Dialog Demo</PageTitle>

<h1>Dialog Demo</h1>
<hr />
<button class="btn btn-primary" @onclick=OpenDialog>Open Dialog</button>

<Dialog IsOpen=isDialogOpen
        Size="ModalSize.Default"
        Backdrop=true
        VerticallyCentered=false>
    <div class="modal-content">
        <div class="modal-header bg-info text-white p-2">
            <h4>My Title</h4>
            <button type="button" class="btn-close" @onclick=CloseDialog></button>
        </div>
        <div class="modal-body">
            <p>Some message!</p>
            <div class="text-center mt-2">
                <button class="btn btn-success" @onclick=CloseDialog>Close</button>
            </div>
        </div>
    </div>
</Dialog>

@code {
    private bool isDialogOpen;

    private void OpenDialog() => isDialogOpen = true;
    private void CloseDialog() => isDialogOpen = false;
}

You can send the following parameters:
IsOpen: Sets whether the dialog is open or not (required)
Size: Sets the size of the dialog. This is an enumeration (ModalSize.Small, ModalSize.Default, ModalSize.Large, ModalSize.ExtraLarge). Default value: ModalSize.Default
Backdrop: Sets the background static. The modal will not close when clicking ousing for it. Default value: true
VerticallyCentered: Indicates whether the modal should be vertically centered. Default value: false