From 8671b8434aa60c362f34acccc1b6a46533adc89b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 4 Feb 2025 12:06:23 +0800 Subject: [PATCH 01/27] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20OctIcon=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=20Color=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 40bece1f1e9..60443a28054 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -32,7 +32,7 @@ - + @@ -48,7 +48,7 @@ - + From 6f2c35d5025ebb542a373f07143c174ce98e7716 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 4 Feb 2025 12:28:39 +0800 Subject: [PATCH 02/27] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Icons/AntDesignIcons.razor | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor index b11a17257fa..002c74ab763 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Icons/AntDesignIcons.razor @@ -23,7 +23,8 @@ 
<link href="_content/BootstrapBlazor.AntDesignIcon/BootstrapBlazor.AntDesignIcon.bundle.scp.css" rel="stylesheet">
- + + 
<AntDesignIcon Category="AntDesignIconCategory.Outlined" Name="github"></AntDesignIcon>
From 4dd6a709211c69f926b60f9a5381666c263ba124 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 4 Feb 2025 12:29:26 +0800 Subject: [PATCH 03/27] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E4=BE=9D?= =?UTF-8?q?=E8=B5=96=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 60443a28054..2983359cc65 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -20,7 +20,7 @@ - + From b298db70adf6b5d416c8437df5586124e2e42b83 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:03:22 +0800 Subject: [PATCH 04/27] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20ButtonTempla?= =?UTF-8?q?te=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Search/Search.razor.cs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs index 3c11514b9a9..b98bdb3ddde 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.cs +++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs @@ -67,6 +67,12 @@ public partial class Search [NotNull] public string? SearchButtonText { get; set; } + /// + /// 获得/设置 搜索按钮模板 默认 null 未设置 + /// + [Parameter] + public RenderFragment? ButtonTemplate { get; set; } + /// /// 获得/设置 是否显示前缀图标 默认为 false 不显示 /// From 045367c18c98f0ab3f49464f4a16dd014f9aabb9 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:03:36 +0800 Subject: [PATCH 05/27] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20ShowClearIco?= =?UTF-8?q?n=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Search/Search.razor.cs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs index b98bdb3ddde..f1317f59d4a 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.cs +++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs @@ -12,6 +12,18 @@ namespace BootstrapBlazor.Components; /// public partial class Search { + /// + /// 获得/设置 是否显示清除图标 默认为 false 不显示 + /// + [Parameter] + public bool ShowClearIcon { get; set; } + + /// + /// 获得/设置 清除图标 默认为 null + /// + [Parameter] + public string? ClearIcon { get; set; } + /// /// 获得/设置 是否显示清除按钮 默认为 false 不显示 /// From eab53147ffb7f735b19ef76613ba9f6771c938c6 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:03:59 +0800 Subject: [PATCH 06/27] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20form-con?= =?UTF-8?q?trol-group=20=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Search/Search.razor | 60 ++++++++++++------- 1 file changed, 38 insertions(+), 22 deletions(-) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor b/src/BootstrapBlazor/Components/Search/Search.razor index 17c7e45bbcd..9d4510167d3 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor +++ b/src/BootstrapBlazor/Components/Search/Search.razor @@ -4,15 +4,44 @@
- +
+ @if (ShowPrefixIcon) + { +
+ @if (PrefixIconTemplate != null) + { + @PrefixIconTemplate + } + else + { + + } +
+ } + + @if (ShowClearIcon) + { +
+ +
+ } +
+ @if (ButtonTemplate == null) + { + + + @ButtonTemplate + + + } @if (ShowClearButton) { @@ -22,19 +51,6 @@ }
- @if (ShowPrefixIcon) - { -
- @if (PrefixIconTemplate != null) - { - @PrefixIconTemplate - } - else - { - - } -
- }
    @foreach (var item in _filterItems) { From 640636369c285a993d64b84dc6995d6c8ec8cfeb Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:04:11 +0800 Subject: [PATCH 07/27] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Search/Search.razor.scss | 56 +++++++++++++++---- 1 file changed, 46 insertions(+), 10 deletions(-) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.scss b/src/BootstrapBlazor/Components/Search/Search.razor.scss index f6259b7d67e..a367f426920 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.scss +++ b/src/BootstrapBlazor/Components/Search/Search.razor.scss @@ -7,15 +7,51 @@ padding-left: var(--bb-search-prefix-input-padding-left); } - .search-prefix-icon { - position: absolute; - left: 0; - top: 0; - bottom: 0; - z-index: 6; - padding-left: 1rem; - display: flex; - align-items: center; - color: var(--bb-search-prefix-icon-color); + .form-control-group { + flex: 1; + width: 1%; + min-width: 0; + position: relative; + + .search-icon { + position: absolute; + top: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + .search-prefix-icon { + left: 0; + padding-left: 1rem; + color: var(--bb-search-prefix-icon-color); + } + + .search-clear-icon { + right: 0; + width: 32px; + cursor: pointer; + display: none; + } + + &:hover .search-clear-icon { + display: flex; + } + + &:not(:first-child) { + .form-control { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &:not(:last-child) { + .form-control { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } } } From 02be9e3d2a517c0cfcbd166e0551b847a6b23cf8 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:25:21 +0800 Subject: [PATCH 08/27] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20PrefixButton?= =?UTF-8?q?Template=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Search/Search.razor.cs | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs index f1317f59d4a..4639f00b917 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.cs +++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs @@ -85,6 +85,12 @@ public partial class Search [Parameter] public RenderFragment? ButtonTemplate { get; set; } + /// + /// 获得/设置 前置搜索按钮模板 默认 null 未设置 + /// + [Parameter] + public RenderFragment? PrefixButtonTemplate { get; set; } + /// /// 获得/设置 是否显示前缀图标 默认为 false 不显示 /// @@ -142,6 +148,7 @@ public partial class Search private string? ClassString => CssBuilder.Default("search auto-complete") .AddClass("search-prefix", ShowPrefixIcon) + .AddClass("search-clear", ShowClearIcon) .AddClassFromAttributes(AdditionalAttributes) .Build(); From e3f3b1d62a9434aa655ee1b25ea969f57b414a96 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:25:42 +0800 Subject: [PATCH 09/27] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20PrefixBu?= =?UTF-8?q?ttonTemplate=20=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Search/Search.razor | 59 +++++++++++-------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor b/src/BootstrapBlazor/Components/Search/Search.razor index 9d4510167d3..4488cc3ae56 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor +++ b/src/BootstrapBlazor/Components/Search/Search.razor @@ -7,16 +7,27 @@
    @if (ShowPrefixIcon) { -
    - @if (PrefixIconTemplate != null) - { - @PrefixIconTemplate - } - else - { - - } -
    + @if(PrefixButtonTemplate == null) + { +
    + @if (PrefixIconTemplate != null) + { + @PrefixIconTemplate + } + else + { + + } +
    + } + else + { + + + @PrefixButtonTemplate + + + } } - @if (ShowClearIcon) - { -
    - -
    - } -
    - @if (ButtonTemplate == null) - { - - - @ButtonTemplate + @if (ShowClearIcon) + { +
    + +
    + } + @if (ButtonTemplate == null) + { + + + @ButtonTemplate + -     - } + } +
@if (ShowClearButton) { From 77cbde3b1b53ceda3944b575788ae92c72107bf2 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:26:02 +0800 Subject: [PATCH 10/27] =?UTF-8?q?style:=20=E5=A2=9E=E5=8A=A0=20bb-search-i?= =?UTF-8?q?con-input-padding-right=20=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Search/Search.razor.scss | 7 ++++++- .../wwwroot/scss/theme/bootstrapblazor.scss | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.scss b/src/BootstrapBlazor/Components/Search/Search.razor.scss index a367f426920..4f0ae1591cc 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.scss +++ b/src/BootstrapBlazor/Components/Search/Search.razor.scss @@ -2,11 +2,16 @@ --bb-ac-padding-right: #{$bb-search-padding-right}; --bb-search-prefix-input-padding-left: #{$bb-search-prefix-input-padding-left}; --bb-search-prefix-icon-color: #{$bb-search-prefix-icon-color}; + --bb-search-icon-input-padding-right: #{$bb-search-icon-input-padding-right}; &.search-prefix .form-control { padding-left: var(--bb-search-prefix-input-padding-left); } + &.search-clear .form-control-group:hover .form-control { + padding-right: var(--bb-search-icon-input-padding-right); + } + .form-control-group { flex: 1; width: 1%; @@ -31,7 +36,7 @@ .search-clear-icon { right: 0; - width: 32px; + width: var(--bb-search-icon-input-padding-right); cursor: pointer; display: none; } diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss index f58d40b5bcc..a85927496a6 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss @@ -487,6 +487,7 @@ $bb-search-padding-right: 0.75rem; $bb-search-prefix-icon-padding-left: 2rem; $bb-search-prefix-input-padding-left: 36px; $bb-search-prefix-icon-color: #59636e; +$bb-search-icon-input-padding-right: 36px; // Segmented $bb-segmented-padding: 2px; From 9fcfa2962779bc06c35c9deb6a87c2ee34f3e609 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 07:26:11 +0800 Subject: [PATCH 11/27] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Searches.razor | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor index 8a5de212020..4e5bbf99219 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor @@ -92,7 +92,20 @@ + + +
+
+ + +
+
From d1ddec6fa0f2f1a40f5502c7d08175e8a35e268b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 10:29:02 +0800 Subject: [PATCH 12/27] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=20IsCleara?= =?UTF-8?q?ble=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Search/Search.razor.cs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs index 4639f00b917..9ea3c8041c2 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.cs +++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs @@ -13,10 +13,10 @@ namespace BootstrapBlazor.Components; public partial class Search { /// - /// 获得/设置 是否显示清除图标 默认为 false 不显示 + /// 获得/设置 是否显示清空小按钮 默认 false /// [Parameter] - public bool ShowClearIcon { get; set; } + public bool IsClearable { get; set; } /// /// 获得/设置 清除图标 默认为 null @@ -148,7 +148,7 @@ public partial class Search private string? ClassString => CssBuilder.Default("search auto-complete") .AddClass("search-prefix", ShowPrefixIcon) - .AddClass("search-clear", ShowClearIcon) + .AddClass("search-clear", IsClearable) .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -172,6 +172,7 @@ protected override void OnParametersSet() { base.OnParametersSet(); + ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputClearIcon); ClearButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchClearButtonIcon); SearchButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchButtonIcon); SearchButtonLoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchButtonLoadingIcon); From 6c26131f05017d9a17a436af379e93c523fc6742 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 10:29:25 +0800 Subject: [PATCH 13/27] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=20ButtonTe?= =?UTF-8?q?mplate=20=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Search/Search.razor | 57 +++++++++---------- 1 file changed, 27 insertions(+), 30 deletions(-) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor b/src/BootstrapBlazor/Components/Search/Search.razor index 4488cc3ae56..bb8a1910be4 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor +++ b/src/BootstrapBlazor/Components/Search/Search.razor @@ -4,30 +4,27 @@
+ @if (PrefixButtonTemplate != null) + { + + + @PrefixButtonTemplate + + + }
@if (ShowPrefixIcon) { - @if(PrefixButtonTemplate == null) - { -
- @if (PrefixIconTemplate != null) - { - @PrefixIconTemplate - } - else - { - - } -
- } - else - { - - - @PrefixButtonTemplate - - - } +
+ @if (PrefixIconTemplate != null) + { + @PrefixIconTemplate + } + else + { + + } +
} - @if (ShowClearIcon) + @if (IsClearable) {
} - @if (ButtonTemplate == null) - { - - - @ButtonTemplate - - - }
+ @if (ButtonTemplate != null) + { + + + @ButtonTemplate + + + } @if (ShowClearButton) { From a4ac12bfb2f6b0d264ae0972e37c4118bea9a3f2 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 10:29:37 +0800 Subject: [PATCH 14/27] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/SearchButtonTemplateDemo.razor | 2 + .../SearchButtonTemplateDemo.razor.cs | 41 ++++++++++++++ .../Components/Samples/Searches.razor | 56 ++++++++++++++++++- .../Components/Samples/Searches.razor.cs | 4 ++ 4 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor create mode 100644 src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs diff --git a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor new file mode 100644 index 00000000000..ca8df910af9 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor @@ -0,0 +1,2 @@ + + diff --git a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs new file mode 100644 index 00000000000..8a085d1e96a --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs @@ -0,0 +1,41 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Components; + +/// +/// SearchButtonTemplateDemo 示例组件 +/// +public partial class SearchButtonTemplateDemo +{ + [CascadingParameter(Name = "OnSearch"), NotNull] + private Func? OnSearch { get; set; } + + [CascadingParameter(Name = "OnClear"), NotNull] + private Func? OnClear { get; set; } + + [Inject, NotNull] + private ToastService? ToastService { get; set; } + + private async Task OnClickSearch() + { + if (OnSearch != null) + { + await OnSearch(); + } + + await ToastService.Information("Search-ButtonTemplate", "Click Search1 Button"); + } + + private async Task OnClickClear() + { + if (OnClear != null) + { + await OnClear(); + } + + await ToastService.Information("Search-ButtonTemplate", "Click Clear1 Button"); + } +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor index 4e5bbf99219..43d8c039719 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor @@ -97,12 +97,64 @@ +
+

@((MarkupString)Localizer["SearchesButtonTemplateDesc"].Value)

+

在自定义模板中可以通过级联参数获得 Search 组件内部的 OnClear OnSearch 方法

+ 
[CascadingParameter(Name = "OnSearch"), NotNull]
+private Func<Task>? OnSearch { get; set; }
+
+[CascadingParameter(Name = "OnClear"), NotNull]
+private Func<Task>? OnClear { get; set; }
+
-
+
+ + + + + + + + +
+
+ + + +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs index 2b03d5ff0d4..6da78bb725b 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs @@ -78,6 +78,10 @@ private async Task> OnSearchFoo(string searchText) : Enumerable.Range(1, 10).Select(i => LocalizerFoo["Foo.Name", $"{i:d4}"].Value).ToList(); } + private bool _isClearable = true; + private bool _showClearButton = true; + private bool _showSearchButton = true; + /// /// 获得属性方法 /// From 18e26a18d3481aabf52c1c0c9e8bfa2d33daf92d Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 10:36:15 +0800 Subject: [PATCH 15/27] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Components/Samples/Searches.razor | 2 +- .../Components/Samples/Searches.razor.cs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor index 43d8c039719..d0a60e73e0a 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor @@ -154,7 +154,7 @@ private Func<Task>? OnClear { get; set; } + ShowPrefixIcon="true" PrefixIcon="fa-brands fa-github">
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs index 6da78bb725b..28f19c8f938 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs @@ -79,8 +79,8 @@ private async Task> OnSearchFoo(string searchText) } private bool _isClearable = true; - private bool _showClearButton = true; - private bool _showSearchButton = true; + private bool _showClearButton = false; + private bool _showSearchButton = false; /// /// 获得属性方法 From c3c9449a3d4f179e63730a920c16de8efd180e23 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 10:41:26 +0800 Subject: [PATCH 16/27] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Searches.razor | 2 +- src/BootstrapBlazor.Server/Locales/en-US.json | 8 +++++++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 8 +++++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor index d0a60e73e0a..219b78e2d5e 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor @@ -99,7 +99,7 @@ Name="ButtonTemplate">

@((MarkupString)Localizer["SearchesButtonTemplateDesc"].Value)

-

在自定义模板中可以通过级联参数获得 Search 组件内部的 OnClear OnSearch 方法

+

@((MarkupString)Localizer["SearchesButtonTemplateDesc2"].Value)

[CascadingParameter(Name = "OnSearch"), NotNull]
 private Func<Task>? OnSearch { get; set; }
 
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 3e1db2f5b24..2775d6132eb 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4226,7 +4226,13 @@
     "SearchesItemTemplateIntro": "By setting ItemTemplate and matching generic data, you can achieve any desired effect. In this example, by searching for any keyword, the backend calls any third-party search results and displays them. After selecting the search item, you can handle it yourself through the OnSelectedItemChanged callback method",
     "SearchesShowPrefixIconTitle": "ShowPrefixIcon",
     "SearchesShowPrefixIconIntro": "Control whether to show the prefix icon by setting the ShowPrefixIcon parameter",
-    "SearchesShowPrefixIconDescription": "You can customize the prefix through PrefixIconTemplate. In this example, the Svg icon is used through the prefix template."
+    "SearchesShowPrefixIconDescription": "You can customize the prefix through PrefixIconTemplate. In this example, the Svg icon is used through the prefix template.",
+    "SearchesButtonTemplateTitle": "Button Template",
+    "SearchesButtonTemplateIntro": "Customize the buttons displayed by the component by setting ButtonTemplate",
+    "SearchesButtonTemplateDesc": "Customize the buttons displayed in front of the component by setting PrefixButtonTemplate",
+    "SearchesButtonTemplateDesc2": "In a custom template, you can use the cascading parameters to get the OnClear OnSearch method inside the Search component",
+    "SearchesIsClearableTitle": "IsClearable",
+    "SearchesIsClearableIntro": "Display the clear icon by setting IsClearable=\"true\""
   },
   "BootstrapBlazor.Server.Components.Samples.Titles": {
     "Title": "Title",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index c25bf1aedce..2b100203bae 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4226,7 +4226,13 @@
     "SearchesItemTemplateIntro": "通过设置 ItemTemplate 配合泛型数据可以做出自己想要的任何效果，本例中通过搜索任意关键字，后台调用任意第三方搜索结果并且进行展示，选中搜索项后通过 OnSelectedItemChanged 回调方法可以自行处理",
     "SearchesShowPrefixIconTitle": "显示前缀图标",
     "SearchesShowPrefixIconIntro": "通过设置 ShowPrefixIcon 参数控制是否显示前缀图标",
-    "SearchesShowPrefixIconDescription": "可以通过 PrefixIconTemplate 自定义前缀，本例中通过前缀模板使用 Svg 图标"
+    "SearchesShowPrefixIconDescription": "可以通过 PrefixIconTemplate 自定义前缀，本例中通过前缀模板使用 Svg 图标",
+    "SearchesButtonTemplateTitle": "按钮模板",
+    "SearchesButtonTemplateIntro": "通过设置 ButtonTemplate 自定义组件显示的按钮",
+    "SearchesButtonTemplateDesc": "通过设置 PrefixButtonTemplate 自定义组件前置显示的按钮",
+    "SearchesButtonTemplateDesc2": "在自定义模板中可以通过级联参数获得 Search 组件内部的 OnClear OnSearch 方法",
+    "SearchesIsClearableTitle": "IsClearable",
+    "SearchesIsClearableIntro": "通过设置 IsClearable=\"true\" 显示清空小图标"
   },
   "BootstrapBlazor.Server.Components.Samples.Titles": {
     "Title": "Title 网站标题",

From de7faf6bac123dbf34b2f8060c610ee3778b3546 Mon Sep 17 00:00:00 2001
From: Argo Zhang 
Date: Wed, 5 Feb 2025 10:53:56 +0800
Subject: [PATCH 17/27] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A=E6=96=87=E6=A1=A3=E5=A4=9A=E8=AF=AD=E8=A8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/Searches.razor.cs      | 30 +++++++++++++++++--
 src/BootstrapBlazor.Server/Locales/en-US.json |  6 +++-
 src/BootstrapBlazor.Server/Locales/zh-CN.json |  6 +++-
 .../Components/Search/Search.razor.cs         |  6 ++--
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs
index 28f19c8f938..a363beaf708 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs
@@ -97,11 +97,35 @@ private AttributeItem[] GetAttributes() =>
         },
         new()
         {
-            Name="SearchButtonLoadingIcon",
-            Description = Localizer["SearchesButtonLoadingIcon"],
+            Name="IsClearable",
+            Description = Localizer["SearchesIsClearable"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name="ClearIcon",
+            Description = Localizer["SearchesClearIcon"],
             Type = "string",
             ValueList = " — ",
-            DefaultValue = "fa-fw fa-spin fa-solid fa-spinner"
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name="PrefixButtonTemplate",
+            Description = Localizer["SearchesPrefixButtonTemplate"],
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name="ButtonTemplate",
+            Description = Localizer["SearchesButtonTemplate"],
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
         },
         new() {
             Name = "ClearButtonIcon",
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 2775d6132eb..3c607ce3cce 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4232,7 +4232,11 @@
     "SearchesButtonTemplateDesc": "Customize the buttons displayed in front of the component by setting PrefixButtonTemplate",
     "SearchesButtonTemplateDesc2": "In a custom template, you can use the cascading parameters to get the OnClear OnSearch method inside the Search component",
     "SearchesIsClearableTitle": "IsClearable",
-    "SearchesIsClearableIntro": "Display the clear icon by setting IsClearable=\"true\""
+    "SearchesIsClearableIntro": "Display the clear icon by setting IsClearable=\"true\"",
+    "SearchesIsClearable": "Whether to display the clear icon",
+    "SearchesClearIcon": "Clear Icon",
+    "SearchesPrefixButtonTemplate": "Prefix button template",
+    "SearchesButtonTemplate": "Button template"
   },
   "BootstrapBlazor.Server.Components.Samples.Titles": {
     "Title": "Title",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 2b100203bae..31cdf7bbf8b 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4232,7 +4232,11 @@
     "SearchesButtonTemplateDesc": "通过设置 PrefixButtonTemplate 自定义组件前置显示的按钮",
     "SearchesButtonTemplateDesc2": "在自定义模板中可以通过级联参数获得 Search 组件内部的 OnClear OnSearch 方法",
     "SearchesIsClearableTitle": "IsClearable",
-    "SearchesIsClearableIntro": "通过设置 IsClearable=\"true\" 显示清空小图标"
+    "SearchesIsClearableIntro": "通过设置 IsClearable=\"true\" 显示清空小图标",
+    "SearchesIsClearable": "是否显示清空小按钮",
+    "SearchesClearIcon": "清空图标",
+    "SearchesPrefixButtonTemplate": "前置按钮模板",
+    "SearchesButtonTemplate": "按钮模板"
   },
   "BootstrapBlazor.Server.Components.Samples.Titles": {
     "Title": "Title 网站标题",
diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs
index 9ea3c8041c2..35d21982ef1 100644
--- a/src/BootstrapBlazor/Components/Search/Search.razor.cs
+++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs
@@ -19,7 +19,7 @@ public partial class Search
     public bool IsClearable { get; set; }
 
     /// 
-    /// 获得/设置 清除图标 默认为 null
+    /// 获得/设置 清空图标 默认为 null
     /// 
     [Parameter]
     public string? ClearIcon { get; set; }
@@ -80,13 +80,13 @@ public partial class Search
     public string? SearchButtonText { get; set; }
 
     /// 
-    /// 获得/设置 搜索按钮模板 默认 null 未设置
+    /// 获得/设置 按钮模板 默认 null 未设置
     /// 
     [Parameter]
     public RenderFragment? ButtonTemplate { get; set; }
 
     /// 
-    /// 获得/设置 前置搜索按钮模板 默认 null 未设置
+    /// 获得/设置 前置按钮模板 默认 null 未设置
     /// 
     [Parameter]
     public RenderFragment? PrefixButtonTemplate { get; set; }

From 22d7007bc89a1b9914e2f30c1a1c77bf95709a3f Mon Sep 17 00:00:00 2001
From: Argo Zhang 
Date: Wed, 5 Feb 2025 11:10:19 +0800
Subject: [PATCH 18/27] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/UnitTest/Components/SearchTest.cs | 31 ++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/test/UnitTest/Components/SearchTest.cs b/test/UnitTest/Components/SearchTest.cs
index abb1935d5d1..8c6f74d7c24 100644
--- a/test/UnitTest/Components/SearchTest.cs
+++ b/test/UnitTest/Components/SearchTest.cs
@@ -159,7 +159,7 @@ public void ShowPrefixIcon_Ok()
             pb.Add(a => a.ShowPrefixIcon, true);
         });
         cut.Contains("search auto-complete search-prefix");
-        cut.Contains("
");
+        cut.Contains("
");
     }
 
     [Fact]
@@ -171,7 +171,7 @@ public void PrefixIconTemplate_Ok()
             pb.Add(a => a.ShowPrefixIcon, true);
             pb.Add(a => a.PrefixIconTemplate, b => b.AddContent(0, "test-prefix-icon-template"));
         });
-        cut.Contains("
test-prefix-icon-template
");
+        cut.Contains("
test-prefix-icon-template
");
     }
 
     [Fact]
@@ -184,4 +184,31 @@ public void ShowSearchButton_Ok()
         });
         cut.DoesNotContain("aria-label=\"Search\"");
     }
+
+    [Fact]
+    public void IsClearable_Ok()
+    {
+        var cut = Context.RenderComponent>(pb =>
+        {
+            pb.Add(a => a.IsClearable, true);
+        });
+        cut.Contains("search auto-complete search-clear");
+        cut.Contains("
");
+    }
+
+    [Fact]
+    public void ButtonTemplate_Ok()
+    {
+        var cut = Context.RenderComponent>(pb =>
+        {
+            pb.Add(a => a.ButtonTemplate, builder => builder.AddContent(0, "button-template"));
+        });
+        cut.Contains("button-template");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.PrefixButtonTemplate, builder => builder.AddContent(0, "prefix-button-template"));
+        });
+        cut.Contains("prefix-button-template");
+    }
 }

