Persilsoft.Dialog.Blazor 1.0.3

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 />
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="backdropDialog" @bind=backdrop />
    <label class="form-check-label" for="backdropDialog">
        Backdrop
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="verticalCenteredDialog" @bind=verticalCentered />
    <label class="form-check-label" for="verticalCenteredDialog">
        Vertical centered
    </label>
</div>
<button class="btn btn-primary" @onclick=OpenSmallDialog>Open small dialog</button>
<button class="btn btn-warning" @onclick=OpenDefaultDialog>Open default dialog</button>
<button class="btn btn-success" @onclick=OpenLargeDialog>Open large dialog</button>
<button class="btn btn-info" @onclick=OpenExtraLargeDialog>Open extra-large dialog</button>

<Dialog IsOpen=isDialogOpen
        Size="modalSize"
        Backdrop=backdrop
        VerticallyCentered=verticalCentered>
    <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 bool backdrop;
    private bool verticalCentered;
    private ModalSize modalSize;

    private void OpenSmallDialog()
    {
        modalSize = ModalSize.Small;
        isDialogOpen = true;
    }

    private void OpenDefaultDialog()
    {
        modalSize = ModalSize.Default;
        isDialogOpen = true;
    }

    private void OpenLargeDialog()
    {
        modalSize = ModalSize.Large;
        isDialogOpen = true;
    }

    private void OpenExtraLargeDialog()
    {
        modalSize = ModalSize.ExtraLarge;
        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