diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index b83c7643c0c..ec6cce29417 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -31,7 +31,7 @@ - + diff --git a/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor b/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor index 10a95513b25..2bc1eb30808 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor @@ -319,6 +319,12 @@ private enum MultiSelectEnumFoo +
+ + + + +
@@ -332,7 +338,8 @@ private enum MultiSelectEnumFoo
+ ShowSearch="_showSearch" ShowToolbar="_showToolbar" + IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
@@ -344,7 +351,8 @@ private enum MultiSelectEnumFoo
+ ShowSearch="_showSearch" ShowToolbar="_showToolbar" + IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
diff --git a/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs index 6693409a337..20bf1a380cb 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs @@ -121,9 +121,10 @@ private enum MultiSelectEnumFoo private string? _editString; - private bool _isFixedSearch; - private bool _isClearable; - private bool _showSearch; + private bool _isFixedSearch = true; + private bool _isClearable = true; + private bool _showToolbar = true; + private bool _showSearch = true; private async Task OnEditCallback(string value) { @@ -373,6 +374,22 @@ private AttributeItem[] GetAttributes() => DefaultValue = "true" }, new() + { + Name = "ShowSearch", + Description = Localizer["MultiSelectsAttribute_ShowSearch"], + Type = "bool", + ValueList = "true|false", + DefaultValue = "false" + }, + new() + { + Name = "IsFixedSearch", + Description = Localizer["MultiSelectsAttribute_IsFixedSearch"], + Type = "bool", + ValueList = "true|false", + DefaultValue = "false" + }, + new() { Name = "ShowToolbar", Description = Localizer["MultiSelectsAttribute_ShowToolbar"], diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index b2a1b5dc822..2ae4a679936 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3024,7 +3024,12 @@ "MultiSelectOptionChangeLog": "Select the collection of items", "MultiSelectIsEditableTitle": "Editable", "MultiSelectIsEditableIntro": "Make the component editable by setting the IsEditable parameter", - "MultiSelectIsEditableDescription": "By setting the EditSubmitKey parameter, you can specify whether to submit via Enter or Space" + "MultiSelectIsEditableDescription": "By setting the EditSubmitKey parameter, you can specify whether to submit via Enter or Space", + "MultiSelectVirtualizeTitle": "Virtualize", + "MultiSelectVirtualizeIntro": "Set IsVirtualize to true enable virtual scroll for large data", + "MultiSelectVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through Items or OnQueryAsync callback methods", + "MultiSelectsAttribute_ShowSearch": "Whether to display the search box", + "MultiSelectsAttribute_IsFixedSearch": "Whether fixed the search box" }, "BootstrapBlazor.Server.Components.Samples.Radios": { "RadiosTitle": "Radio", @@ -3193,7 +3198,7 @@ "SelectsIsEditableIntro": "By setting IsEditable=\"true\" to make the component editable", "SelectsIsEditableDesc": "After the editable function is enabled, if the input value is not in the candidate items, the new value can be returned through the TextConvertToValueCallback callback method, and the Items data source can be updated through the OnInputChangedCallback callback to prevent the input value from being lost after the page is refreshed.", "SelectsVirtualizeTitle": "Virtualize", - "SelectsVirtualizeIntro": "Set IsVirtualize to true enable virtual scroll for larg data", + "SelectsVirtualizeIntro": "Set IsVirtualize to true enable virtual scroll for large data", "SelectsVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through Items or OnQueryAsync callback methods", "SelectsGenericTitle": "Generic", "SelectsGenericIntro": "Data source Items supports generics when using SelectedItem<TValue>", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index fe1f214d8de..53de4fbb5ea 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3024,7 +3024,12 @@ "MultiSelectOptionChangeLog": "选中项集合", "MultiSelectIsEditableTitle": "可编辑", "MultiSelectIsEditableIntro": "通过设置 IsEditable 参数，使组件可编辑", - "MultiSelectIsEditableDescription": "通过设置 EditSubmitKey 参数可以指定通过 Enter 还是 Space 进行提交" + "MultiSelectIsEditableDescription": "通过设置 EditSubmitKey 参数可以指定通过 Enter 还是 Space 进行提交", + "MultiSelectVirtualizeTitle": "虚拟滚动", + "MultiSelectVirtualizeIntro": "通过设置 IsVirtualize 参数开启组件虚拟功能特性", + "MultiSelectVirtualizeDescription": "组件虚拟滚动支持两种形式通过 Items 或者 OnQueryAsync 回调方法提供数据", + "MultiSelectsAttribute_ShowSearch": "是否显示搜索框", + "MultiSelectsAttribute_IsFixedSearch": "是否固定搜索栏" }, "BootstrapBlazor.Server.Components.Samples.Radios": { "RadiosTitle": "Radio 单选框", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 259def325b9..fc841e69e88 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.5.0-beta02 + 9.5.0-beta03 diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor b/src/BootstrapBlazor/Components/Select/MultiSelect.razor index 544c6b2e08e..dc4736af2bf 100644 --- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor +++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor @@ -53,7 +53,7 @@ { } -
+
@if (ShowSearch) {
@@ -62,6 +62,18 @@
} + @if (ShowToolbar) + { +
+ @if (ShowDefaultButtons) + { + @SelectAllText + @ReverseSelectText + @ClearText + } + @ButtonTemplate +
+ } @if (IsVirtualize) {
@@ -85,18 +97,6 @@ else {
- @if (ShowToolbar) - { -
- @if (ShowDefaultButtons) - { - @SelectAllText - @ReverseSelectText - @ClearText - } - @ButtonTemplate -
- } @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName)) { if (!string.IsNullOrEmpty(itemGroup.Key)) diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs index ff0de238e79..59b0a3597ad 100644 --- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs +++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs @@ -20,6 +20,10 @@ public partial class MultiSelect .AddClass("is-clearable", IsClearable) .Build(); + private string? MultipleDropdownMenuClassString => CssBuilder.Default(DropdownMenuClassString) + .AddClass("is-fixed-toolbar", ShowToolbar) + .Build(); + private string? EditSubmitKeyString => EditSubmitKey == EditSubmitKey.Space ? EditSubmitKey.ToDescriptionString() : null; private string? ToggleClassString => CssBuilder.Default("dropdown-toggle scroll") @@ -291,6 +295,12 @@ protected override List GetRowsByItems() return items; } + /// + /// + /// + /// + protected override bool CheckFixedSearch() => ShowToolbar ? true : base.CheckFixedSearch(); + /// /// 客户端回车回调方法 /// diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss index 0e747145d5e..8d73f41a286 100644 --- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss +++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss @@ -119,24 +119,44 @@ } } -.dropdown-menu .toolbar { - --bb-multi-select-toolbar-padding: 6px 10px; - --bb-multi-select-toolbar-button-padding: 3px 10px; - padding: var(--bb-multi-select-toolbar-padding); - white-space: nowrap; - - .btn { - padding: var(--bb-multi-select-toolbar-button-padding); - border: 1px solid var(--bs-border-color); - transition: border-color .3s linear, color .3s linear; +.dropdown-menu { + &.is-fixed-toolbar { + --bb-dropdown-max-height: 330px; - &:hover { - border: 1px solid var(--bb-border-hover-color); - color: var(--bs-primary); + .dropdown-menu-body { + max-height: calc(var(--bb-dropdown-max-height) - 48px); + overflow: auto; + } + } + + &.is-fixed-search.is-fixed-toolbar { + .dropdown-menu-body { + max-height: calc(var(--bb-dropdown-max-height) - 117px); + overflow: auto; } + } - &:not(:last-child) { - margin-inline-end: .5rem; + .toolbar { + --bb-multi-select-toolbar-padding: 0 16px 8px 16px; + --bb-multi-select-toolbar-button-padding: 3px 10px; + padding: var(--bb-multi-select-toolbar-padding); + white-space: nowrap; + border-block-end: var(--bs-border-width) solid var(--bb-select-search-border-color); + margin-block-end: var(--bb-select-search-margin-bottom); + + .btn { + padding: var(--bb-multi-select-toolbar-button-padding); + border: 1px solid var(--bs-border-color); + transition: border-color .3s linear, color .3s linear; + + &:hover { + border: 1px solid var(--bb-border-hover-color); + color: var(--bs-primary); + } + + &:not(:last-child) { + margin-inline-end: .5rem; + } } } } diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.scss b/src/BootstrapBlazor/Components/Select/Select.razor.scss index c0f526ace5e..971a71456b7 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor.scss +++ b/src/BootstrapBlazor/Components/Select/Select.razor.scss @@ -209,6 +209,13 @@ } .dropdown-menu { + &.is-fixed-search { + .dropdown-menu-body { + max-height: calc(var(--bb-dropdown-max-height) - 76px); + overflow: auto; + } + } + .dropdown-menu-search { padding: var(--bb-select-search-padding); position: relative; @@ -240,13 +247,6 @@ top: var(--bb-select-search-icon-top); color: var(--bb-select-search-icon-color); } - - &.is-fixed-search { - .dropdown-menu-body { - max-height: calc(var(--bb-dropdown-max-height) - 76px); - overflow: auto; - } - } } .select:not(.multi-select) .dropdown-toggle { diff --git a/src/BootstrapBlazor/Components/Select/SelectBase.cs b/src/BootstrapBlazor/Components/Select/SelectBase.cs index 2295ba19785..a7c5e426322 100644 --- a/src/BootstrapBlazor/Components/Select/SelectBase.cs +++ b/src/BootstrapBlazor/Components/Select/SelectBase.cs @@ -172,7 +172,7 @@ public abstract class SelectBase : PopoverSelectBase /// Gets the dropdown menu class string. /// protected string? DropdownMenuClassString => CssBuilder.Default("dropdown-menu") - .AddClass("is-fixed-search", ShowSearch && IsFixedSearch) + .AddClass("is-fixed-search", CheckFixedSearch()) .Build(); /// @@ -243,4 +243,10 @@ protected virtual async Task OnClearValue() } CurrentValue = default; } + + /// + /// Gets whether to show the search box. + /// + /// + protected virtual bool CheckFixedSearch() => ShowSearch && IsFixedSearch; } diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss index cd444608d53..c0aca2d525e 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss @@ -514,7 +514,7 @@ $bb-dropdown-link-pre-active-bg: #498ff7; $bb-select-focus-shadow: none; $bb-select-padding-right: 2.25rem; $bb-select-padding: 6px 0.75rem; -$bb-select-search-padding: 7px 10px; +$bb-select-search-padding: .5rem 1rem; $bb-select-search-margin-bottom: .5rem; $bb-select-search-border-color: var(--bs-border-color); $bb-select-search-padding-right: 30px; diff --git a/test/UnitTest/Components/MultiSelectTest.cs b/test/UnitTest/Components/MultiSelectTest.cs index 6092f33e02d..6aea3777fae 100644 --- a/test/UnitTest/Components/MultiSelectTest.cs +++ b/test/UnitTest/Components/MultiSelectTest.cs @@ -239,8 +239,8 @@ public void ButtonTemplate_Ok() pb.Add(a => a.ButtonTemplate, builder => builder.AddContent(0, new MarkupString(""))); }); - // 没有数据不显示 Toolbar - Assert.DoesNotContain("btn-test", cut.Markup); + // 没有数据也显示 Toolbar + Assert.Contains("btn-test", cut.Markup); cut.SetParametersAndRender(pb => {