#57149 HxModal.Centered + release

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_Scrollable.razor

@@ -1,29 +1,18 @@
-<HxButton OnClick="HandleShowClick" Color="ThemeColor.Primary">Launch demo modal - Scrollable</HxButton>
+<HxButton OnClick="() => myModal.ShowAsync()" Color="ThemeColor.Primary">Launch demo modal - Scrollable</HxButton>
 
 <HxModal @ref="myModal" HeaderText="Modal title" Scrollable="true">
-    <BodyTemplate>
-        <p style="margin-bottom: 100vh;">
-            This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.
-        </p>
+	<BodyTemplate>
+		<p style="margin-bottom: 100vh;">
+			This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.
+		</p>
 		<p>This content should appear at the bottom after you scroll.</p>
-    </BodyTemplate>
-    <FooterTemplate>
-        <HxButton Skin="ButtonSkins.Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
-    </FooterTemplate>
+	</BodyTemplate>
+	<FooterTemplate>
+		<HxButton OnClick="() => myModal.ShowAsync()" Color="ThemeColor.Primary">Launch demo modal - default scrolling</HxButton>
+	</FooterTemplate>
 </HxModal>
 
 @code
 {
-    private HxModal myModal;
-
-    private async Task HandleShowClick()
-    {
-        await myModal.ShowAsync();
-    }
-
-    private async Task HandleHideClick()
-    {
-        await myModal.HideAsync();
-    }
-
+	private HxModal myModal;
 }

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_VerticallyCentered.razor

@@ -1,26 +1,15 @@
-<HxButton OnClick="HandleShowClick" Color="ThemeColor.Primary">Show modal</HxButton>
-
-<HxModal @ref="myModal" HeaderText="Modal title" CssClass="modal-dialog-centered" UseStaticBackdrop="false">
-    <BodyTemplate>
-        This is a vertically centered modal.
-    </BodyTemplate>
-    <FooterTemplate>
-        <HxButton Skin="ButtonSkins.Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
-    </FooterTemplate>
+<HxButton OnClick="() => myModal.ShowAsync()" Color="ThemeColor.Primary">Vertically centered modal</HxButton>
+
+<HxModal @ref="myModal" HeaderText="Modal title" Centered="true">
+	<BodyTemplate>
+		This is a vertically centered modal.
+	</BodyTemplate>
+	<FooterTemplate>
+		<HxButton Skin="ButtonSkins.Close" OnClick="() => myModal.HideAsync()" Color="ThemeColor.Primary" />
+	</FooterTemplate>
 </HxModal>
 
 @code
 {
-    private HxModal myModal;
-
-    private async Task HandleShowClick()
-    {
-        await myModal.ShowAsync();
-    }
-
-    private async Task HandleHideClick()
-    {
-        await myModal.HideAsync();
-    }
-
+	private HxModal myModal;
 }

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Documentation.razor

@@ -20,9 +20,9 @@
 	<p>You can also create a scrollable modal that allows scroll the modal body by setting the <code>Scrollable</code> parameter.</p>
 	<Demo Type="typeof(HxModal_Demo_Scrollable)" />
 
-	@*<h3>Vertically centered</h3>
-		<p>Add the <code>.modal-dialog-centered</code> class to vertically center the modal.</p>
-		<Demo Type="typeof(HxModal_Demo_VerticallyCentered)" />*@
+	<h3>Vertically centered</h3>
+	<p>Set the <code>Centered</code> parameter to vertically center the modal.</p>
+	<Demo Type="typeof(HxModal_Demo_VerticallyCentered)" />
 
 	<h3>Optional sizes</h3>
 	<Demo Type="typeof(HxModal_Demo_Size)" />

Havit.Blazor.Components.Web.Bootstrap/Havit.Blazor.Components.Web.Bootstrap.csproj

@@ -9,14 +9,11 @@
 	<!-- NuGet -->
 	<Import Project="../NuGet.targets" />
 	<PropertyGroup>
-		<PackageVersion>1.1.54</PackageVersion>
+		<PackageVersion>1.1.55</PackageVersion>
 		<Description>HAVIT Blazor Library - UI components based on Bootstrap 5</Description>
 		<PackageLicenseExpression>MIT</PackageLicenseExpression>
 		<PackageProjectUrl>https://github.com/havit/Havit.Blazor</PackageProjectUrl>
 	</PropertyGroup>
-	<ItemGroup>
-	  <None Include="wwwroot\HxCarousel.js" />
-	</ItemGroup>
 
 	<ItemGroup>
 		<PackageReference Include="Havit.Core" Version="2.0.19" />

Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor

@@ -4,7 +4,7 @@
 {
 	<CascadingValue Name="@HxModalInParentModalCascadingValueName" Value="true" IsFixed="true">
 		<div @ref="modalElement" class="@CssClassHelper.Combine("hx-modal","modal fade", CssClass)" tabindex="-1">
-			<div class="@CssClassHelper.Combine("modal-dialog", GetModalSizeCssClass(), GetModalFullscreenCssClass(), GetModalScrollableCssClass())">
+			<div class="@CssClassHelper.Combine("modal-dialog", GetModalSizeCssClass(), GetModalFullscreenCssClass(), GetModalScrollableCssClass(), GetModalCenteredCssClass())">
 				<div class="modal-content">
 					@if (!String.IsNullOrEmpty(HeaderText) || (HeaderTemplate != null) || ShowCloseButtonEffective)
 					{

Havit.Blazor.Components.Web.Bootstrap/Modals/HxModal.razor.cs

@@ -107,6 +107,11 @@ public partial class HxModal : IAsyncDisposable
 		/// </summary>
 		[Parameter] public bool? Scrollable { get; set; }
 
+		/// <summary>
+		/// Allows vertical centering of the modal. Default is <c>false</c> (horizontal only).
+		/// </summary>
+		[Parameter] public bool? Centered { get; set; }
+
 		/// <summary>
 		/// Raised when modal is closed (whatever reason it is).
 		/// </summary>
@@ -247,5 +252,16 @@ protected string GetModalScrollableCssClass()
 			}
 			return null;
 		}
+
+
+		protected string GetModalCenteredCssClass()
+		{
+			var centeredEffective = this.Centered ?? GetDefaults().Centered;
+			if (centeredEffective)
+			{
+				return "modal-dialog-centered";
+			}
+			return null;
+		}
 	}
 }

Havit.Blazor.Components.Web.Bootstrap/Modals/ModalDefaults.cs

@@ -28,5 +28,10 @@ public class ModalDefaults
 		/// Allows scrolling the modal body. Default is <c>false</c>.
 		/// </summary>
 		public bool Scrollable { get; set; } = false;
+
+		/// <summary>
+		/// Allows vertical centering of the modal. Default is <c>false</c> (horizontal only).
+		/// </summary>
+		public bool Centered { get; set; } = false;
 	}
 }