weiai/BootstrapBlazor
1
0
Fork 0
mirror of https://github.com/dotnetcore/BootstrapBlazor.git synced 2025-12-20 02:16:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* refactor: 更正 ShowSplitBar 单词拼写错误

* refactor: 文档格式化

* refactor: 更正属性名称

* test: 更正单元测试

* refactor: 更改组件名称

* doc: 更新文档

* test: 更新单元测试

* chore: bump version 9.5.13-beta02

Co-Authored-By: top5five <10360277+top5five@users.noreply.github.com>

* doc: 更新注释文档

---------

Co-authored-by: top5five <10360277+top5five@users.noreply.github.com>
This commit is contained in:
Argo Zhang
2025-04-29 10:33:50 +08:00
committed by GitHub
parent b7759e7d14
commit 43cbd10c7c
16 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor
View File

@@ -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">

2
src/BootstrapBlazor.Server/Components/Layout/TutorialsLayout.razor
View File

@@ -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">

4
src/BootstrapBlazor.Server/Components/Samples/Layouts.razor.cs
View File

@@ -141,8 +141,8 @@ public sealed partial class Layouts
},
new()
{
Name = "ShowSplitebar",
Description = Localizer["Layouts_ShowSplitebar_Description"],
Name = "ShowSplitBar",
Description = Localizer["Layouts_ShowSplitBar_Description"],
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"

2
src/BootstrapBlazor.Server/Locales/en-US.json
View File

@@ -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",

2
src/BootstrapBlazor.Server/Locales/zh-CN.json
View File

@@ -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 模板",

2
src/BootstrapBlazor/BootstrapBlazor.csproj
View File

@@ -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>

4
src/BootstrapBlazor/Components/Layout/Layout.razor
View File

@@ -94,9 +94,9 @@
{
@Side
}
@if (ShowSplitebar)
@if (ShowSplitBar)
{
<LayoutSplitebar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitebar>
<LayoutSplitBar Min="SidebarMinWidth" Max="SidebarMaxWidth"></LayoutSplitBar>
}
@if (Menus != null)
{

11
src/BootstrapBlazor/Components/Layout/Layout.razor.cs
View File

@@ -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 @@ public partial class Layout : IHandlerException, ITabHeader
// 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)
{

6
src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor
View File

@@ -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>

2
src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.cs
View File

@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components;
/// <summary>
/// LayoutSidebar 组件
/// </summary>
public partial class LayoutSplitebar
public partial class LayoutSplitBar
{
/// <summary>
/// 获得/设置 容器选择器 默认 null 未设置

6
src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.js
View File

@@ -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);
}

20
src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss → src/BootstrapBlazor/Components/Layout/LayoutSplitBar.razor.scss
View File

@@ -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;
}
}

2
src/BootstrapBlazor/wwwroot/scss/components.scss
View File

@@ -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";

6
src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss vendored
View File

@@ -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);

6
test/UnitTest/Components/LayoutSplitebarTest.cs
View File

@@ -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");
});

6
test/UnitTest/Components/LayoutTest.cs
View File

@@ -344,14 +344,14 @@ public class LayoutTest : BootstrapBlazorTestBase
}
[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 =>
@@ -359,7 +359,7 @@ public class LayoutTest : BootstrapBlazorTestBase
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\"");
}