doc(IsFixedSearch): remove IsFixedSearch documentation (#5666)

* refactor: 移除不使用的命名空间

* refactor: 微调搜索图标位置

* doc: 增加虚拟化参数文档

* doc: 增加参数注释文档

* refactor: 增加样式

* doc: 移除 IsFixedSearch 相关文档

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs

@@ -474,6 +474,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(MultiSelect<string>.IsVirtualize),
+            Description = Localizer["MultiSelectsAttribute_IsVirtualize"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
         }
     ];
 }

src/BootstrapBlazor.Server/Components/Samples/Selects.razor.cs

@@ -415,6 +415,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(Select<string>.IsVirtualize),
+            Description = Localizer["SelectsIsVirtualize"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
         }
     ];
 }

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

@@ -160,12 +160,6 @@
     <TreeView Items="@SearchItems1" ShowSearch="true" OnSearchAsync="@OnSearchAsync"></TreeView>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TreeViewFixedSearchTitle"]"
-           Introduction="@Localizer["TreeViewFixedSearchIntro"]"
-           Name="IsFixedSearch">
-    <TreeView Items="@SearchItems2" ShowSearch="true" OnSearchAsync="@OnSearchAsync" IsFixedSearch="true" style="height: 180px;"></TreeView>
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["TreeViewMaxSelectedCountTitle"]"
            Introduction="@Localizer["TreeViewMaxSelectedCountIntro"]"
            Name="MaxSelectedCount">

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

@@ -694,8 +694,6 @@
     "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",
@@ -3164,7 +3162,7 @@
     "SelectsCustomTemplateTitle": "Custom option templates",
     "SelectsCustomTemplateIntro": "By setting the <code>ItemTemplate</code> you can customize the option rendering style",
     "SelectsShowSearchTitle": "Drop-down box with search box",
-    "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default <b>false</b>. Fixed the search bar by setting <code>IsFixedSearch</code>",
+    "SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default <b>false</b>",
     "SelectsConfirmSelectTitle": "Drop-down box with confirmation",
     "SelectsConfirmSelectIntro": "Block changes to the current value by setting the <code>OnBeforeSelectedItemChange</code> delegate.",
     "SelectsTimeZoneTitle": "Timezone",
@@ -3204,7 +3202,8 @@
     "SelectsGenericDesc": "<p>Please refer to <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">Design Ideas</a> to understand this feature. In this example, by selecting the drop-down box option, the value obtained is the <code>Foo</code> instance, and the value displayed in the text box on the right is the <code>Address</code> value of the <code>Foo</code> attribute</p><p>In this example, the <code>ValueEqualityComparer</code> and <code>CustomKeyAttribute</code> parameters are not set, and the <code>[Key]</code> tag of the <code>Id</code> attribute of <code>Foo</code> is used for equality judgment</p>",
     "SelectsOnInputChangedCallback": "Callback method for converting input text into corresponding Value in edit mode",
     "TextConvertToValueCallback": "Callback method when input text changes in edit mode",
