diff --git a/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor b/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor index 6bcd32ca561..8b9b450ca11 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor @@ -6,7 +6,29 @@ - +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ diff --git a/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor.cs index b12c088ae4b..154e18bd63b 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Transfers.razor.cs @@ -43,6 +43,10 @@ public sealed partial class Transfers : ComponentBase private IEnumerable SelectedValue { get; set; } = Enumerable.Empty(); + private bool _isWrapItem = true; + private bool _isWrapItemText = true; + private string? _itemWidth = "160px"; + private Task OnSelectedItemsChanged(IEnumerable items) { Logger.Log(string.Join(" ", items.Select(i => i.Text))); @@ -59,15 +63,17 @@ protected override async Task OnInitializedAsync() // 模拟异步加载数据源 await Task.Delay(100); - Items = GeneratorItems(); + var items = GeneratorItems().ToList(); + items[1].Text = "我是一个超级长的专门为了测试溢出折行功能的候选项"; + Items = items; Items1 = GeneratorItems(); Items2 = GeneratorItems(); - Items3 = Enumerable.Range(1, 15).Select(i => new SelectedItem() + Items3 = [.. Enumerable.Range(1, 15).Select(i => new SelectedItem() { Text = $"{Localizer["Backup"]} {i:d2}", Value = i.ToString() - }).ToList(); + })]; Items4 = GeneratorItems(); Items5 = GeneratorItems(); diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 5829eb8bb71..31e9f235488 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3219,7 +3219,7 @@ "PlaceHolder": "Please enter", "TransfersTitle": "Transfer", "TransferNormalTitle": "Basic usage", - "TransferNormalIntro": "Searchable", + "TransferNormalIntro": "Select the candidate items on the left and click the move button to move them to the right", "TransferCustomerTitle": "Customizable", "TransferCustomerIntro": "You can customize the list title copy, button copy, rendering function of data items, check status copy at the bottom of the list, content area at the bottom of the list, and so on.", "TransferSearchTitle": "Searchable", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index a9b89d6d9ec..194965c268a 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3219,7 +3219,7 @@ "PlaceHolder": "请输入", "TransfersTitle": "Transfer 穿梭框", "TransferNormalTitle": "基础用法", - "TransferNormalIntro": "可搜索", + "TransferNormalIntro": "左边勾选候选项点击移动按钮将候选项移动到右侧", "TransferCustomerTitle": "可自定义", "TransferCustomerIntro": "可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。", "TransferSearchTitle": "可搜索", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 4a3aaa63d1e..1716167347c 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,11 +1,11 @@  - 9.12.1-beta01 + 9.12.1-beta02 - 10.0.0-rc.2.2.1 + 10.0.0-rc.2.2.2 diff --git a/src/BootstrapBlazor/Components/Transfer/Transfer.razor b/src/BootstrapBlazor/Components/Transfer/Transfer.razor index 31385aa2b50..98aa9c2d8a2 100644 --- a/src/BootstrapBlazor/Components/Transfer/Transfer.razor +++ b/src/BootstrapBlazor/Components/Transfer/Transfer.razor @@ -13,11 +13,13 @@ HeaderTemplate="LeftHeaderTemplate!" ItemTemplate="LeftItemTemplate!">
- - diff --git a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs index c88a40be348..2b5b3f4713d 100644 --- a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs +++ b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs @@ -192,10 +192,10 @@ public partial class Transfer public string? Height { get; set; } /// - /// 获得/设置 是否为换行模式 默认 false 不换行 + /// 获得/设置 候选项是否为换行模式 默认 false 不换行 /// [Parameter] - public bool IsWrapItem { get; set; } + public bool IsWrapItem { get; set; } = true; /// /// 获得/设置 候选项宽度 默认 null 未设置 @@ -203,6 +203,12 @@ public partial class Transfer [Parameter] public string? ItemWidth { get; set; } + /// + /// 获得/设置 候选项文本是否为换行 默认 false 不换行 + /// + [Parameter] + public bool IsWrapItemText { get; set; } + [Inject] [NotNull] private IIconTheme? IconTheme { get; set; } @@ -210,6 +216,7 @@ public partial class Transfer private string? ClassString => CssBuilder.Default("bb-transfer") .AddClass("has-height", !string.IsNullOrEmpty(Height)) .AddClass("wrap-item", IsWrapItem) + .AddClass("wrap-item-text", IsWrapItemText) .AddClassFromAttributes(AdditionalAttributes) .Build(); diff --git a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss index d09ab83cfdc..5b8a832ce9d 100644 --- a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss +++ b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss @@ -28,12 +28,29 @@ } &.wrap-item { + .transfer-panel-list { + flex-direction: row; + flex-wrap: wrap; + + .transfer-panel-item { + width: var(--bb-transfer-panel-item-width); + } + } + } + + &.wrap-item-text { .transfer-panel-item .form-check-input + .form-check-label { white-space: normal; text-overflow: clip; overflow: visible; } } + + .transfer-panel-item .form-check-input + .form-check-label { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } } .transfer-panel { @@ -70,13 +87,16 @@ max-height: var(--bb-transfer-panel-list-max-height); min-height: var(--bb-transfer-panel-list-min-height); display: flex; - flex-wrap: wrap; + flex-direction: column; + + .form-check { + min-height: unset; + } } .transfer-panel-item { border-radius: var(--bs-border-radius); padding: var(--bb-transfer-panel-item-padding); - width: var(--bb-transfer-panel-item-width); } .transfer-panel-item .form-check-input + .form-check-label { diff --git a/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor b/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor index 512a0be2ac8..fa6fd97ae75 100644 --- a/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor +++ b/src/BootstrapBlazor/Components/Transfer/TransferPanel.razor @@ -17,7 +17,8 @@ @if (ShowSearch) {
- + @@ -30,8 +31,8 @@ { var state = item.Active ? CheckboxState.Checked : CheckboxState.UnChecked; + DisplayText="@item.Text" Value="item" ShowAfterLabel="true" ShowLabel="false" + State="@state" OnStateChanged="@OnStateChanged"> } else { diff --git a/test/UnitTest/Components/TransferTest.cs b/test/UnitTest/Components/TransferTest.cs index 4939a0e1c60..48543206461 100644 --- a/test/UnitTest/Components/TransferTest.cs +++ b/test/UnitTest/Components/TransferTest.cs @@ -12,8 +12,20 @@ public void Items_Ok() { // 未设置 Items 为空 var cut = Context.RenderComponent>(); + cut.Contains("class=\"bb-transfer wrap-item\""); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.IsWrapItem, false); + }); cut.Contains("class=\"bb-transfer\""); + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.IsWrapItemText, true); + }); + cut.Contains("class=\"bb-transfer wrap-item-text\""); + // 设置 Items cut.SetParametersAndRender(pb => {