diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor index ef2ce092a08..3f631c316e7 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor +++ b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor @@ -10,7 +10,7 @@ Bootstrap Blazor - +
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor b/src/BootstrapBlazor/Components/Layout/Layout.razor index a8fc664ee77..eacaaaa0b23 100644 --- a/src/BootstrapBlazor/Components/Layout/Layout.razor +++ b/src/BootstrapBlazor/Components/Layout/Layout.razor @@ -90,7 +90,7 @@ } @if (ShowSplitBar) { - + } @if (Menus != null) { diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor similarity index 54% rename from src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor rename to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor index 4c78c2966d6..76d7d7da92b 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor +++ b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor @@ -1,8 +1,8 @@ @namespace BootstrapBlazor.Components @inherits BootstrapModuleComponentBase -@attribute [BootstrapModuleAutoLoader("Layout/LayoutSidebar.razor.js")] +@attribute [BootstrapModuleAutoLoader("Layout/LayoutSplitebar.razor.js")] -
-
+
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.cs b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs similarity index 96% rename from src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.cs rename to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs index af5b4b49975..37977d348e3 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.cs +++ b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs @@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components; /// /// LayoutSidebar 组件 /// -public partial class LayoutSidebar +public partial class LayoutSplitebar { /// /// 获得/设置 容器选择器 默认 null 未设置 diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.js b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js similarity index 84% rename from src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.js rename to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js index a0c4b4a6c32..035061cec3d 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.js +++ b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js @@ -1,5 +1,4 @@ import Drag from "../../modules/drag.js" -import Data from "../../modules/data.js" export function init(id) { const el = document.getElementById(id); @@ -9,9 +8,9 @@ export function init(id) { 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 selector = el.getAttribute("data-bb-selector") ?? ".layout"; const section = document.querySelector(selector); - const bar = el.querySelector(".layout-sidebar-body"); + const bar = el.querySelector(".layout-splitebar-body"); let originX = 0; let width = 0; Drag.drag(bar, @@ -37,7 +36,7 @@ export function init(id) { export function dispose(id) { const el = document.getElementById(id); if (el) { - const bar = el.querySelector(".layout-sidebar-body"); + const bar = el.querySelector(".layout-splitebar-body"); if (bar) { Drag.dispose(bar); } diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.scss b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss similarity index 88% rename from src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.scss rename to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss index d340cfcbab2..35f2e1ea2de 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.scss +++ b/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss @@ -1,4 +1,4 @@ -.layout-sidebar { +.layout-splitebar { width: 1px; position: absolute; top: 0; @@ -7,7 +7,7 @@ background-color: var(--bs-border-color); display: none; - .layout-sidebar-body { + .layout-splitebar-body { position: absolute; inset: 0px -2px; cursor: col-resize; @@ -26,7 +26,7 @@ } @media(min-width: 768px) { - .layout-sidebar { + .layout-splitebar { display: block; } } diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss index a5bc79b6a78..ffd1e88b3fa 100644 --- a/src/BootstrapBlazor/wwwroot/scss/components.scss +++ b/src/BootstrapBlazor/wwwroot/scss/components.scss @@ -57,7 +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/Layout/LayoutSplitebar.razor.scss"; @import "../../Components/Light/Light.razor.scss"; @import "../../Components/ListGroup/ListGroup.razor.scss"; @import "../../Components/ListView/ListView.razor.scss"; diff --git a/test/UnitTest/Components/LayoutSplitebarTest.cs b/test/UnitTest/Components/LayoutSplitebarTest.cs new file mode 100644 index 00000000000..fc7cc7c6fcc --- /dev/null +++ b/test/UnitTest/Components/LayoutSplitebarTest.cs @@ -0,0 +1,27 @@ +// 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 UnitTest.Components; + +public class LayoutSplitebarTest : BootstrapBlazorTestBase +{ + [Fact] + public void LayoutSplitebar_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.ContainerSelector, ".layout"); + }); + cut.Contains("data-bb-selector=\".layout\""); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.Min, 100); + pb.Add(a => a.Max, 200); + }); + cut.Contains("data-bb-min=\"100\""); + cut.Contains("data-bb-max=\"200\""); + } +} diff --git a/test/UnitTest/Components/LayoutTest.cs b/test/UnitTest/Components/LayoutTest.cs index cd114b5fe41..71ed5141cf6 100644 --- a/test/UnitTest/Components/LayoutTest.cs +++ b/test/UnitTest/Components/LayoutTest.cs @@ -237,6 +237,23 @@ public void UseTabSet_Layout() cut.WaitForAssertion(() => cut.Contains("
Binder
")); } + [Fact] + public void ShowLayouSidebar_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.UseTabSet, true); + pb.Add(a => a.AdditionalAssemblies, new Assembly[] { GetType().Assembly }); + pb.Add(a => a.IsFullSide, true); + pb.Add(a => a.ShowSplitBar, true); + pb.Add(a => a.Side, new RenderFragment(builder => + { + builder.AddContent(0, "test"); + })); + }); + cut.Contains("layout-splitebar"); + } + [Fact] public void UseTabSet_Menus() {