feat(split): support pane collapsible

src/BootstrapBlazor/Components/Split/Split.razor

@@ -3,21 +3,32 @@
 @attribute [BootstrapModuleAutoLoader]
 
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" role="group">
-    <div class="@WrapperClassString">
+    <div class="@WrapperClassString" status="@GetPaneClassStatus()">
         <div class="split-pane split-left" style="@StyleString">
             @FirstPaneTemplate
         </div>
         <div class="split-pane split-bar">
-            <div class="split-trigger">
-                <i class="split-trigger-bar"></i>
-                <i class="split-trigger-bar"></i>
-                <i class="split-trigger-bar"></i>
-                <i class="split-trigger-bar"></i>
-                <i class="split-trigger-bar"></i>
-                <i class="split-trigger-bar"></i>
-                <i class="split-trigger-bar"></i>
-                <i class="split-trigger-bar"></i>
-            </div>
+            @if (IsShowFirstPaneCollapseSwitch)
+            {
+                <span class="split-first-pane-collapse-switch" onclick="@(()=>PaneCollapseSwitch(FirstPane))"></span>
+            }
+            @if (IsResizable && !IsCollapsed)
+            {
+                <div class="split-trigger">
+                    <i class="split-trigger-bar"></i>
+                    <i class="split-trigger-bar"></i>
+                    <i class="split-trigger-bar"></i>
+                    <i class="split-trigger-bar"></i>
+                    <i class="split-trigger-bar"></i>
+                    <i class="split-trigger-bar"></i>
+                    <i class="split-trigger-bar"></i>
+                    <i class="split-trigger-bar"></i>
+                </div>
+            }
+            @if (IsShowSecondPaneCollapseSwitch)
+            {
+                <span class="split-second-pane-collapse-switch" onclick="@(()=>PaneCollapseSwitch(SecondPane))"></span>
+            }
         </div>
         <div class="split-pane split-right" style="flex: 1;">
             @SecondPaneTemplate

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

@@ -2,13 +2,21 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
+using System.ComponentModel;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
 /// 
 /// </summary>
 public sealed partial class Split
 {
+    private const string FirstPane = "FirstPane";
+    private const string SecondPane = "SecondPane";
+    private const string FirstPaneCollapsed = "first-pane-collapsed";
+    private const string SecondPaneCollapsed = "second-pane-collapsed";
+    private const string BothPaneExpand = "both-pane-expand";
+
     /// <summary>
     /// 获得 组件样式
     /// </summary>
@@ -30,6 +38,26 @@ public sealed partial class Split
         .AddClass($"flex-basis: {Basis.ConvertToPercentString()};")
         .Build();
 
+    /// <summary>
+    /// 获取/设置 当前折叠的窗格（FirstPane/SecondPane）
+    /// </summary>
+    private string? CollapsedPane { get; set; }
+
+    /// <summary>
+    /// 获取 是否显示第一个窗格的折叠/展开按钮
+    /// </summary>
+    private bool IsShowFirstPaneCollapseSwitch => FirstPaneCollapsible && CollapsedPane != SecondPane;
+
+    /// <summary>
+    /// 获取 是否显示第二个窗格的折叠/展开按钮
+    /// </summary>
+    private bool IsShowSecondPaneCollapseSwitch => SecondPaneCollapsible && CollapsedPane != FirstPane;
+
+    /// <summary>
+    /// 获取 是否处于折叠状态
+    /// </summary>
+    private bool IsCollapsed => !string.IsNullOrEmpty(CollapsedPane);
+
     /// <summary>
     /// 获得/设置 是否垂直分割
     /// </summary>
@@ -53,4 +81,58 @@ public sealed partial class Split
     /// </summary>
     [Parameter]
     public RenderFragment? SecondPaneTemplate { get; set; }
+
+    /// <summary>
+    /// 获取/设置 是否可以拖动改变大小
+    /// </summary>
+    [Parameter]
+    public bool IsResizable { get; set; } = true;
+
+    /// <summary>
+    /// 获取/设置 第一个窗格是否可关闭
+    /// </summary>
+    [Parameter]
+    public bool FirstPaneCollapsible { get; set; }
+
+    /// <summary>
+    /// 获取/设置 第二个窗格是否可关闭
+    /// </summary>
+    [Parameter]
+    public bool SecondPaneCollapsible { get; set; }
+
+    /// <summary>
+    /// 折叠/展开窗格
+    /// </summary>
+    /// <param name="pane"></param>
+    private void PaneCollapseSwitch(string pane)
+    {
+        if (CollapsedPane == pane)
+        {
+            CollapsedPane = null;
+        }
+        else
+        {
+            CollapsedPane = pane;
+        }
+    }
+
+    /// <summary>
+    /// 获取窗格状态
+    /// </summary>
+    /// <returns></returns>
+    private string GetPaneClassStatus()
+    {
+        if (CollapsedPane == FirstPane)
+        {
+            return FirstPaneCollapsed;
+        }
+        else if (CollapsedPane == SecondPane)
+        {
+            return SecondPaneCollapsed;
+        }
+        else
+        {
+            return BothPaneExpand;
+        }
+    }
 }

