feat(Transfer): add Height parameter (#5095)

* chore: bump version 9.2.7-beta04

Co-Authored-By: szpeak <[email protected]>

* feat: add Height parameter

* test: 更新单元测试

* chore: bump version 9.2.7-beta05

---------

Co-authored-by: szpeak <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.7-beta03</Version>
+    <Version>9.2.7-beta05</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Transfer/Transfer.razor

@@ -6,7 +6,7 @@
 {
     <BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="@AdditionalAttributes" class="transfer">
+<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString">
     <TransferPanel Items="@LeftItems" Text="@LeftPanelText" IsDisabled="@IsDisabled"
                    ShowSearch="@ShowSearch" SearchPlaceHolderString="@LeftPanelSearchPlaceHolderString"
                    OnSelectedItemsChanged="@SelectedItemsChanged" OnSetItemClass="OnSetItemClass"

src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs

@@ -4,7 +4,6 @@
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
 using Microsoft.Extensions.Localization;
-using System.Reflection;
 
 namespace BootstrapBlazor.Components;
 
@@ -50,9 +49,7 @@ public partial class Transfer<TValue>
     /// </summary>
     [Parameter]
     [NotNull]
-#if NET6_0_OR_GREATER
     [EditorRequired]
-#endif
     public IEnumerable<SelectedItem>? Items { get; set; }
 
     /// <summary>
@@ -188,10 +185,26 @@ public partial class Transfer<TValue>
     [Parameter]
     public RenderFragment<SelectedItem>? RightItemTemplate { get; set; }
 
+    /// <summary>
+    /// 获得/设置 组件高度 默认值 null 未设置
+    /// </summary>
+    [Parameter]
+    public string? Height { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
 
+    private string? ClassString => CssBuilder.Default("transfer")
+        .AddClass("has-height", !string.IsNullOrEmpty(Height))
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? StyleString => CssBuilder.Default()
+        .AddClass($"--bb-transfer-height: {Height};", !string.IsNullOrEmpty(Height))
+        .AddStyleFromAttributes(AdditionalAttributes)
+        .Build();
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>

src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss

@@ -13,6 +13,18 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+
+    &.has-height {
+        height: var(--bb-transfer-height);
+
+        .transfer-panel {
+            height: 100%;
+
+            .transfer-panel-body {
+                height: calc(100% - var(--bb-transfer-panel-header-height));
+            }
+        }
+    }
 }
 
 .transfer-panel {

test/UnitTest/Components/TransferTest.cs

@@ -28,6 +28,16 @@ public void Items_Ok()
         cut.Contains("transfer-panel");
     }
 
+    [Fact]
+    public void Height_Ok()
+    {
+        var cut = Context.RenderComponent<Transfer<string>>(pb =>
+        {
+            pb.Add(a => a.Height, "200px");
+        });
+        cut.Contains("--bb-transfer-height: 200px;");
+    }
+
     [Fact]
     public async Task EnumerableString_Value()
     {