Modal component

v0.9.3 Breaking changes ModalBackdrop component is removed so you should also remove any usage of it from your project. CloseButton will now automatically close the Modal dialog.

Basics

The modal structure is very simple:

  • <Modal> the main container
    • <ModalContent> a horizontally and vertically centered container, in which you can include any content
      • <ModalHeader> top part of the modal, usually contains a title and close button
        • <ModalTitle> a modal title
        • <CloseButton> a simple close button located in the top right corner
      • <ModalBody> main part of the modal, holds the input fields, images, etc.
      • <ModalFooter> bottom part of the modal, usually contains the action buttons

Usage

Basics

Place the modal markup somewhere at root of you component layout.

<Button Clicked="@ShowModal">Show Modal</Button>

<Modal @ref="modalRef">
    <ModalContent Centered="true">
        <ModalHeader>
            <ModalTitle>Employee edit</ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

To work with the modal you must use the reference to the Modal component.

@code{
    // reference to the modal component
    private Modal modalRef;

    private void ShowModal()
    {
        modalRef.Show();
    }

    private void HideModal()
    {
        modalRef.Hide();
    }
}

Closing

If you want to prevent modal from closing you can use Closing event.

<Modal @ref="modalRef" Closing="@OnModalClosing">
    ...
</Modal>
@code{
    // reference to the modal component
    private Modal modalRef;

    private void OnModalClosing( CancelEventArgs e )
    {
        // just set Cancel to true to prevent modal from closing
        e.Cancel = true;
    }
}

Functions

Name Description
Show() Open the modal dialog.
Hide() Close the modal dialog.

Attributes

Name Type Default Description
Visible boolean false Handles the visibility of modal dialog.
Closing event   Occurs before the modal is closed and can be used to prevent the modal from closing.
ScrollToTop boolean true If true modal will scroll to top when opened.
ShowBackdrop boolean true If true the the backdrop will be rendered.

ModalContent

Name Type Default Description
Form boolean false Makes the modal as classic dialog with header, body and footer. Used only by bulma provider! see Modal card
Centered boolean false Centers the modal vertically.
Scrollable boolean false Scrolls the modal content independent of the page itself.
Size ModalSize Default Changes the size of the modal.

ModalBody

Name Type Default Description
MaxHeight int? null Sets the maximum height of the modal body (in viewport size unit).

ModalTitle

Name Type Default Description
Size HeadingSize Is4 Sets the title size and tag name.