Component to render modal dialog as a Bootstrap Modal.
<HxButton OnClick="HandleShowClick" Color="ThemeColor.Primary">Show modal</HxButton>
<HxModal @ref="myModal" Title="Modal title">
<BodyTemplate>
Modal body
</BodyTemplate>
<FooterTemplate>
<HxButton Text="Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
</FooterTemplate>
</HxModal>
@code
{
private HxModal myModal;
private async Task HandleShowClick()
{
await myModal.ShowAsync();
}
private async Task HandleHideClick()
{
await myModal.HideAsync();
}
}
When backdrop is set to ModalBackdrop.Static
, the modal will not close when clicking outside of it.
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
You can also create a scrollable modal that allows scroll the modal body by setting the Scrollable
parameter.
Set the Centered
parameter to vertically center the modal.
Name | Type | Description |
---|---|---|
Animated | bool? |
For modals that simply appear rather than fade in to view, setting false removes the .fade class from your modal markup.
Default value is true . |
Backdrop | ModalBackdrop? |
Indicates whether to apply a backdrop on body while the modal is open.
If set to ModalBackdrop.Static , the modal cannot be closed by clicking on the backdrop.
Default value (from HxModal.Defaults ) is ModalBackdrop.True . |
BodyCssClass | string |
Additional body CSS class (div.modal-body ). |
BodyTemplate | RenderFragment |
Body template. |
Centered | bool? |
Allows vertical centering of the modal. Default is false (horizontal only). |
CloseButtonIcon | IconBase |
Close icon to be used in header.
If set to null , Bootstrap default close-button will be used. |
CloseOnEscape | bool? |
Indicates whether the modal closes when escape key is pressed.
Default value is true . |
ContentCssClass | string |
Additional content CSS class (div.modal-content ). |
CssClass | string |
Additional CSS class for the main element (div.modal ). |
DialogCssClass | string |
Additional CSS class for the dialog (div.modal-dialog element). |
FooterCssClass | string |
Additional footer CSS class (div.modal-footer ). |
FooterTemplate | RenderFragment |
Footer template. |
Fullscreen | ModalFullscreen? |
Fullscreen behavior of the modal. Default is ModalFullscreen.Disabled . |
HeaderCssClass | string |
Additional header CSS class (div.modal-header ). |
HeaderTemplate | RenderFragment |
Header template. |
OnHiding | EventCallback<ModalHidingEventArgs> |
This event is fired immediately when the hide instance method has been called. This can be caused by HxModal.HideAsync , close-button, Esc key or other interaction. |
Scrollable | bool? |
Allows scrolling the modal body. Default is false . |
Settings | ModalSettings |
Set of settings to be applied to the component instance (overrides HxModal.Defaults , overridden by individual parameters). |
ShowCloseButton | bool? |
Indicates whether the modal shows close button in header.
Default value is true . |
Size | ModalSize? |
Size of the modal. Default is ModalSize.Regular . |
Title | string |
Title in modal header. |
Name | Type | Description |
---|---|---|
OnClosed | EventCallback |
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). This can be caused by HxModal.HideAsync , close-button, Esc key or other interaction. |
OnShown | EventCallback |
This event is fired when an modal element has been made visible to the user (will wait for CSS transitions to complete). |
Method | Returns | Description |
---|---|---|
HideAsync() | Task |
Closes the modal. |
ShowAsync() | Task |
Opens the modal. |
Property | Type | Description |
---|---|---|
Defaults | ModalSettings |
Application-wide defaults for the HxGrid . |