diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor index d0c5473a47f..e0484b03943 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.Server/Components/Layout/TutorialsLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor index ddeaea3821e..e3ab58ae6b0 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor +++ b/src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor @@ -9,7 +9,7 @@ - +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Layouts.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Layouts.razor.cs index 37e28801ec0..3449d3f48ee 100644 --- 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 index 7169ae2f7f4..ee1e716d9e3 100644 --- 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 index 9f7cb81d290..0b1c05db18e 100644 --- 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 index 62001c6901d..1509a79aa9b 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.5.13-beta01 + 9.5.13-beta02 diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor b/src/BootstrapBlazor/Components/Layout/Layout.razor index b01e4b73150..994cd0dc1a2 100644 --- a/src/BootstrapBlazor/Components/Layout/Layout.razor +++ b/src/BootstrapBlazor/Components/Layout/Layout.razor @@ -94,9 +94,9 @@ { @Side } - @if (ShowSplitebar) + @if (ShowSplitBar) { - + } @if (Menus != null) { diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs index 170faf5e008..d408b9473d5 100644 --- 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 /// 仅在 左右布局时有效 /// [Parameter] + public bool ShowSplitBar { get; set; } + + /// + /// 获得/设置 是否显示分割栏 默认 false 不显示 + /// 仅在 左右布局时有效 + /// + [Parameter] + [ExcludeFromCodeCoverage] + [Obsolete("已弃用,请使用 ShowSplitBar 单词拼写错误;Deprecated. Please use 'ShowSplitBar' instead. The word 'Splitebar' is misspelled.")] public bool ShowSplitebar { get; set; } /// @@ -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/LayoutSplitebar.razor b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor similarity index 54% rename from src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor rename to src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor index 76d7d7da92b..93cebdb25fb 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.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")] -
-
+
diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.cs similarity index 96% rename from src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs rename to src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.cs index 37977d348e3..3b607fab13b 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs +++ b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.cs @@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components; /// /// LayoutSidebar 组件 /// -public partial class LayoutSplitebar +public partial class LayoutSplitBar { /// /// 获得/设置 容器选择器 默认 null 未设置 diff --git a/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.js similarity index 89% rename from src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js rename to src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.js index ece314ec76e..ef2f1a94424 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.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/LayoutSplitebar.razor.scss b/src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.scss similarity index 56% rename from src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss rename to src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.scss index b834f110aa7..9f0db93129d 100644 --- a/src/BootstrapBlazor/Components/Layout/LayoutSplitebar.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 index bdeb5f1bf4c..ceb8fb7c648 100644 --- 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 index 296691869c6..ba4954600d9 100644 --- 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 index fc7cc7c6fcc..002e668a5a3 100644 --- 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(pb => + var cut = Context.RenderComponent(pb => { pb.Add(a => a.ContainerSelector, ".layout"); }); diff --git a/test/UnitTest/Components/LayoutTest.cs b/test/UnitTest/Components/LayoutTest.cs index 289ea27ecb8..6a047aa861a 100644 --- a/test/UnitTest/Components/LayoutTest.cs +++ b/test/UnitTest/Components/LayoutTest.cs @@ -344,14 +344,14 @@ public void UseTabSet_Layout() } [Fact] - public void ShowLayouSidebar_Ok() + public void ShowLayoutSidebar_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.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 => @@ -359,7 +359,7 @@ public void ShowLayouSidebar_Ok() 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\""); }