feat(LayoutSpitBar): rename LayoutSplitBar component name (#5915)

ArgoZhang · top5five · web-flow · commit 43cbd10c7c28 · 2025-04-29T10:33:50.000+08:00
* refactor: 更正 ShowSplitBar 单词拼写错误

* refactor: 文档格式化

* refactor: 更正属性名称

* test: 更正单元测试

* refactor: 更改组件名称

* doc: 更新文档

* test: 更新单元测试

* chore: bump version 9.5.13-beta02

Co-Authored-By: top5five &lt;10360277+top5five@users.noreply.github.com&gt;

* doc: 更新注释文档

---------

Co-authored-by: top5five &lt;10360277+top5five@users.noreply.github.com&gt;
diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
@@ -10,7 +10,7 @@
             <span class="sidebar-text">Bootstrap Blazor</span>
         </div>
         <NavMenu />
-        <LayoutSplitebar Min="250" Max="380" ContainerSelector=".section"></LayoutSplitebar>
+        <LayoutSplitBar Min="250" Max="380" ContainerSelector=".section"></LayoutSplitBar>
     </aside>
 
     <section class="main">
diff --git a/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor
@@ -9,7 +9,7 @@
         </div>
         <TutorialsNavMenu></TutorialsNavMenu>
         <Wwads IsVertical="true"></Wwads>
-        <LayoutSplitebar Min="220" Max="330" ContainerSelector=".section"></LayoutSplitebar>
+        <LayoutSplitBar Min="220" Max="330" ContainerSelector=".section"></LayoutSplitBar>
     </aside>
 
     <section class="main">
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Layouts.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Layouts.razor.cs
@@ -141,8 +141,8 @@ private AttributeItem[] GetAttributes() =>
         },
         new()
         {
-            Name = "ShowSplitebar",
-            Description =  Localizer["Layouts_ShowSplitebar_Description"],
+            Name = "ShowSplitBar",
+            Description =  Localizer["Layouts_ShowSplitBar_Description"],
             Type = "bool",
             ValueList = "true|false",
             DefaultValue = "false"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -1424,7 +1424,7 @@
     "Layouts_IsFixedFooter_Description": "Whether to fix the Footer component",
     "Layouts_IsFixedHeader_Description": "Whether to fix the Header component",
     "Layouts_ShowCollapseBar_Description": "Whether to show contraction and expansion Bar",
-    "Layouts_ShowSplitebar_Description": "Whether to display the left and right split bar",
+    "Layouts_ShowSplitBar_Description": "Whether to display the left and right split bar",
     "Layouts_SidebarMinWidth_Description": "Minimum sidebar width",
     "Layouts_SidebarMaxWidth_Description": "Maximum sidebar width",
     "Layouts_ShowFooter_Description": "Whether to show Footer template",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -1424,7 +1424,7 @@
     "Layouts_IsFixedFooter_Description": "是否固定 Footer 组件",
     "Layouts_IsFixedHeader_Description": "是否固定 Header 组件",
     "Layouts_ShowCollapseBar_Description": "是否显示收缩展开 Bar",
-    "Layouts_ShowSplitebar_Description": "是否显示左右分割栏",
+    "Layouts_ShowSplitBar_Description": "是否显示左右分割栏",
     "Layouts_SidebarMinWidth_Description": "侧边栏最小宽度",
     "Layouts_SidebarMaxWidth_Description": "侧边栏最大宽度",
     "Layouts_ShowFooter_Description": "是否显示 Footer 模板",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.13-beta01</Version>
+    <Version>9.5.13-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor b/src/BootstrapBlazor/Components/Layout/Layout.razor
@@ -94,9 +94,9 @@
         {
             @Side
         }
-        @if (ShowSplitebar)
+        @if (ShowSplitBar)
         {
-            <LayoutSplitebar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitebar>
+            <LayoutSplitBar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitBar>
         }
         @if (Menus != null)
         {
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs
@@ -130,6 +130,15 @@ public partial class Layout : IHandlerException, ITabHeader
     /// 仅在 左右布局时有效
     /// </summary>
     [Parameter]
+    public bool ShowSplitBar { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否显示分割栏 默认 false 不显示
+    /// 仅在 左右布局时有效
+    /// </summary>
+    [Parameter]
+    [ExcludeFromCodeCoverage]
+    [Obsolete("已弃用，请使用 ShowSplitBar 单词拼写错误；Deprecated. Please use 'ShowSplitBar' instead. The word 'Splitebar' is misspelled.")]
     public bool ShowSplitebar { get; set; }
 
     /// <summary>
@@ -491,7 +500,7 @@ protected override async Task OnInitializedAsync()
             // wasm 模式下 开启权限必须提供 AdditionalAssemblies 参数
             AdditionalAssemblies ??= [Assembly.GetEntryAssembly()!];
 
-            var uri= Navigation.ToAbsoluteUri(Navigation.Uri);
+            var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
             var context = RouteTableFactory.Create(AdditionalAssemblies, uri.LocalPath);
             if (context.Handler != null)
             {
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor
@@ -1,8 +1,8 @@
 ﻿@namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader("Layout/LayoutSplitebar.razor.js")]
+@attribute [BootstrapModuleAutoLoader("Layout/LayoutSplitBar.razor.js")]
 
-<div id="@Id" class="layout-splitebar"
+<div id="@Id" class="layout-split-bar"
      data-bb-min="@_minWidthString" data-bb-max="@_maxWidthString" data-bb-selector="@ContainerSelector">
-    <div class="layout-splitebar-body"></div>
+    <div class="layout-split-bar-body"></div>
 </div>
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.cs b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.cs
@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// LayoutSidebar 组件
 /// </summary>
-public partial class LayoutSplitebar
+public partial class LayoutSplitBar
 {
     /// <summary>
     /// 获得/设置 容器选择器 默认 null 未设置
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.js b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.js
@@ -11,11 +11,11 @@ export function init(id) {
     const selector = el.getAttribute("data-bb-selector") ?? ".layout";
     const section = document.querySelector(selector);
     if (section === null) {
-        log.warning(`LayoutSplitebar: selector ${selector} not found`);
+        log.warning(`LayoutSplitBar: selector ${selector} not found`);
         return;
     }
 
-    const bar = el.querySelector(".layout-splitebar-body");
+    const bar = el.querySelector(".layout-split-bar-body");
     let originX = 0;
     let width = 0;
     Drag.drag(bar,
@@ -50,7 +50,7 @@ export function init(id) {
 export function dispose(id) {
     const el = document.getElementById(id);
     if (el) {
-        const bar = el.querySelector(".layout-splitebar-body");
+        const bar = el.querySelector(".layout-split-bar-body");
         if (bar) {
             Drag.dispose(bar);
         }
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.scss b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.scss
@@ -1,4 +1,4 @@
-.layout-splitebar {
+﻿.layout-split-bar {
     width: 1px;
     position: absolute;
     top: 0;
@@ -7,9 +7,9 @@
     background-color: var(--bs-border-color);
     display: none;
 
-    .layout-splitebar-body {
-        --bb-splitebar-body-hover-bg: #{$bb-splitebar-body-hover-bg};
-        --bb-splitebar-body-drag-hover-bg: #{$bb-splitebar-body-drag-hover-bg};
+    .layout-split-bar-body {
+        --bb-split-bar-body-hover-bg: #{$bb-split-bar-body-hover-bg};
+        --bb-split-bar-body-drag-hover-bg: #{$bb-split-bar-body-drag-hover-bg};
         position: absolute;
         inset: 0px -2px;
         cursor: col-resize;
@@ -18,27 +18,27 @@
         transition: background .3s linear;
 
         &:hover {
-            background-color: var(--bb-splitebar-body-hover-bg);
+            background-color: var(--bb-split-bar-body-hover-bg);
         }
     }
 }
 
 .drag {
-    .layout-splitebar {
-        .layout-splitebar-body:hover {
-            background-color: var(--bb-splitebar-body-drag-hover-bg);
+    .layout-split-bar {
+        .layout-split-bar-body:hover {
+            background-color: var(--bb-split-bar-body-drag-hover-bg);
         }
     }
 }
 
 .is-collapsed {
-    .layout-splitebar-body {
+    .layout-split-bar-body {
         display: none;
     }
 }
 
 @media(min-width: 768px) {
-    .layout-splitebar {
+    .layout-split-bar {
         display: block;
     }
 }
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -60,7 +60,7 @@
 @import "../../Components/Input/OtpInput.razor.scss";
 @import "../../Components/IpAddress/IpAddress.razor.scss";
 @import "../../Components/Layout/Layout.razor.scss";
-@import "../../Components/Layout/LayoutSplitebar.razor.scss";
+@import "../../Components/Layout/LayoutSplitBar.razor.scss";
 @import "../../Components/Light/Light.razor.scss";
 @import "../../Components/ListGroup/ListGroup.razor.scss";
 @import "../../Components/ListView/ListView.razor.scss";
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -347,9 +347,9 @@ $bb-layout-menu-item-hover-bg: #409eff;
 $bb-layout-logo-border-color: #d5d5d5;
 $bb-layout-logo-bg: #0e77e3;
 
-// LayoutSplitebar
-$bb-splitebar-body-hover-bg: rgba(175, 184, 193, 0.2);
-$bb-splitebar-body-drag-hover-bg: rgb(9, 105, 218);
+// LayoutSplitBar
+$bb-split-bar-body-hover-bg: rgba(175, 184, 193, 0.2);
+$bb-split-bar-body-drag-hover-bg: rgb(9, 105, 218);
 
 // Light
 $bb-light-bg: radial-gradient(circle, #fff, #aaa, #333);
diff --git a/test/UnitTest/Components/LayoutSplitebarTest.cs b/test/UnitTest/Components/LayoutSplitebarTest.cs
@@ -5,12 +5,12 @@
 
 namespace UnitTest.Components;
 
-public class LayoutSplitebarTest : BootstrapBlazorTestBase
+public class LayoutSplitBarTest : BootstrapBlazorTestBase
 {
     [Fact]
-    public void LayoutSplitebar_Ok()
+    public void LayoutSplitBar_Ok()
     {
-        var cut = Context.RenderComponent<LayoutSplitebar>(pb =>
+        var cut = Context.RenderComponent<LayoutSplitBar>(pb =>
         {
             pb.Add(a => a.ContainerSelector, ".layout");
         });
diff --git a/test/UnitTest/Components/LayoutTest.cs b/test/UnitTest/Components/LayoutTest.cs
@@ -344,22 +344,22 @@ public void UseTabSet_Layout()
     }
 
     [Fact]
-    public void ShowLayouSidebar_Ok()
+    public void ShowLayoutSidebar_Ok()
     {
         var cut = Context.RenderComponent<Layout>(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.ShowSplitebar, true);
+            pb.Add(a => a.ShowSplitBar, true);
             pb.Add(a => a.SidebarMinWidth, 100);
             pb.Add(a => a.SidebarMaxWidth, 300);
             pb.Add(a => a.Side, new RenderFragment(builder =>
             {
                 builder.AddContent(0, "test");
             }));
         });
-        cut.Contains("layout-splitebar");
+        cut.Contains("layout-split-bar");
         cut.Contains("data-bb-min=\"100\"");
         cut.Contains("data-bb-max=\"300\"");
     }

Original file line number	Diff line number	Diff line change
`@@ -94,9 +94,9 @@`
`94`	`94`	`{`
`95`	`95`	`@Side`
`96`	`96`	`}`
`97`		`- @if (ShowSplitebar)`
	`97`	`+ @if (ShowSplitBar)`
`98`	`98`	`{`
`99`		`- <LayoutSplitebar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitebar>`
	`99`	`+ <LayoutSplitBar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitBar>`
`100`	`100`	`}`
`101`	`101`	`@if (Menus != null)`
`102`	`102`	`{`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components;`
`8`	`8`	`/// <summary>`
`9`	`9`	`/// LayoutSidebar 组件`
`10`	`10`	`/// </summary>`
`11`		`-public partial class LayoutSplitebar`
	`11`	`+public partial class LayoutSplitBar`
`12`	`12`	`{`
`13`	`13`	`/// <summary>`
`14`	`14`	`/// 获得/设置容器选择器默认 null 未设置`