diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index b0ffbb83221..417a370ca4e 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.11.3-beta05 + 9.11.3-beta06 diff --git a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs index e2ef7309c59..c88a40be348 100644 --- a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs +++ b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.cs @@ -191,17 +191,31 @@ public partial class Transfer [Parameter] public string? Height { get; set; } + /// + /// 获得/设置 是否为换行模式 默认 false 不换行 + /// + [Parameter] + public bool IsWrapItem { get; set; } + + /// + /// 获得/设置 候选项宽度 默认 null 未设置 + /// + [Parameter] + public string? ItemWidth { get; set; } + [Inject] [NotNull] private IIconTheme? IconTheme { get; set; } - private string? ClassString => CssBuilder.Default("transfer") + private string? ClassString => CssBuilder.Default("bb-transfer") .AddClass("has-height", !string.IsNullOrEmpty(Height)) + .AddClass("wrap-item", IsWrapItem) .AddClassFromAttributes(AdditionalAttributes) .Build(); private string? StyleString => CssBuilder.Default() .AddClass($"--bb-transfer-height: {Height};", !string.IsNullOrEmpty(Height)) + .AddClass($"--bb-transfer-panel-item-width: {ItemWidth};", !string.IsNullOrEmpty(ItemWidth)) .AddStyleFromAttributes(AdditionalAttributes) .Build(); diff --git a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss index 98f344ba0a2..d09ab83cfdc 100644 --- a/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss +++ b/src/BootstrapBlazor/Components/Transfer/Transfer.razor.scss @@ -1,13 +1,12 @@ @use "../../wwwroot/scss/variables" as *; -.transfer { +.bb-transfer { --bb-transfer-panel-header-height: #{$bb-transfer-panel-header-height}; --bb-transfer-panel-header-padding: #{$bb-transfer-panel-header-padding}; --bb-transfer-panel-body-padding: #{$bb-transfer-panel-body-padding}; --bb-transfer-panel-list-max-height: #{$bb-transfer-panel-list-max-height}; --bb-transfer-panel-list-min-height: #{$bb-transfer-panel-list-min-height}; --bb-transfer-panel-item-padding: #{$bb-transfer-panel-item-padding}; - --bb-transfer-panel-item-margin: #{$bb-transfer-panel-item-margin}; --bb-transfer-panel-item-width: #{$bb-transfer-panel-item-width}; --bb-transfer-buttons-padding: #{$bb-transfer-buttons-padding}; --bb-transfer-filter-focus-border-color: #{$bb-transfer-filter-focus-border-color}; @@ -27,6 +26,14 @@ } } } + + &.wrap-item { + .transfer-panel-item .form-check-input + .form-check-label { + white-space: normal; + text-overflow: clip; + overflow: visible; + } + } } .transfer-panel { @@ -62,15 +69,20 @@ .transfer-panel-list { max-height: var(--bb-transfer-panel-list-max-height); min-height: var(--bb-transfer-panel-list-min-height); + display: flex; + flex-wrap: wrap; } .transfer-panel-item { border-radius: var(--bs-border-radius); padding: var(--bb-transfer-panel-item-padding); - margin: var(--bb-transfer-panel-item-margin); width: var(--bb-transfer-panel-item-width); } +.transfer-panel-item .form-check-input + .form-check-label { + white-space: var(--bb-transfer-panel-item-wrap, nowrap); +} + .transfer-buttons { display: flex; align-items: center; diff --git a/src/BootstrapBlazor/wwwroot/scss/variables.scss b/src/BootstrapBlazor/wwwroot/scss/variables.scss index 5680fb985fb..0666612141a 100644 --- a/src/BootstrapBlazor/wwwroot/scss/variables.scss +++ b/src/BootstrapBlazor/wwwroot/scss/variables.scss @@ -672,7 +672,6 @@ $bb-transfer-panel-body-padding: 0; $bb-transfer-panel-list-max-height: 200px; $bb-transfer-panel-list-min-height: auto; $bb-transfer-panel-item-padding: 0.25rem 0.75rem; -$bb-transfer-panel-item-margin: 0 .5rem .25rem 0; $bb-transfer-panel-item-width: 160px; $bb-transfer-buttons-padding: 0 30px; $bb-transfer-filter-focus-border-color: #409eff; diff --git a/test/UnitTest/Components/TransferTest.cs b/test/UnitTest/Components/TransferTest.cs index a7982c9afcc..4939a0e1c60 100644 --- a/test/UnitTest/Components/TransferTest.cs +++ b/test/UnitTest/Components/TransferTest.cs @@ -12,7 +12,7 @@ public void Items_Ok() { // 未设置 Items 为空 var cut = Context.RenderComponent>(); - cut.Contains("class=\"transfer\""); + cut.Contains("class=\"bb-transfer\""); // 设置 Items cut.SetParametersAndRender(pb => @@ -260,4 +260,47 @@ public void Template_Ok() cut.Contains("Right-ItemTemplate-Test2"); cut.Contains("Right-ItemTemplate-Test4"); } + + [Fact] + public void IsWrapItem_Ok() + { + var cut = Context.RenderComponent>(pb => + { + pb.Add(a => a.Value, "2"); + pb.Add(a => a.Items, new List() + { + new("1", "Test1 with a very long text"), + new("2", "Test2 with a very long text") + }); + pb.Add(a => a.IsWrapItem, false); + }); + cut.DoesNotContain("wrap-item"); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.IsWrapItem, true); + }); + cut.Contains("wrap-item"); + } + + [Fact] + public void ItemWidth_Ok() + { + var cut = Context.RenderComponent>(pb => + { + pb.Add(a => a.Value, "2"); + pb.Add(a => a.Items, new List() + { + new("1", "Test1 with a very long text"), + new("2", "Test2 with a very long text") + }); + }); + cut.DoesNotContain("--bb-transfer-panel-item-width"); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.ItemWidth, "160px"); + }); + cut.Contains("--bb-transfer-panel-item-width: 160px;"); + } }