feat(LayoutSidebar): add LayoutSidebar component (#5438)

ArgoZhang · web-flow · commit 69179e7012f9 · 2025-02-24T20:58:43.000+08:00
* feat: 增加 ShowSidebar 参数

控制是否显示 LayoutSidebar 组件

* feat: 增加 LayoutSidebar 组件

* doc: 更新拖动栏组件

* chore: 增加样式

* refactor: 更新参数

* refactor: 精简代码

* style: 更新样式
diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
@@ -10,9 +10,7 @@
             <span class="sidebar-text">Bootstrap Blazor</span>
         </div>
         <NavMenu />
-        <div class="sidebar-bar">
-            <div class="sidebar-body"></div>
-        </div>
+        <LayoutSidebar Min="250" Max="380" ContainerSelector=".section"></LayoutSidebar>
     </aside>
 
     <section class="main">
diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
@@ -2,10 +2,6 @@
     padding: var(--bb-main-pading);
 }
 
-.section {
-    --bb-sidebar-width: 0;
-}
-
 .sidebar-title {
     height: 50px;
     align-items: center;
@@ -78,29 +74,31 @@
 
 @media (min-width: 768px) {
     .section {
-        --bb-sidebar-width: 300px;
+        --bb-layout-sidebar-width: 300px;
         display: flex;
         flex-direction: row;
         -webkit-font-smoothing: antialiased;
     }
 
+    .main {
+        flex: 1;
+        width: 1%;
+        min-width: 0;
+    }
+
     .sidebar-title {
         display: flex;
     }
 
     .sidebar {
-        width: var(--bb-sidebar-width);
+        width: var(--bb-layout-sidebar-width);
         height: calc(100vh);
         position: sticky;
         top: 0;
         border-right: solid 1px var(--bs-border-color);
         margin-top: calc(var(--bs-header-height) * -1);
     }
 
-    .main {
-        width: calc(100% - var(--bb-sidebar-width));
-    }
-
     .sidebar-bar {
         display: block;
     }
diff --git a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.js b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.js
@@ -1,12 +1,10 @@
 ﻿import Data from "../../_content/BootstrapBlazor/modules/data.js"
-import Drag from "../../_content/BootstrapBlazor/modules/drag.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export function init(id) {
     const navmenu = {
         navbar: document.querySelector('.navbar-toggler'),
-        menu: document.querySelector('.sidebar-content'),
-        bar: document.querySelector('.sidebar-body')
+        menu: document.querySelector('.sidebar-content')
     }
     Data.set(id, navmenu)
 
@@ -20,27 +18,6 @@ export function init(id) {
             navmenu.menu.classList.remove('show')
         }
     })
