feat(Split): add ShowBarHandle parameter (#4175)

* feat: add ShowBarHandle parameter

* test: 增加单元测试

* doc: 增加 ShowBarHandle 参数文档

* feat: 增加 ShowBarHandle 参数

* test: 更新单元测试

src/BootstrapBlazor.Server/Components/Samples/Splits.razor

@@ -6,8 +6,12 @@
 <DemoBlock Title="@Localizer["SplitsNormalTitle"]"
  Introduction="@Localizer["SplitsNormalIntro"]"
  Name="Normal">
+ <section ignore class="d-flex align-items-center">
+ <Switch Value="_showBarHandle" OnValueChanged="OnShowBarHandle" class="w-auto"></Switch>
+ <div class="ms-3">@_barHandleText</div>
+ </section>
  <div class="border split-demo split-demo-horizontal">
- <Split>
+ <Split ShowBarHandle="_showBarHandle">
  <FirstPaneTemplate>
  <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
  </FirstPaneTemplate>

src/BootstrapBlazor.Server/Components/Samples/Splits.razor.cs

@@ -9,6 +9,27 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public sealed partial class Splits
 {
+ private bool _showBarHandle = true;
+
+ private string? _barHandleText;
+
+ /// <summary>
+ /// <inheritdoc/>
+ /// </summary>
+ protected override void OnParametersSet()
+ {
+ base.OnParametersSet();
+ _barHandleText = _showBarHandle ? Localizer["SplitsBarHandleShow"] : Localizer["SplitsBarHandleHide"];
+ }
+
+ private Task OnShowBarHandle(bool v)
+ {
+ _showBarHandle = v;
+ _barHandleText = _showBarHandle ? Localizer["SplitsBarHandleShow"] : Localizer["SplitsBarHandleHide"];
+ StateHasChanged();
+ return Task.CompletedTask;
+ }
+
  /// <summary>
  /// 获得属性方法
  /// </summary>
@@ -24,6 +45,14 @@ private AttributeItem[] GetAttributes() =>
  DefaultValue = "false"
  },
  new()
+ {
+ Name = "ShowBarHandle",
+ Description = Localizer["SplitsShowBarHandle"],
+ Type = "bool",
+ ValueList = "true|false",
+ DefaultValue = "true"
+ },
+ new()
  {
  Name = "Basis",
  Description = Localizer["SplitsBasis"],

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

@@ -1771,7 +1771,10 @@
  "SplitsFirstPanelTemplate": "First pane template",
  "SplitsSecondPanelTemplate": "Second pane template",
  "SplitsIsCollapsible": "Whether to expand or collapse the split view",
- "SplitsIsKeepOriginalSize": "Whether to keep the original size when restoring after collapsed"
+ "SplitsIsKeepOriginalSize": "Whether to keep the original size when restoring after collapsed",
+ "SplitsShowBarHandle": "Whether to display the drag bar",
+ "SplitsBarHandleShow": "Bar handle shown",
+ "SplitsBarHandleHide": "Bar handle hidden"
  },
  "BootstrapBlazor.Server.Components.Samples.Dropdowns": {
  "Title": "Dropdown",

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

@@ -1771,7 +1771,10 @@
  "SplitsFirstPanelTemplate": "第一个窗格模板",
  "SplitsSecondPanelTemplate": "第二个窗格模板",
  "SplitsIsCollapsible": "是否可以展开收起面板",
- "SplitsIsKeepOriginalSize": "折叠后恢复时是否保持原始大小"
+ "SplitsIsKeepOriginalSize": "折叠后恢复时是否保持原始大小",
+ "SplitsShowBarHandle": "是否显示拖动条",
+ "SplitsBarHandleShow": "显示拖动栏",
+ "SplitsBarHandleHide": "隐藏拖动栏"
  },
  "BootstrapBlazor.Server.Components.Samples.Dropdowns": {
  "Title": "Dropdown 下拉菜单",

src/BootstrapBlazor/Components/Split/Split.razor

@@ -14,10 +14,13 @@
  {
  <button tabindex="-1" type="button" class="split-bar-arrow split-bar-arrow-left"></button>
  }
- <div class="split-bar-handler">
- <div></div>
- <div></div>
- </div>
+ @if (ShowBarHandle)
+ {
+ <div class="split-bar-handler">
+ <div></div>
+ <div></div>
+ </div>
+ }
  @if (IsCollapsible)
  {
  <button tabindex="-1" type="button" class="split-bar-arrow split-bar-arrow-right"></button>

src/BootstrapBlazor/Components/Split/Split.razor.cs

@@ -30,6 +30,12 @@ public sealed partial class Split
  [Parameter]
  public bool IsCollapsible { get; set; }
 
+ /// <summary>
+ /// 获取 是否显示拖动条 默认 true
+ /// </summary>
+ [Parameter]
+ public bool ShowBarHandle { get; set; } = true;
+
  /// <summary>
  /// 获得/设置 开启 <see cref="IsCollapsible"/> 后，恢复时是否保持原始大小 默认 true
  /// </summary>

test/UnitTest/Components/PopConfirmButtonTest.cs

@@ -289,6 +289,46 @@ public void TooltipText_Ok()
  cut.Contains("data-bs-original-title=\"pop-tooltip\"");
  }
 
+ [Fact]
+ public void Placement_Ok()
+ {
+ var cut = Context.RenderComponent<PopConfirmButton>(pb =>
+ {
+ pb.Add(a => a.Placement, Placement.LeftStart);
+ });
+ cut.DoesNotContain("data-bs-placement");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.Placement, Placement.Auto);
+ });
+ cut.DoesNotContain("data-bs-placement");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.Placement, Placement.Top);
+ });
+ cut.Contains("data-bs-placement=\"top\"");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.Placement, Placement.Right);
+ });
+ cut.Contains("data-bs-placement=\"right\"");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.Placement, Placement.Bottom);
+ });
+ cut.Contains("data-bs-placement=\"bottom\"");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.Placement, Placement.Left);
+ });
+ cut.Contains("data-bs-placement=\"left\"");
+ }
+
  public class MockContent : ComponentBase
  {
  [CascadingParameter(Name = "PopoverConfirmButtonCloseAsync"), NotNull]

test/UnitTest/Components/SplitTest.cs

@@ -19,6 +19,7 @@ public void SplitStyle_Ok()
  Assert.Contains("I am Pane1", cut.Markup);
  Assert.Contains("I am Pane2", cut.Markup);
  Assert.Contains("is-vertical", cut.Markup);
+ Assert.Contains("split-bar-handler", cut.Markup);
 
  cut.SetParametersAndRender(pb =>
  {
@@ -33,6 +34,19 @@ public void SplitStyle_Ok()
  Assert.Contains("tag", cut.Markup);
  }
 
+ [Fact]
+ public void ShowBarHandle_Ok()
+ {
+ var cut = Context.RenderComponent<Split>(pb =>
+ {
+ pb.Add(b => b.FirstPaneTemplate, RenderSplitView("I am Pane1"));
+ pb.Add(b => b.SecondPaneTemplate, RenderSplitView("I am Pane2"));
+ pb.Add(b => b.ShowBarHandle, false);
+ pb.Add(b => b.IsKeepOriginalSize, true);
+ });
+ Assert.DoesNotContain("split-bar-handler", cut.Markup);
+ }
+
  [Fact]
  public void IsCollapsible_Ok()
  {