feat(TreeView): add IsFixedSearch parameter

src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor

@@ -176,6 +176,12 @@
     <TreeView TItem="TreeFoo" Items="@SearchItems" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TreeViewFixedSearchTitle"]"
+           Introduction="@Localizer["TreeViewFixedSearchIntro"]"
+           Name="IsFixedSearch">
+    <TreeView TItem="TreeFoo" Items="@SearchItems" ShowSearch="true" OnSearchAsync="@OnSearchAsync" IsFixedSearch="true" style="height: 180px;"></TreeView>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
 
 <AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -678,6 +678,8 @@
     "TreeViewShowSkeletonButtonText": "Asynchronous loading",
     "TreeViewShowSearchTitle": "Show search",
     "TreeViewShowSearchIntro": "By setting <code>ShowSearch</code> to display the search bar, and using the <code>OnSearchAsync</code> callback method to set the data source to refresh the page",
+    "TreeViewFixedSearchTitle": "Fixed search",
+    "TreeViewFixedSearchIntro": "The search bar can be fixed by setting <code>IsFixedSearch=\"true\"</code>, and the search bar height can be set by the css variable <code>--bb-tree-search-height</code>",
     "TreeViewSetActiveTitle": "Set Active Node",
     "TreeViewSetActiveIntro": "Set the currently active node by calling the <code>SetActiveItem</code> method",
     "TreeViewSetActiveDisplayText": "Current Active Node",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -678,6 +678,8 @@
     "TreeViewShowSkeletonButtonText": "异步加载",
     "TreeViewShowSearchTitle": "显示搜索栏",
     "TreeViewShowSearchIntro": "通过设置 <code>ShowSearch</code> 显示搜索栏，通过 <code>OnSearchAsync</code> 回调方法设置数据源刷新页面即可",
+    "TreeViewFixedSearchTitle": "固定搜索栏",
+    "TreeViewFixedSearchIntro": "通过设置 <code>IsFixedSearch=\"true\"</code> 固定搜索栏，可通过样式变量 <code>--bb-tree-search-height</code> 设定搜索栏高度",
     "TreeViewSetActiveTitle": "设置激活节点",
     "TreeViewSetActiveIntro": "通过调用 <code>SetActiveItem</code> 方法设置当前激活节点",
     "TreeViewSetActiveDisplayText": "当前激活节点",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.7.1-beta03</Version>
+    <Version>8.7.1-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/TreeView/TreeView.razor

@@ -37,7 +37,7 @@ else
                 @SearchTemplate
             }
         }
-        <ul class="tree-root">
+        <ul class="tree-root scroll">
             @foreach (var item in Items)
             {
                 @RenderTreeItem(item)

src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs

@@ -19,6 +19,7 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
     /// 获得 按钮样式集合
     /// </summary>
     private string? ClassString => CssBuilder.Default("tree-view")
+        .AddClass("is-fixed-search", ShowSearch && IsFixedSearch)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -127,6 +128,12 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
     [Parameter]
     public bool ShowSearch { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否固定搜索栏 默认 false 不固定
+    /// </summary>
+    [Parameter]
+    public bool IsFixedSearch { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示重置搜索栏按钮 默认 true 显示
     /// </summary>

src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss

@@ -10,8 +10,10 @@
     --bb-tree-item-active-bg: #{$bb-tree-item-active-bg};
     --bb-tree-item-hover-bg: #{$bb-tree-item-hover-bg};
     --bb-tree-icon-margin-right: #{$bb-tree-icon-margin-right};
-    --bb-tree-disabled-opacity: .5;
+    --bb-tree-disabled-opacity: #{$bb-tree-disabled-opacity};
+    --bb-tree-search-height: #{$bb-tree-search-height};
     position: relative;
+    height: 100%;
 
     .tree-search {
         margin-bottom: .5rem;
@@ -23,6 +25,10 @@
     margin: var(--bb-tree-margin);
 }
 
+.tree-view.is-fixed-search .tree-root {
+    height: calc(100% - var(--bb-tree-search-height));
+}
+
 .tree-view .tree-ul {
     padding: 0 0 0 var(--bb-tree-ul-padding-left);
     display: none;

src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss

@@ -652,6 +652,8 @@ $bb-tree-item-active-color: var(--bs-body-color);
 $bb-tree-item-active-bg: rgba(var(--bs-body-color-rgb),.08);
 $bb-tree-item-hover-bg: rgba(var(--bs-body-color-rgb),.12);
 $bb-tree-icon-margin-right: .5rem;
+$bb-tree-search-height: 43px;
+$bb-tree-disabled-opacity: .5;
 
 // Upload
 $bb-upload-body-margin-top: 10px;

test/UnitTest/Components/TreeViewTest.cs

@@ -763,6 +763,12 @@ public void ShowSearch_Ok()
             });
         });
         cut.Contains("search-template");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsFixedSearch, true);
+        });
+        cut.Contains("is-fixed-search");
     }
 
     [Fact]