src/BootstrapBlazor/Components/Split/Split.razor.js

@@ -26,6 +26,10 @@ export function init(id) {
     split.splitBar = splitBar;
     Drag.drag(splitBar,
         e => {
+            const isResizable = el.getElementsByClassName('split-trigger').length > 0;
+            if (isResizable === false) {
+                return;
+            }
             splitWidth = el.offsetWidth
             splitHeight = el.offsetHeight
             if (isVertical) {
@@ -40,6 +44,10 @@ export function init(id) {
             showMask(splitLeft, splitRight);
         },
         e => {
+            const isResizable = el.getElementsByClassName('split-trigger').length > 0;
+            if (isResizable === false) {
+                return;
+            }
             if (isVertical) {
                 const eventY = e.clientY || e.changedTouches[0].clientY
                 newVal = Math.ceil((eventY - originY) * 100 / splitHeight) + curVal

src/BootstrapBlazor/Components/Split/Split.razor.scss

@@ -52,6 +52,56 @@
         background-color: var(--bs-body-bg);
     }
 
+    .split-wrapper .split-first-pane-collapse-switch,
+    .split-wrapper .split-second-pane-collapse-switch {
+        cursor: pointer;
+        color: var(--bs-border-color);
+        font-size: 8px;
+        margin-left: 3px;
+        margin-top: 3px;
+    }
+
+    .split-wrapper.is-horizontal .split-first-pane-collapse-switch,
+    .split-wrapper.is-horizontal .split-second-pane-collapse-switch {
+        cursor: pointer;
+        color: var(--bs-border-color);
+        font-size: 8px;
+        margin-left: 0;
+        margin-top: 3px;
+    }
+
+    .split-wrapper .split-first-pane-collapse-switch:before {
+        content: '\025B2';
+    }
+
+    .split-wrapper[status="first-pane-collapsed"] .split-first-pane-collapse-switch:before {
+        content: '\025BC';
+    }
+
+    .split-wrapper .split-second-pane-collapse-switch:before {
+        content: '\025BC';
+    }
+
+    .split-wrapper[status="second-pane-collapsed"] .split-second-pane-collapse-switch:before {
+        content: '\025B2';
+    }
+
+    .split-wrapper.is-horizontal .split-first-pane-collapse-switch:before {
+        content: '\025C0';
+    }
+
+    .split-wrapper.is-horizontal[status="first-pane-collapsed"] .split-first-pane-collapse-switch:before {
+        content: '\025B6';
+    }
+
+    .split-wrapper.is-horizontal .split-second-pane-collapse-switch:before {
+        content: '\025B6';
+    }
+
+    .split-wrapper.is-horizontal[status="second-pane-collapsed"] .split-second-pane-collapse-switch:before {
+        content: '\025C0';
+    }
+
     .split-trigger {
         font-size: 0;
         display: inline-block;
@@ -66,6 +116,7 @@
     }
 
     .split-wrapper.is-horizontal > .split-bar {
+        flex-direction: column;
         width: 6px;
         height: 100%;
         border: 1px solid var(--bs-border-color);
@@ -80,4 +131,26 @@
             margin-top: 3px;
         }
     }
+
+    .split-wrapper[status="first-pane-collapsed"] .split-bar:hover, &.dragging > .split-wrapper[status="first-pane-collapsed"] > .split-bar,
+    .split-wrapper[status="second-pane-collapsed"] .split-bar:hover, &.dragging > .split-wrapper[status="second-pane-collapsed"] > .split-bar {
+        background-color: transparent;
+        cursor: default;
+    }
+
+    .split-wrapper[status="first-pane-collapsed"] .split-left {
+        flex: 0 1 0% !important;
+        overflow: hidden !important;
+        display: block !important;
+    }
+
+    .split-wrapper[status="second-pane-collapsed"] .split-left {
+        flex: 1 !important;
+    }
+
+    .split-wrapper[status="second-pane-collapsed"] .split-right {
+        flex: 0 1 0% !important;
+        overflow: hidden !important;
+        display: block !important;
+    }
 }

test/UnitTest/Components/SplitTest.cs

@@ -14,6 +14,9 @@ public void SplitStyle_Ok()
             pb.Add(b => b.FirstPaneTemplate, BuildeComponent("I am Pane1"));
             pb.Add(b => b.SecondPaneTemplate, BuildeComponent("I am Pane2"));
             pb.Add(b => b.IsVertical, true);
+            pb.Add(b => b.IsResizable, true);
+            pb.Add(b => b.FirstPaneCollapsible, true);
+            pb.Add(b => b.SecondPaneCollapsible, true);
         });
         Assert.Contains("I am Pane1", cut.Markup);
         Assert.Contains("I am Pane2", cut.Markup);
@@ -30,12 +33,54 @@ public void SplitStyle_Ok()
             pb.Add(b => b.AdditionalAttributes, new Dictionary<string, object>() { ["tag"] = "tagok" });
         });
         Assert.Contains("tagok", cut.Markup);
