feat(split): support pane collapsible

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

@@ -3,73 +3,93 @@
 
 <h3>@Localizer["SplitsTitle"]</h3>
 
-<div>
-    <DemoBlock Title="@Localizer["SplitsNormalTitle"]"
-               Introduction="@Localizer["SplitsNormalIntro"]"
-               Name="Normal">
-        <div class="border split-demo split-demo-horizontal">
-            <Split>
-                <FirstPaneTemplate>
-                    <div class="d-flex justify-content-center align-items-center h-100"></div>
-                </FirstPaneTemplate>
-                <SecondPaneTemplate>
-                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
-                </SecondPaneTemplate>
-            </Split>
-        </div>
-    </DemoBlock>
+<DemoBlock Title="@Localizer["SplitsNormalTitle"]"
+           Introduction="@Localizer["SplitsNormalIntro"]"
+           Name="Normal">
+    <div class="border split-demo split-demo-horizontal">
+        <Split>
+            <FirstPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
+            </FirstPaneTemplate>
+            <SecondPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
+            </SecondPaneTemplate>
+        </Split>
+    </div>
+</DemoBlock>
 
-    <DemoBlock Title="@Localizer["SplitsPercentTitle"]"
-               Introduction="@Localizer["SplitsPercentIntro"]"
-               Name="Basis">
-        <div class="border split-demo split-demo-horizontal">
-            <Split Basis="40%">
-                <FirstPaneTemplate>
-                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
-                </FirstPaneTemplate>
-                <SecondPaneTemplate>
-                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
-                </SecondPaneTemplate>
-            </Split>
-        </div>
-    </DemoBlock>
+<DemoBlock Title="@Localizer["SplitsPercentTitle"]"
+           Introduction="@Localizer["SplitsPercentIntro"]"
+           Name="Basis">
+    <div class="border split-demo split-demo-horizontal">
+        <Split Basis="40%">
+            <FirstPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
+            </FirstPaneTemplate>
+            <SecondPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
+            </SecondPaneTemplate>
+        </Split>
+    </div>
+</DemoBlock>
 
-    <DemoBlock Title="@Localizer["SplitsVerticalTitle"]"
-               Introduction="@Localizer["SplitsVerticalIntro"]"
-               Name="IsVertical">
-        <div class="border split-demo">
-            <Split IsVertical="true">
-                <FirstPaneTemplate>
-                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel3"]</div>
-                </FirstPaneTemplate>
-                <SecondPaneTemplate>
-                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel4"]</div>
-                </SecondPaneTemplate>
-            </Split>
-        </div>
-    </DemoBlock>
+<DemoBlock Title="@Localizer["SplitsVerticalTitle"]"
+           Introduction="@Localizer["SplitsVerticalIntro"]"
+           Name="IsVertical">
+    <div class="border split-demo">
+        <Split IsVertical="true">
+            <FirstPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel3"]</div>
+            </FirstPaneTemplate>
+            <SecondPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel4"]</div>
+            </SecondPaneTemplate>
+        </Split>
+    </div>
+</DemoBlock>
 
-    <DemoBlock Title="@Localizer["SplitsNestedTitle"]"
-               Introduction="@Localizer["SplitsNestedIntro"]"
-               Name="Nested">
-        <div class="border split-demo">
-            <Split>
-                <FirstPaneTemplate>
-                    <Split IsVertical="true">
-                        <FirstPaneTemplate>
-                            <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel5"]</div>
-                        </FirstPaneTemplate>
-                        <SecondPaneTemplate>
-                            <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel6"]</div>
-                        </SecondPaneTemplate>
-                    </Split>
-                </FirstPaneTemplate>
-                <SecondPaneTemplate>
-                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel7"]</div>
-                </SecondPaneTemplate>
-            </Split>
-        </div>
-    </DemoBlock>
-</div>
+<DemoBlock Title="@Localizer["SplitsNestedTitle"]"
+           Introduction="@Localizer["SplitsNestedIntro"]"
+           Name="Nested">
+    <div class="border split-demo">
+        <Split>
+            <FirstPaneTemplate>
+                <Split IsVertical="true">
+                    <FirstPaneTemplate>
+                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel5"]</div>
+                    </FirstPaneTemplate>
+                    <SecondPaneTemplate>
+                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel6"]</div>
+                    </SecondPaneTemplate>
+                </Split>
+            </FirstPaneTemplate>
+            <SecondPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel7"]</div>
+            </SecondPaneTemplate>
+        </Split>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["SplitsCollapsibleTitle"]"
+           Introduction="@Localizer["SplitsCollapsibleIntro"]"
+           Name="Collapsible">
+    <div class="border split-demo">
+        <Split IsCollapsible="true">
+            <FirstPaneTemplate>
+                <Split IsVertical="true" IsCollapsible="true">
+                    <FirstPaneTemplate>
+                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel8"]</div>
+                    </FirstPaneTemplate>
+                    <SecondPaneTemplate>
+                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel9"]</div>
+                    </SecondPaneTemplate>
+                </Split>
+            </FirstPaneTemplate>
+            <SecondPaneTemplate>
+                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel10"]</div>
+            </SecondPaneTemplate>
+        </Split>
+    </div>
+</DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

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

@@ -46,6 +46,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "RenderFragment",
             ValueList = " — ",
             DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "IsCollapsible",
