Skip to content

Commit d8336a6

Browse files
ArgoZhangArgoZhang
authored
refactor(Select): redesign IsFixedSearch UI layout (#5635)
* doc: 更新参数文档 * doc: 更新文档注释 * doc: 更改为英语注释 * refactor: 重构固定搜索栏样式 * doc: 更新 IsFixedSearch 示例 * refactor: 增加 ShowSearch 条件 * test: 更新单元测试
1 parent 434f507 commit d8336a6

File tree

8 files changed

+137
-142
lines changed

8 files changed

+137
-142
lines changed

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -316,21 +316,27 @@
316316
Introduction="@Localizer["SelectsShowSearchIntro"]"
317317
Name="ShowSearch">
318318
<section ignore>
319-
<div class="row mb-3">
319+
<div class="row g-3">
320320
<div class="col-12 col-sm-6">
321321
<BootstrapInputGroup>
322322
<BootstrapInputGroupLabel DisplayText="IsClearable" />
323323
<Checkbox @bind-Value="@_isShowSearchClearable" />
324324
</BootstrapInputGroup>
325325
</div>
326+
<div class="col-12 col-sm-6">
327+
<BootstrapInputGroup>
328+
<BootstrapInputGroupLabel DisplayText="IsFixedSearch" />
329+
<Checkbox @bind-Value="@_isFixedSearch" />
330+
</BootstrapInputGroup>
331+
</div>
326332
</div>
327333
</section>
328-
<div class="row g-3 mt-3">
334+
<div class="row g-3">
329335
<div class="col-12 col-sm-6">
330-
<Select TValue="string" Items="Items" ShowSearch="true" IsClearable="_isShowSearchClearable" />
336+
<Select TValue="string" Items="Items" ShowSearch="true" IsClearable="_isShowSearchClearable" IsFixedSearch="_isFixedSearch" />
331337
</div>
332338
<div class="col-12 col-sm-6">
333-
<Select TValue="string" Items="StringItems" ShowSearch="true" IsClearable="_isShowSearchClearable" />
339+
<Select TValue="string" Items="StringItems" ShowSearch="true" IsClearable="_isShowSearchClearable" IsFixedSearch="_isFixedSearch" />
334340
</div>
335341
</div>
336342
</DemoBlock>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ public sealed partial class Selects
4747

4848
private bool _isShowSearchClearable;
4949

50+
private bool _isFixedSearch;
51+
5052
private bool _isClearable;
5153

5254
private string? _fooName;
@@ -357,6 +359,14 @@ private AttributeItem[] GetAttributes() =>
357359
DefaultValue = "false"
358360
},
359361
new()
362+
{
363+
Name = "IsFixedSearch",
364+
Description = Localizer["SelectsIsFixedSearch"],
365+
Type = "boolean",
366+
ValueList = "true / false",
367+
DefaultValue = "false"
368+
},
369+
new()
360370
{
361371
Name = "IsDisabled",
362372
Description = Localizer["SelectsIsDisabled"],

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3154,7 +3154,7 @@
31543154
"SelectsCustomTemplateTitle": "Custom option templates",
31553155
"SelectsCustomTemplateIntro": "By setting the <code>ItemTemplate</code> you can customize the option rendering style",
31563156
"SelectsShowSearchTitle": "Drop-down box with search box",
3157-
"SelectsShowSearchIntro": "Controls whether the search box is displayed by setting the <code>ShowSearch</code> property, which is not displayed by default false",
3157+
"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>",
31583158
"SelectsConfirmSelectTitle": "Drop-down box with confirmation",
31593159
"SelectsConfirmSelectIntro": "Block changes to the current value by setting the <code>OnBeforeSelectedItemChange</code> delegate.",
31603160
"SelectsTimeZoneTitle": "Timezone",
@@ -3194,7 +3194,8 @@
31943194
"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>",
31953195
"SelectsOnInputChangedCallback": "Callback method for converting input text into corresponding Value in edit mode",
31963196
"TextConvertToValueCallback": "Callback method when input text changes in edit mode",
3197-
"SelectsIsEditable": "Whether editable"
3197+
"SelectsIsEditable": "Whether editable",
3198+
"SelectsIsFixedSearch": "Whether fixed the search box"
31983199
},
31993200
"BootstrapBlazor.Server.Components.Samples.Sliders": {
32003201
"SlidersTitle": "Slider",

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3154,7 +3154,7 @@
31543154
"SelectsCustomTemplateTitle": "自定义选项模板",
31553155
"SelectsCustomTemplateIntro": "通过设置 <code>ItemTemplate</code> 可以自定义选项渲染样式",
31563156
"SelectsShowSearchTitle": "带搜索框的下拉框",
3157-
"SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 false 不显示搜索框",
3157+
"SelectsShowSearchIntro": "通过设置 <code>ShowSearch</code> 属性控制是否显示搜索框，默认为 <b>false</b> 不显示搜索框；通过设置 <code>IsFixedSearch</code> 固定搜索栏",
31583158
"SelectsConfirmSelectTitle": "带确认的下拉框",
31593159
"SelectsConfirmSelectIntro": "通过设置 <code>OnBeforeSelectedItemChange</code> 委托，阻止当前值的改变",
31603160
"SelectsTimeZoneTitle": "时区下拉框",
@@ -3194,7 +3194,8 @@
31943194
"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>",
31953195
"SelectsOnInputChangedCallback": "编辑模式下输入文本转换为对应 Value 回调方法",
31963196
"TextConvertToValueCallback": "编辑模式下输入文本变化时回调方法",
3197-
"SelectsIsEditable": "是否可编辑"
3197+
"SelectsIsEditable": "是否可编辑",
3198+
"SelectsIsFixedSearch": "是否固定搜索栏"
31983199
},
31993200
"BootstrapBlazor.Server.Components.Samples.Sliders": {
32003201
"SlidersTitle": "Slider 滑块",

‎src/BootstrapBlazor/Components/Select/Select.razor‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,15 @@
3030
{
3131
<span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
3232
}
33-
<div class="dropdown-menu">
34-
<div class="@SearchClassString">
35-
<input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" aria-label="search">
36-
<i class="@SearchIconString"></i>
37-
<i class="@SearchLoadingIconString"></i>
38-
</div>
33+
<div class="@DropdownMenuClassString">
34+
@if (ShowSearch)
35+
{
36+
<div class="dropdown-menu-search">
37+
<input type="text" class="search-text form-control" autocomplete="off" value="@SearchText" aria-label="search">
38+
<i class="@SearchIconString"></i>
39+
<i class="@SearchLoadingIconString"></i>
40+
</div>
41+
}
3942
@if (IsVirtualize)
4043
{
4144
<div class="dropdown-virtual">
@@ -49,30 +52,32 @@
4952
}
5053
</div>
5154
}
55+
else if (Rows.Count == 0)
56+
{
57+
<div class="dropdown-item">@NoSearchDataText</div>
58+
}
5259
else
5360
{
54-
@foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
55-
{
56-
if (!string.IsNullOrEmpty(itemGroup.Key))
61+
<div class="dropdown-menu-body">
62+
@foreach (var itemGroup in Rows.GroupBy(i => i.GroupName))
5763
{
58-
if (GroupItemTemplate != null)
64+
if (!string.IsNullOrEmpty(itemGroup.Key))
5965
{
60-
@GroupItemTemplate(itemGroup.Key)
66+
if (GroupItemTemplate != null)
67+
{
68+
@GroupItemTemplate(itemGroup.Key)
69+
}
70+
else
71+
{
72+
<Divider Text="@itemGroup.Key" />
73+
}
6174
}
62-
else
75+
@foreach (var item in itemGroup)
6376
{
64-
<Divider Text="@itemGroup.Key" />
77+
@RenderRow(item)
6578
}
6679
}
67-
@foreach (var item in itemGroup)
68-
{
69-
@RenderRow(item)
70-
}
71-
}
72-
@if (Rows.Count == 0)
73-
{
74-
<div class="dropdown-item">@NoSearchDataText</div>
75-
}
80+
</div>
7681
}
7782
</div>
7883
@if (!IsPopover)

0 commit comments

Comments
 (0)