-    "SelectsIsEditable": "Whether editable"
+    "SelectsIsEditable": "Whether editable",
+    "SelectsIsVirtualize": "Wether to enable virtualize"
   },
   "BootstrapBlazor.Server.Components.Samples.Sliders": {
     "SlidersTitle": "Slider",

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

@@ -694,8 +694,6 @@
     "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": "当前激活节点",
@@ -3164,7 +3162,7 @@
     "SelectsCustomTemplateTitle": "自定义选项模板",
     "SelectsCustomTemplateIntro": "通过设置 <code>ItemTemplate</code> 可以自定义选项渲染样式",
     "SelectsShowSearchTitle": "带搜索框的下拉框",
-    "SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 <b>false</b> 不显示搜索框；通过设置 <code>IsFixedSearch</code> 固定搜索栏",
+    "SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 <b>false</b> 不显示搜索框",
     "SelectsConfirmSelectTitle": "带确认的下拉框",
     "SelectsConfirmSelectIntro": "通过设置 <code>OnBeforeSelectedItemChange</code> 委托，阻止当前值的改变",
     "SelectsTimeZoneTitle": "时区下拉框",
@@ -3204,7 +3202,8 @@
     "SelectsGenericDesc": "<p>请参考 <a href=\"https://github.com/dotnetcore/BootstrapBlazor/issues/4497?wt.mc_id=DT-MVP-5004174\" target=\"_blank\">设计思路</a> 理解此功能。本例中通过选择下拉框选项，得到的值为 <code>Foo</code> 实例，右侧文本框内显示值为 <code>Foo</code> 属性 <code>Address</code> 值</p><p>本例中未设置 <code>ValueEqualityComparer</code> 以及 <code>CustomKeyAttribute</code> 参数，使用 <code>Foo</code> 属性 <code>Id</code> 的 <code>[Key]</code> 标签进行相等判定</p>",
     "SelectsOnInputChangedCallback": "编辑模式下输入文本转换为对应 Value 回调方法",
     "TextConvertToValueCallback": "编辑模式下输入文本变化时回调方法",
-    "SelectsIsEditable": "是否可编辑"
+    "SelectsIsEditable": "是否可编辑",
+    "SelectsIsVirtualize": "是否开启虚拟滚动"
   },
   "BootstrapBlazor.Server.Components.Samples.Sliders": {
     "SlidersTitle": "Slider 滑块",

src/BootstrapBlazor/Components/Filters/LookupFilter.razor

@@ -5,10 +5,10 @@
 {
     if (IsHeaderRow)
     {
-        <Select Items="@Items" StringComparison="LookupStringComparison" @bind-Value="@Value" OnSelectedItemChanged="_ => OnFilterValueChanged()" IsPopover="true" ShowSearch="IsShowSearch" IsFixedSearch="IsFixedSearch"></Select>
+        <Select Items="@Items" StringComparison="LookupStringComparison" @bind-Value="@Value" OnSelectedItemChanged="_ => OnFilterValueChanged()" IsPopover="true" ShowSearch="IsShowSearch"></Select>
     }
     else
     {
-        <Select Items="@Items" StringComparison="LookupStringComparison" @bind-Value="@Value" ShowSearch="IsShowSearch" IsFixedSearch="IsFixedSearch" ></Select>
+        <Select Items="@Items" StringComparison="LookupStringComparison" @bind-Value="@Value" ShowSearch="IsShowSearch"></Select>
     }
 }

src/BootstrapBlazor/Components/Select/Select.razor.scss

@@ -121,7 +121,8 @@
     transform: rotate(0);
 }
 
-.select {
+.select,
+.auto-complete {
     .clear-icon {
         position: absolute;
         height: 100%;

src/BootstrapBlazor/Components/Select/SelectBase.cs

@@ -204,7 +204,7 @@ protected override void OnParametersSet()
     private bool IsNullable() => !ValueType.IsValueType || NullableUnderlyingType != null;
 
     /// <summary>
-    /// 
+    /// Gets whether show the clear button.
     /// </summary>
     /// <returns></returns>
     protected bool GetClearable() => IsClearable && !IsDisabled && IsNullable();

src/BootstrapBlazor/Components/Select/SelectTree.razor

@@ -23,7 +23,6 @@
         <TreeView TItem="TValue" Items="@Items" ShowIcon="ShowIcon"
                   OnTreeItemClick="OnItemClick" ModelEqualityComparer="@ModelEqualityComparer"
                   ShowSearch="ShowSearch" ShowResetSearchButton="ShowResetSearchButton"
-                  IsFixedSearch="IsFixedSearch"
                   CustomKeyAttribute="@CustomKeyAttribute" OnExpandNodeAsync="@OnExpandNodeAsync" />
     </div>
     @if (!IsPopover)

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -519,8 +519,8 @@ $bb-select-search-margin-bottom: .5rem;
 $bb-select-search-border-color: var(--bs-border-color);
 $bb-select-search-padding-right: 30px;
 $bb-select-search-icon-color: var(--bb-select-search-border-color);
-$bb-select-search-icon-right: 20px;
-$bb-select-search-icon-top: 17px;
+$bb-select-search-icon-right: 26px;
+$bb-select-search-icon-top: 19px;
 $bb-select-search-height: 52px;
 $bb-select-append-width: 30px;
 $bb-select-append-color: #c0c4cc;