@if (!String.IsNullOrEmpty(Title) || (HeaderTemplate != null) || ShowCloseButtonEffective)
{
-
+
@if (!String.IsNullOrEmpty(Title))
{
@Title
@@ -31,18 +31,17 @@
}
@if (BodyTemplate != null)
{
-
+
@BodyTemplate
}
@if (FooterTemplate != null)
{
-
-
}
\ No newline at end of file
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs
index 05be57f58..7c59ce619 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs
+++ b/Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs
@@ -86,10 +86,15 @@ public partial class HxModal : IAsyncDisposable
[Parameter] public bool? Centered { get; set; }
///
- /// Modal CSS class. Added to root div (.modal).
+ /// Additional CSS class for the main element (div.modal).
///
[Parameter] public string CssClass { get; set; }
+ ///
+ /// Additional CSS class for the dialog (div.modal-dialog element).
+ ///
+ [Parameter] public string DialogCssClass { get; set; }
+
///
/// Additional header CSS class.
///
@@ -136,7 +141,7 @@ public HxModal()
public Task ShowAsync()
{
opened = true; // mark modal as opened
- shouldOpenModal = true; // mak modal to be shown in OnAfterRender
+ shouldOpenModal = true; // mark modal to be shown in OnAfterRender
StateHasChanged(); // ensures render modal HTML
@@ -155,7 +160,7 @@ public async Task HideAsync()
public async Task HandleModalHidden()
{
opened = false;
- await OnClosed.InvokeAsync(); // fires "event" dialog has been closed
+ await OnClosed.InvokeAsync();
StateHasChanged(); // ensures rerender to remove dialog from HTML
}
@@ -192,7 +197,7 @@ public async ValueTask DisposeAsync()
}
- protected string GetModalSizeCssClass()
+ protected string GetDialogSizeCssClass()
{
var sizeEffective = this.Size ?? GetDefaults().Size;
return sizeEffective switch
@@ -205,7 +210,7 @@ protected string GetModalSizeCssClass()
};
}
- protected string GetModalFullscreenCssClass()
+ protected string GetDialogFullscreenCssClass()
{
var fullscreenEffective = this.Fullscreen ?? GetDefaults().Fullscreen;
return fullscreenEffective switch
@@ -221,7 +226,7 @@ protected string GetModalFullscreenCssClass()
};
}
- protected string GetModalScrollableCssClass()
+ protected string GetDialogScrollableCssClass()
{
var scrollableEffective = this.Scrollable ?? GetDefaults().Scrollable;
if (scrollableEffective)
@@ -231,8 +236,7 @@ protected string GetModalScrollableCssClass()
return null;
}
-
- protected string GetModalCenteredCssClass()
+ protected string GetDialogCenteredCssClass()
{
var centeredEffective = this.Centered ?? GetDefaults().Centered;
if (centeredEffective)
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Modals/ModalDefaults.cs b/Havit.Blazor.Components.Web.Bootstrap/Modals/ModalDefaults.cs
index 511133222..a59645109 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Modals/ModalDefaults.cs
+++ b/Havit.Blazor.Components.Web.Bootstrap/Modals/ModalDefaults.cs
@@ -1,5 +1,10 @@
-namespace Havit.Blazor.Components.Web.Bootstrap
+using Microsoft.AspNetCore.Components;
+
+namespace Havit.Blazor.Components.Web.Bootstrap
{
+ ///
+ /// Settings for .
+ ///
public class ModalDefaults
{
///
@@ -33,5 +38,30 @@ public class ModalDefaults
/// Allows vertical centering of the modal. Default is false (horizontal only).
///
public bool Centered { get; set; } = false;
+
+ ///
+ /// Additional CSS class for the main element (div.modal).
+ ///
+ public string CssClass { get; set; }
+
+ ///
+ /// Additional CSS class for the dialog (div.modal-dialog element).
+ ///
+ public string DialogCssClass { get; set; }
+
+ ///
+ /// Additional header CSS class.
+ ///
+ public string HeaderCssClass { get; set; }
+
+ ///
+ /// Additional body CSS class.
+ ///
+ public string BodyCssClass { get; set; }
+
+ ///
+ /// Footer css class.
+ ///
+ public string FooterCssClass { get; set; }
}
}