-    let originX = 0
-    let section = document.querySelector('section');
-    let width = 0
-    Drag.drag(navmenu.bar,
-        e => {
-            navmenu.bar.classList.add('drag')
-            width = parseInt(getComputedStyle(section).getPropertyValue('--bb-sidebar-width'))
-            originX = e.clientX || e.touches[0].clientX
-        },
-        e => {
-            const eventX = e.clientX || (e.touches.length > 0 && e.touches[0].clientX)
-            const moveX = eventX - originX
-            const newWidth = width + moveX
-            if (newWidth >= 250 && newWidth <= 380) {
-                section.style.setProperty('--bb-sidebar-width', `${newWidth}px`)
-            }
-        },
-        e => {
-            navmenu.bar.classList.remove('drag')
-        }
-    )
 }
 
 export function dispose(id) {
@@ -49,5 +26,4 @@ export function dispose(id) {
 
     EventHandler.off(data.navbar, 'click');
     EventHandler.off(data.menu, 'click', '.nav-link');
-    Drag.dispose(data.bar)
 }
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor b/src/BootstrapBlazor/Components/Layout/Layout.razor
@@ -22,16 +22,7 @@
                 }
                 else if (IsFullSide)
                 {
-                    <aside class="@SideClassString" style="@SideStyleString">
-                        @if (Side != null)
-                        {
-                            @Side
-                        }
-                        @if (Menus != null)
-                        {
-                            @RenderMenu
-                        }
-                    </aside>
+                    @RenderSide
                     <section class="layout-right">
                         @if (Header != null)
                         {
@@ -51,16 +42,7 @@
                         @RenderHeader(ShowCollapseBar)
                     }
                     <section class="has-sidebar">
-                        <aside class="@SideClassString" style="@SideStyleString">
-                            @if (Side != null)
-                            {
-                                @Side
-                            }
-                            @if (Menus != null)
-                            {
-                                @RenderMenu
-                            }
-                        </aside>
+                        @RenderSide
                         @RenderMain
                     </section>
                     @if (ShowFooter && Footer != null)
@@ -100,6 +82,22 @@
         @Header
     </header>;
 
+    RenderFragment RenderSide =>
+    @<aside class="@SideClassString" style="@SideStyleString">
+        @if (Side != null)
+        {
+            @Side
+        }
+        @if (ShowSplitBar)
+        {
+            <LayoutSidebar></LayoutSidebar>
+        }
+        @if (Menus != null)
+        {
+            @RenderMenu
+        }
+    </aside>;
+
     RenderFragment RenderMenu =>
     @<div class="layout-menu">
         @if (IsFixedTabHeader || IsFullSide)
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs
@@ -65,6 +65,13 @@ public partial class Layout : IHandlerException
     [Parameter]
     public RenderFragment? Side { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示分割栏 默认 false 不显示
+    /// 仅在 左右布局时有效
+    /// </summary>
+    [Parameter]
+    public bool ShowSplitBar { get; set; }
+
     /// <summary>
     /// 获得/设置 NotAuthorized 模板 默认 null NET6.0/7.0 有效
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor b/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor
@@ -0,0 +1,8 @@
+﻿@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+@attribute [BootstrapModuleAutoLoader("Layout/LayoutSidebar.razor.js")]
+
+<div id="@Id" class="layout-sidebar"
+     data-bb-min="@_minWidthString" data-bb-max="@_maxWidthString" data-bb-selector="@ContainerSelector">
+    <div class="layout-sidebar-body"></div>
+</div>
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.cs b/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.cs
@@ -0,0 +1,35 @@
+﻿// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// LayoutSidebar 组件
+/// </summary>
+public partial class LayoutSidebar
+{
+    /// <summary>
+    /// 获得/设置 容器选择器 默认 null 未设置
+    /// 组件拖动后设置容器 style="--bb-layout-sidebar-width: 200px;" 用于宽度调整
+    /// </summary>
+    [Parameter]
+    public string? ContainerSelector { get; set; }
+
+    /// <summary>
+    /// 获得/设置 最小宽度 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    public int? Min { get; set; }
+
+    /// <summary>
+    /// 获得/设置 最大宽度 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    public int? Max { get; set; }
+
+    private string? _minWidthString => Min.HasValue ? $"{Min}" : null;
+
+    private string? _maxWidthString => Max.HasValue ? $"{Max}" : null;
+}
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.js b/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.js
@@ -0,0 +1,45 @@
+﻿import Drag from "../../modules/drag.js"
+import Data from "../../modules/data.js"
+
+export function init(id) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    const min = parseFloat(el.getAttribute("data-bb-min") ?? "0");
+    const max = parseFloat(el.getAttribute("data-bb-max") ?? "0");
+    const selector = el.getAttribute("data-bb-selector");
+    const section = document.querySelector(selector);
+    const bar = el.querySelector(".layout-sidebar-body");
+    let originX = 0;
+    let width = 0;
+    Drag.drag(bar,
+        e => {
+            bar.classList.add('drag')
+            width = parseInt(getComputedStyle(section).getPropertyValue('--bb-layout-sidebar-width'))
+            originX = e.clientX || e.touches[0].clientX
+        },
+        e => {
+            const eventX = e.clientX || (e.touches.length > 0 && e.touches[0].clientX)
+            const moveX = eventX - originX
+            const newWidth = width + moveX
+            if (newWidth >= min && newWidth <= max) {
+                section.style.setProperty('--bb-layout-sidebar-width', `${newWidth}px`)
+            }
+        },
+        e => {
+            bar.classList.remove('drag')
+        }
+    )
+}
+
+export function dispose(id) {
+    const el = document.getElementById(id);
+    if (el) {
+        const bar = el.querySelector(".layout-sidebar-body");
+        if (bar) {
+            Drag.dispose(bar);
+        }
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.scss b/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.scss
@@ -0,0 +1,32 @@
+.layout-sidebar {
+    width: 1px;
+    position: absolute;
+    top: 0;
+    right: -1px;
+    bottom: 0;
+    background-color: var(--bs-border-color);
+    display: none;
+
+    .layout-sidebar-body {
+        position: absolute;
+        inset: 0px -2px;
+        cursor: col-resize;
+        background-color: transparent;
+        border-radius: 4px;
+
+        &:hover {
+            background-color: var(--bb-sidebar-body-hover-bg);
+        }
+
+        &.drag,
+        &.drag:hover {
+            background-color: var(--bb-sidebar-body-drag-hover-bg);
+        }
+    }
+}
+
+@media(min-width: 768px) {
+    .layout-sidebar {
+        display: block;
+    }
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -57,6 +57,7 @@
 @import "../../Components/Input/FloatingLabel.razor.scss";
 @import "../../Components/IpAddress/IpAddress.razor.scss";
 @import "../../Components/Layout/Layout.razor.scss";
+@import "../../Components/Layout/LayoutSidebar.razor.scss";
 @import "../../Components/Light/Light.razor.scss";
 @import "../../Components/ListGroup/ListGroup.razor.scss";
 @import "../../Components/ListView/ListView.razor.scss";