From 37433a9fbb60c619afbb0a09f69d5f3d0c81e8b2 Mon Sep 17 00:00:00 2001
From: Argo Zhang 
Date: Wed, 5 Feb 2025 01:21:28 +0800
Subject: [PATCH 19/27] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20DOM=20?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=E7=B2=BE=E7=AE=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Search/Search.razor            |  8 +--
 .../Components/Search/Search.razor.scss       | 58 +++++--------------
 .../wwwroot/scss/theme/bootstrapblazor.scss   |  3 -
 3 files changed, 17 insertions(+), 52 deletions(-)

diff --git a/src/BootstrapBlazor/Components/Search/Search.razor b/src/BootstrapBlazor/Components/Search/Search.razor
index bb8a1910be4..8c9f2f209b2 100644
--- a/src/BootstrapBlazor/Components/Search/Search.razor
+++ b/src/BootstrapBlazor/Components/Search/Search.razor
@@ -12,10 +12,10 @@
                 
             
         }
-        

+        

             @if (ShowPrefixIcon)
             {
-                

+                

                     @if (PrefixIconTemplate != null)
                     {
                         @PrefixIconTemplate
@@ -26,7 +26,7 @@
                     }
                 

             }
-            
             @if (IsClearable)
             {
-                

+                

                     
                 

             }
diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.scss b/src/BootstrapBlazor/Components/Search/Search.razor.scss
index 4f0ae1591cc..478e2e5ee33 100644
--- a/src/BootstrapBlazor/Components/Search/Search.razor.scss
+++ b/src/BootstrapBlazor/Components/Search/Search.razor.scss
@@ -1,62 +1,30 @@
 .search.auto-complete {
     --bb-ac-padding-right: #{$bb-search-padding-right};
-    --bb-search-prefix-input-padding-left: #{$bb-search-prefix-input-padding-left};
     --bb-search-prefix-icon-color: #{$bb-search-prefix-icon-color};
-    --bb-search-icon-input-padding-right: #{$bb-search-icon-input-padding-right};
-
-    &.search-prefix .form-control {
-        padding-left: var(--bb-search-prefix-input-padding-left);
-    }
-
-    &.search-clear .form-control-group:hover .form-control {
-        padding-right: var(--bb-search-icon-input-padding-right);
-    }
 
     .form-control-group {
-        flex: 1;
-        width: 1%;
-        min-width: 0;
-        position: relative;
-
-        .search-icon {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 2;
-        }
+        display: flex;
 
         .search-prefix-icon {
-            left: 0;
-            padding-left: 1rem;
             color: var(--bb-search-prefix-icon-color);
+            margin-right: 0.5rem;
         }
 
-        .search-clear-icon {
-            right: 0;
-            width: var(--bb-search-icon-input-padding-right);
-            cursor: pointer;
-            display: none;
-        }
-
-        &:hover .search-clear-icon {
-            display: flex;
+        .search-input {
+            flex: 1;
+            width: 1%;
+            min-width: 0;
+            border: none;
+            padding: 0;
         }
 
-        &:not(:first-child) {
-            .form-control {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
+        .search-clear-icon {
+            cursor: pointer;
+            margin-left: 0.5rem;
         }
 
-        &:not(:last-child) {
-            .form-control {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
+        &:not(:hover) .search-clear-icon {
+            display: none;
         }
     }
 }
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
index a85927496a6..fbfb33dbe0b 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -484,10 +484,7 @@ $bb-scroll-track-bg: rgba(var(--bs-emphasis-color-rgb),0.08);
 
 // Search
 $bb-search-padding-right: 0.75rem;
-$bb-search-prefix-icon-padding-left: 2rem;
-$bb-search-prefix-input-padding-left: 36px;
 $bb-search-prefix-icon-color: #59636e;
-$bb-search-icon-input-padding-right: 36px;
 
 // Segmented
 $bb-segmented-padding: 2px;

From 16f506cb5cbd7ff3f9f4c923d388f5bbbe5932fc Mon Sep 17 00:00:00 2001
From: Argo Zhang 
Date: Wed, 5 Feb 2025 01:48:59 +0800
Subject: [PATCH 20/27] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20SearchContex?=
 =?UTF-8?q?t=20=E7=B2=BE=E7=AE=80=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

减少级联参数
---
 .../Components/Search/Search.razor            | 20 ++++++--------
 .../Components/Search/Search.razor.cs         | 26 ++++++++++++++----
 .../Components/Search/SearchContext.cs        | 27 +++++++++++++++++++
 3 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 src/BootstrapBlazor/Components/Search/SearchContext.cs

diff --git a/src/BootstrapBlazor/Components/Search/Search.razor b/src/BootstrapBlazor/Components/Search/Search.razor
index 8c9f2f209b2..bfa7c74f82f 100644
--- a/src/BootstrapBlazor/Components/Search/Search.razor
+++ b/src/BootstrapBlazor/Components/Search/Search.razor
@@ -6,11 +6,7 @@
     

         @if (PrefixButtonTemplate != null)
         {
-            
-                
-                    @PrefixButtonTemplate
-                
-            
+            @PrefixButtonTemplate(_context)
         }
         

             @if (ShowPrefixIcon)
@@ -18,7 +14,7 @@
                 

                     @if (PrefixIconTemplate != null)
                     {
-                        @PrefixIconTemplate
+                        @PrefixIconTemplate(_context)
                     }
                     else
                     {
@@ -37,18 +33,18 @@
                    placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" />
             @if (IsClearable)
             {
-                

+                

                     
                 

             }
+            @if (IconTemplate != null)
+            {
+                @IconTemplate(_context)
+            }
         

         @if (ButtonTemplate != null)
         {
-            
-                
-                    @ButtonTemplate
-                
-            
+            @ButtonTemplate(_context)
         }
         @if (ShowClearButton)
         {
diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.cs b/src/BootstrapBlazor/Components/Search/Search.razor.cs
index 35d21982ef1..062ec8d3ca2 100644
--- a/src/BootstrapBlazor/Components/Search/Search.razor.cs
+++ b/src/BootstrapBlazor/Components/Search/Search.razor.cs
@@ -12,6 +12,12 @@ namespace BootstrapBlazor.Components;
 ///
public partial class Search { + /// + /// 获得/设置 图标模板 默认 null 未设置 + /// + [Parameter] + public RenderFragment>? IconTemplate { get; set; } + /// /// 获得/设置 是否显示清空小按钮 默认 false /// @@ -83,13 +89,13 @@ public partial class Search /// 获得/设置 按钮模板 默认 null 未设置 ///
[Parameter] - public RenderFragment? ButtonTemplate { get; set; } + public RenderFragment>? ButtonTemplate { get; set; } /// /// 获得/设置 前置按钮模板 默认 null 未设置 /// [Parameter] - public RenderFragment? PrefixButtonTemplate { get; set; } + public RenderFragment>? PrefixButtonTemplate { get; set; } /// /// 获得/设置 是否显示前缀图标 默认为 false 不显示 @@ -107,7 +113,7 @@ public partial class Search /// 获得/设置 前缀图标模板 默认为 null /// [Parameter] - public RenderFragment? PrefixIconTemplate { get; set; } + public RenderFragment>? PrefixIconTemplate { get; set; } /// /// 获得/设置 点击搜索后是否自动清空搜索框 @@ -147,8 +153,6 @@ public partial class Search private IStringLocalizer>? Localizer { get; set; } private string? ClassString => CssBuilder.Default("search auto-complete") - .AddClass("search-prefix", ShowPrefixIcon) - .AddClass("search-clear", IsClearable) .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -165,6 +169,18 @@ public partial class Search [NotNull] private List? _filterItems = null; + private SearchContext _context = default!; + + /// + /// + /// + protected override void OnInitialized() + { + base.OnInitialized(); + + _context = new SearchContext(this, OnSearchClick, OnClearClick); + } + /// /// /// diff --git a/src/BootstrapBlazor/Components/Search/SearchContext.cs b/src/BootstrapBlazor/Components/Search/SearchContext.cs new file mode 100644 index 00000000000..993fc929820 --- /dev/null +++ b/src/BootstrapBlazor/Components/Search/SearchContext.cs @@ -0,0 +1,27 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Components; + +/// +/// 搜索组件上下文类 +/// +public class SearchContext(Search search, Func onSearchAsync, Func onClearAsync) +{ + /// + /// 获得/设置 搜索组件实例 + /// + public Search Search { get; } = search; + + /// + /// 获得/设置 清空按钮回调方法 + /// + public Func OnClearAsync { get; } = onClearAsync; + + /// + /// 获得/设置 搜索按钮回调方法 + /// + public Func OnSearchAsync { get; } = onSearchAsync; +} From 6c358e16c06861cfa553a7c58283cb7c1ac4d933 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 01:49:15 +0800 Subject: [PATCH 21/27] =?UTF-8?q?style:=20=E5=A2=9E=E5=8A=A0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Search/Search.razor.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Search/Search.razor.scss b/src/BootstrapBlazor/Components/Search/Search.razor.scss index 478e2e5ee33..9c66534c7ce 100644 --- a/src/BootstrapBlazor/Components/Search/Search.razor.scss +++ b/src/BootstrapBlazor/Components/Search/Search.razor.scss @@ -4,6 +4,9 @@ .form-control-group { display: flex; + justify-content: center; + align-items: center; + flex-wrap: nowrap; .search-prefix-icon { color: var(--bb-search-prefix-icon-color); @@ -18,7 +21,7 @@ padding: 0; } - .search-clear-icon { + .search-icon { cursor: pointer; margin-left: 0.5rem; } From 50dc40ffbb3b23486bb44249d622b5a3470bd0fe Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 01:55:30 +0800 Subject: [PATCH 22/27] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/SearchButtonTemplateDemo.razor | 4 ++- .../SearchButtonTemplateDemo.razor.cs | 22 ++++++--------- .../Components/Samples/Searches.razor | 28 ++++++++++++++++++- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor index ca8df910af9..173325055cb 100644 --- a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor +++ b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor @@ -1,2 +1,4 @@ - +@typeparam TValue + + diff --git a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs index 8a085d1e96a..20e6fdec30a 100644 --- a/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Components/SearchButtonTemplateDemo.razor.cs @@ -8,33 +8,27 @@ namespace BootstrapBlazor.Server.Components.Components; /// /// SearchButtonTemplateDemo 示例组件 /// -public partial class SearchButtonTemplateDemo +public partial class SearchButtonTemplateDemo { - [CascadingParameter(Name = "OnSearch"), NotNull] - private Func? OnSearch { get; set; } - - [CascadingParameter(Name = "OnClear"), NotNull] - private Func? OnClear { get; set; } + /// + /// 获得/设置 实例"/> + /// + [Parameter, EditorRequired, NotNull] + public SearchContext? Context { get; set; } [Inject, NotNull] private ToastService? ToastService { get; set; } private async Task OnClickSearch() { - if (OnSearch != null) - { - await OnSearch(); - } + await Context.OnSearchAsync(); await ToastService.Information("Search-ButtonTemplate", "Click Search1 Button"); } private async Task OnClickClear() { - if (OnClear != null) - { - await OnClear(); - } + await Context.OnClearAsync(); await ToastService.Information("Search-ButtonTemplate", "Click Clear1 Button"); } diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor index 219b78e2d5e..bd071b4232e 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor @@ -117,13 +117,39 @@ private Func<Task>? OnClear { get; set; } - + + +
+

@((MarkupString)Localizer["SearchesButtonTemplateDesc"].Value)

+

@((MarkupString)Localizer["SearchesButtonTemplateDesc2"].Value)

+ 
[CascadingParameter(Name = "OnSearch"), NotNull]
+private Func<Task>? OnSearch { get; set; }
+
+[CascadingParameter(Name = "OnClear"), NotNull]
+private Func<Task>? OnClear { get; set; }
+
+
+
+ + + + + +
+
+ + From 1387d8e48e24537bff657b1e148a8956c91aca6c Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 02:14:58 +0800 Subject: [PATCH 23/27] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Searches.razor | 64 +++++++++++-------- .../Components/Samples/Searches.razor.cs | 10 +++ src/BootstrapBlazor.Server/Locales/en-US.json | 7 +- src/BootstrapBlazor.Server/Locales/zh-CN.json | 7 +- 4 files changed, 56 insertions(+), 32 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor index bd071b4232e..43f89c4eb7b 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor @@ -94,47 +94,51 @@ - +
-

@((MarkupString)Localizer["SearchesButtonTemplateDesc"].Value)

-

@((MarkupString)Localizer["SearchesButtonTemplateDesc2"].Value)

- 
[CascadingParameter(Name = "OnSearch"), NotNull]
-private Func<Task>? OnSearch { get; set; }
-
-[CascadingParameter(Name = "OnClear"), NotNull]
-private Func<Task>? OnClear { get; set; }
+

@((MarkupString)Localizer["SearchesIconTemplateDesc"].Value)

- - - - - - - + + +
- +

@((MarkupString)Localizer["SearchesButtonTemplateDesc"].Value)

@((MarkupString)Localizer["SearchesButtonTemplateDesc2"].Value)

- 
[CascadingParameter(Name = "OnSearch"), NotNull]
-private Func<Task>? OnSearch { get; set; }
+        
[Parameter, EditorRequired, NotNull]
+public SearchContext<TValue>? Context { get; set; }
+
+[Inject, NotNull]
+private ToastService? ToastService { get; set; }
+
+private async Task OnClickSearch()
+{
+    await Context.OnSearchAsync();
+
+    await ToastService.Information("Search-ButtonTemplate", "Click Search1 Button");
+}
+
+private async Task OnClickClear()
+{
+    await Context.OnClearAsync();
 
-[CascadingParameter(Name = "OnClear"), NotNull]
-private Func<Task>? OnClear { get; set; }

+    await ToastService.Information("Search-ButtonTemplate", "Click Clear1 Button");
+}
@@ -142,9 +146,13 @@ private Func<Task>? OnClear { get; set; } OnSearch="@OnModelSearch" IsClearable="true" ShowPrefixIcon="true" PrefixIcon="fa fa-flag"> - - - + + + + + + +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs index a363beaf708..3ca4a984bfe 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Searches.razor.cs @@ -10,6 +10,9 @@ namespace BootstrapBlazor.Server.Components.Samples; /// public sealed partial class Searches { + [Inject, NotNull] + private ToastService? ToastService { get; set; } + [NotNull] private ConsoleLogger? Logger { get; set; } @@ -78,6 +81,13 @@ private async Task> OnSearchFoo(string searchText) : Enumerable.Range(1, 10).Select(i => LocalizerFoo["Foo.Name", $"{i:d4}"].Value).ToList(); } + private async Task OnClickCamera(SearchContext context) + { + await Task.Delay(10); + + await ToastService.Information("Custom IconTemplate", "Click custom icon"); + } + private bool _isClearable = true; private bool _showClearButton = false; private bool _showSearchButton = false; diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 3c607ce3cce..74bc53e1884 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -4230,13 +4230,16 @@ "SearchesButtonTemplateTitle": "Button Template", "SearchesButtonTemplateIntro": "Customize the buttons displayed by the component by setting ButtonTemplate", "SearchesButtonTemplateDesc": "Customize the buttons displayed in front of the component by setting PrefixButtonTemplate", - "SearchesButtonTemplateDesc2": "In a custom template, you can use the cascading parameters to get the OnClear OnSearch method inside the Search component", + "SearchesButtonTemplateDesc2": "In a custom template, you can call the OnClear OnSearch method inside the Search component with the context.", "SearchesIsClearableTitle": "IsClearable", "SearchesIsClearableIntro": "Display the clear icon by setting IsClearable=\"true\"", "SearchesIsClearable": "Whether to display the clear icon", "SearchesClearIcon": "Clear Icon", "SearchesPrefixButtonTemplate": "Prefix button template", - "SearchesButtonTemplate": "Button template" + "SearchesButtonTemplate": "Button template", + "SearchesIconTemplateTitle": "Icon Template", + "SearchesIconTemplateIntro": "Customize the icon displayed by the component by setting IconTemplate", + "SearchesIconTemplateDesc": "The search component context SearchContext<string> provides the OnClear OnSearch methods within the component" }, "BootstrapBlazor.Server.Components.Samples.Titles": { "Title": "Title", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 31cdf7bbf8b..2b4d3f0598e 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -4230,13 +4230,16 @@ "SearchesButtonTemplateTitle": "按钮模板", "SearchesButtonTemplateIntro": "通过设置 ButtonTemplate 自定义组件显示的按钮", "SearchesButtonTemplateDesc": "通过设置 PrefixButtonTemplate 自定义组件前置显示的按钮", - "SearchesButtonTemplateDesc2": "在自定义模板中可以通过级联参数获得 Search 组件内部的 OnClear OnSearch 方法", + "SearchesButtonTemplateDesc2": "在自定义模板中可以通过关联参数调用 Search 组件内部的 OnClear OnSearch 方法", "SearchesIsClearableTitle": "IsClearable", "SearchesIsClearableIntro": "通过设置 IsClearable=\"true\" 显示清空小图标", "SearchesIsClearable": "是否显示清空小按钮", "SearchesClearIcon": "清空图标", "SearchesPrefixButtonTemplate": "前置按钮模板", - "SearchesButtonTemplate": "按钮模板" + "SearchesButtonTemplate": "按钮模板", + "SearchesIconTemplateTitle": "图标模板", + "SearchesIconTemplateIntro": "通过设置 IconTemplate 自定义组件显示的图标", + "SearchesIconTemplateDesc": "搜索组件上下文 SearchContext<string> 提供了组件内部的 OnClear OnSearch 方法" }, "BootstrapBlazor.Server.Components.Samples.Titles": { "Title": "Title 网站标题", From 44897ffe7046a39ee68e20cbb6022caefaed1220 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 02:17:06 +0800 Subject: [PATCH 24/27] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/SearchTest.cs | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/test/UnitTest/Components/SearchTest.cs b/test/UnitTest/Components/SearchTest.cs index 8c6f74d7c24..e1875bf73d3 100644 --- a/test/UnitTest/Components/SearchTest.cs +++ b/test/UnitTest/Components/SearchTest.cs @@ -169,9 +169,20 @@ public void PrefixIconTemplate_Ok() var cut = Context.RenderComponent>(pb => { pb.Add(a => a.ShowPrefixIcon, true); - pb.Add(a => a.PrefixIconTemplate, b => b.AddContent(0, "test-prefix-icon-template")); + pb.Add(a => a.PrefixIconTemplate, context => b => b.AddContent(0, "test-prefix-icon-template")); }); - cut.Contains("
test-prefix-icon-template
"); + cut.Contains("
test-prefix-icon-template
"); + } + + [Fact] + public void IconTemplate_Ok() + { + var items = new List() { null, "test1", "test2" }; + var cut = Context.RenderComponent>(pb => + { + pb.Add(a => a.IconTemplate, context => b => b.AddContent(0, "test--icon-template")); + }); + cut.Contains("
test-icon-template
"); } [Fact] @@ -201,13 +212,13 @@ public void ButtonTemplate_Ok() { var cut = Context.RenderComponent>(pb => { - pb.Add(a => a.ButtonTemplate, builder => builder.AddContent(0, "button-template")); + pb.Add(a => a.ButtonTemplate, context => builder => builder.AddContent(0, "button-template")); }); cut.Contains("button-template"); cut.SetParametersAndRender(pb => { - pb.Add(a => a.PrefixButtonTemplate, builder => builder.AddContent(0, "prefix-button-template")); + pb.Add(a => a.PrefixButtonTemplate, context => builder => builder.AddContent(0, "prefix-button-template")); }); cut.Contains("prefix-button-template"); } From 56a943bc2a9d4b083dddd5209059738095230404 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 02:22:07 +0800 Subject: [PATCH 25/27] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/SearchTest.cs | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/test/UnitTest/Components/SearchTest.cs b/test/UnitTest/Components/SearchTest.cs index e1875bf73d3..70862b9af60 100644 --- a/test/UnitTest/Components/SearchTest.cs +++ b/test/UnitTest/Components/SearchTest.cs @@ -210,11 +210,21 @@ public void IsClearable_Ok() [Fact] public void ButtonTemplate_Ok() { + SearchContext? val = null; var cut = Context.RenderComponent>(pb => { - pb.Add(a => a.ButtonTemplate, context => builder => builder.AddContent(0, "button-template")); + pb.Add(a => a.ButtonTemplate, context => builder => + { + val = context; + builder.AddContent(0, "button-template"); + }); }); cut.Contains("button-template"); + Assert.NotNull(val); + Assert.NotNull(val.Search); + Assert.Equal(cut.Instance, val.Search); + Assert.NotNull(val.OnSearchAsync); + Assert.NotNull(val.OnClearAsync); cut.SetParametersAndRender(pb => { From 64621a6668712d9363d267986df9a6a2010b4ddd Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 02:22:37 +0800 Subject: [PATCH 26/27] chore: bump version 9.3.1-beta07 --- src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index dc23b6eb19b..2504a2d7b3c 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 9.3.1-beta06 + 9.3.1-beta07 From 955968c17ae28091f5d420b145fbf896be9dc79f Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 5 Feb 2025 02:30:24 +0800 Subject: [PATCH 27/27] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/SearchTest.cs | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/test/UnitTest/Components/SearchTest.cs b/test/UnitTest/Components/SearchTest.cs index 70862b9af60..5d93475bc53 100644 --- a/test/UnitTest/Components/SearchTest.cs +++ b/test/UnitTest/Components/SearchTest.cs @@ -158,8 +158,7 @@ public void ShowPrefixIcon_Ok() { pb.Add(a => a.ShowPrefixIcon, true); }); - cut.Contains("search auto-complete search-prefix"); - cut.Contains("
"); + cut.Contains("
"); } [Fact] @@ -180,9 +179,9 @@ public void IconTemplate_Ok() var items = new List() { null, "test1", "test2" }; var cut = Context.RenderComponent>(pb => { - pb.Add(a => a.IconTemplate, context => b => b.AddContent(0, "test--icon-template")); + pb.Add(a => a.IconTemplate, context => b => b.AddContent(0, "test-icon-template")); }); - cut.Contains("
test-icon-template
"); + cut.Contains("test-icon-template"); } [Fact] @@ -203,7 +202,6 @@ public void IsClearable_Ok() { pb.Add(a => a.IsClearable, true); }); - cut.Contains("search auto-complete search-clear"); cut.Contains("
"); }