+    }
 
-        RenderFragment BuildeComponent(string name = "I am Pane1") => builder =>
+    [Fact]
+    public void SplitCollapsible_Ok()
+    {
+        var cut = Context.RenderComponent<Split>(pb =>
         {
-            builder.OpenElement(1, "div");
-            builder.AddContent(2, name);
-            builder.CloseElement();
-        };
+            pb.Add(b => b.FirstPaneTemplate, BuildeComponent("I am Pane1"));
+            pb.Add(b => b.SecondPaneTemplate, BuildeComponent("I am Pane2"));
+            pb.Add(b => b.FirstPaneCollapsible, true);
+            pb.Add(b => b.SecondPaneCollapsible, true);
+        });
+
+        Assert.Contains("split-first-pane-collapse-switch", cut.Markup);
+        Assert.Contains("split-trigger", cut.Markup);
+        Assert.Contains("split-second-pane-collapse-switch", cut.Markup);
+
+        cut.Find(".split-first-pane-collapse-switch").Click();
+        Assert.Contains("first-pane-collapsed", cut.Markup);
+        cut.Find(".split-first-pane-collapse-switch").Click();
+        Assert.Contains("both-pane-expand", cut.Markup);
+
+        cut.Find(".split-second-pane-collapse-switch").Click();
+        Assert.Contains("second-pane-collapsed", cut.Markup);
+        cut.Find(".split-second-pane-collapse-switch").Click();
+        Assert.Contains("both-pane-expand", cut.Markup);
     }
+
+    [Fact]
+    public void SplitFixedPane_Ok()
+    {
+        var cut = Context.RenderComponent<Split>(pb =>
+        {
+            pb.Add(b => b.FirstPaneTemplate, BuildeComponent("I am Pane1"));
+            pb.Add(b => b.SecondPaneTemplate, BuildeComponent("I am Pane2"));
+            pb.Add(b => b.IsResizable, false);
+            pb.Add(b => b.FirstPaneCollapsible, false);
+            pb.Add(b => b.SecondPaneCollapsible, false);
+        });
+        Assert.DoesNotContain("split-first-pane-collapse-switch", cut.Markup);
+        Assert.DoesNotContain("split-trigger", cut.Markup);
+        Assert.DoesNotContain("split-second-pane-collapse-switch", cut.Markup);
+    }
+
+    private static RenderFragment BuildeComponent(string name = "I am Pane1") => builder =>
+    {
+        builder.OpenElement(1, "div");
+        builder.AddContent(2, name);
+        builder.CloseElement();
+    };
 }