+            Description = Localizer["SplitsIsCollapsible"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
         }
     ];
 }

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

@@ -1,4 +1,4 @@
-::deep.split-demo {
+split-demo {
     height: 200px;
     width: 240px;
     border-color: rgba(0,0,0,.125);
@@ -10,12 +10,12 @@
 }
 
 @media (min-width: 568px) {
-    ::deep .split-demo {
+    .split-demo {
         height: 200px;
         width: 480px;
     }
 
-    ::deep.split-demo-horizontal {
+    split-demo-horizontal {
         height: 100px;
     }
 }

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

@@ -1761,10 +1761,16 @@
     "SplitsPanel5": "Upper",
     "SplitsPanel6": "Lower",
     "SplitsPanel7": "Right",
-    "SplitsIsVertical": "style",
+    "SplitsCollapsibleTitle": "Collapse/Expand",
+    "SplitsCollapsibleIntro": "Set whether the panels can be collapsed by configuring the <code>FirstPaneCollapsible</code> and <code>SecondPaneCollapsible</code> properties",
+    "SplitsPanel8": "Upper",
+    "SplitsPanel9": "Lower",
+    "SplitsPanel10": "Right",
+    "SplitsIsVertical": "Vertical",
     "SplitsBasis": "Percentage of first pane position",
     "SplitsFirstPanelTemplate": "First pane template",
-    "SplitsSecondPanelTemplate": "Second pane template"
+    "SplitsSecondPanelTemplate": "Second pane template",
+    "SplitsIsCollapsible": "Whether to expand or collapse the split view"
   },
   "BootstrapBlazor.Server.Components.Samples.Dropdowns": {
     "Title": "Dropdown",

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

@@ -1761,10 +1761,16 @@
     "SplitsPanel5": "上边面板",
     "SplitsPanel6": "下边面板",
     "SplitsPanel7": "右边面板",
-    "SplitsIsVertical": "样式",
+    "SplitsCollapsibleTitle": "折叠/展开",
+    "SplitsCollapsibleIntro": "通过设置 <code>IsCollapsible</code> 属性来设置是否可以折叠面板",
+    "SplitsPanel8": "上边面板",
+    "SplitsPanel9": "下边面板",
+    "SplitsPanel10": "右边面板",
+    "SplitsIsVertical": "垂直分割",
     "SplitsBasis": "第一个窗格位置占比",
     "SplitsFirstPanelTemplate": "第一个窗格模板",
-    "SplitsSecondPanelTemplate": "第二个窗格模板"
+    "SplitsSecondPanelTemplate": "第二个窗格模板",
+    "SplitsIsCollapsible": "是否可以展开收起面板"
   },
   "BootstrapBlazor.Server.Components.Samples.Dropdowns": {
     "Title": "Dropdown 下拉菜单",

src/BootstrapBlazor/Components/Split/Split.razor

@@ -1,26 +1,26 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader]
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" role="group">
-    <div class="@WrapperClassString">
-        <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>
-        </div>
-        <div class="split-pane split-right" style="flex: 1;">
-            @SecondPaneTemplate
+    <div class="split-pane split-left" style="@StyleString">
+        @FirstPaneTemplate
+    </div>
+    <div class="split-pane split-right">
+        @SecondPaneTemplate
+    </div>
+    <div class="split-pane split-bar">
+        @if (IsCollapsible)
+        {
+            <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 (IsCollapsible)
+        {
+            <button tabindex="-1" type="button" class="split-bar-arrow split-bar-arrow-right"></button>
+        }
     </div>
 </div>

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

@@ -5,31 +5,31 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 
+/// Split 组件
 /// </summary>
 public sealed partial class Split
 {
     /// <summary>
     /// 获得 组件样式
     /// </summary>
     private string? ClassString => CssBuilder.Default("split")
+        .AddClass("is-vertical", IsVertical)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    /// <summary>
-    /// 获得 组件 Wrapper 样式
-    /// </summary>
-    private string? WrapperClassString => CssBuilder.Default("split-wrapper")
-        .AddClass("is-horizontal", !IsVertical)
-        .Build();
-
     /// <summary>
     /// 获得 第一个窗格 Style
     /// </summary>
     private string? StyleString => CssBuilder.Default()
         .AddClass($"flex-basis: {Basis.ConvertToPercentString()};")
         .Build();
 
+    /// <summary>
+    /// 获取 是否开启折叠功能 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsCollapsible { get; set; }
+
     /// <summary>
     /// 获得/设置 是否垂直分割
     /// </summary>
@@ -53,4 +53,30 @@ public sealed partial class Split
     /// </summary>
     [Parameter]
     public RenderFragment? SecondPaneTemplate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 窗格折叠时回调方法 参数 bool 值为 true 是表示已折叠 值为 false 表示第二个已折叠
+    /// </summary>
+    [Parameter]
+    public Func<bool, Task>? OnCollapsedAsync { get; set; }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerOnCollapsed));
+
+    /// <summary>
+    /// 窗格折叠时回调方法 由 JavaScript 调用   
+    /// </summary>
+    /// <param name="collapsed"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerOnCollapsed(bool collapsed)
+    {
+        if (OnCollapsedAsync != null)
+        {
+            await OnCollapsedAsync(collapsed);
+        }
+    }
 }