Skip to content

Commit

Permalink
refactor(Layout): enhance layout styles (#4679)
Browse files Browse the repository at this point in the history 
* doc: 代码格式化

* refactor: 移除空属性

* refactor: 重新设计收起样式

* feat: Layout 组件支持 static 渲染模式

* fix(Widget): 修复报错问题

* chore: bump version 9.0.0-beta03

* style: 移除抽屉 padding 间隙

* refactor: 移除宽度计算样式

* doc: 后台示例更新登录信息栏

* doc: 格式化文档

* refactor: 样式独立文件

* doc: 精简样式

* refactor: 更新 Widget 组件与模板一致

* refactor: 修复调整结构组件状态不正确问题

* refactor: 重构方法提高性能

* refactor: 修复布尔值时不触发 OnStateChanged 回调问题

* refactor: 修复布尔值时不触发 OnStateChanged 回调问题

* test: 增加单元测试

* refactor: 精简代码提高效率

* refactor: 调整右侧边框样式

* chore: bump version 9.0.1-beta01

* doc: 移除 2019 文字

* doc: 移除 2019 文字

* refactor: 更改样式名称

* refactor: 重构侧边栏收起样式

* refactor: 更新 Menu 透明样式

* doc: 更新后台管理样式

* style: 兼容 Menu 组件

* style: 增加响应式布局

* refactor: 重构样式

* wip: 临时移除静态支持

* style: 微调样式

* refactor: 精简样式

* style: 微调 Menu 样式

* refactor: 增加层次

* style: 调整 Title 颜色

* style: 调整收起展开菜单宽度样式

* style: 增加菜单右侧边框线

* doc: 调整文档

* doc: 更新文档链接

* style: 合并样式

* style: 合并样式

* style: 整理 header-bar 样式

* refactor: 重构样式

* style: 层次化样式

* style: 层次化样式

* refactor: 移除 IsPage 参数

* refactor: 移除 static 判断逻辑

* style: 合并 Header 样式

* refactor: 移除侧边栏抽屉

* style: 合并样式

* refactor: 移除 SideWidth=“0” 设置

* refactor: 使用 div 元素渲染按钮

* refactor: 恢复脚本

* refactor: 重构代码

* doc: 移除 IsPage 文档

* doc: 更新开发工具名称
  • Loading branch information
@ArgoZhang
ArgoZhang authored Nov 16, 2024
1 parent f24b4f4 commit 1aacef5
Show file tree
Hide file tree
Showing 18 changed files with 421 additions and 808 deletions.
46 changes: 23 additions & 23 deletions src/BootstrapBlazor.Server/Components/Components/Widget.razor
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<DropdownWidget>
<DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4" BadgeColor="Color.Primary">
<DropdownWidget class="px-3 d-none d-sm-block">
<DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4">
<HeaderTemplate>
<span>您有 4 个未读消息</span>
</HeaderTemplate>
Expand All @@ -8,12 +8,12 @@
{
<a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
<div style="width: 40px; height: 40px;">
<Avatar Url="./images/Argo-C.png" IsCircle="true" Size="Size.Small" />
<Avatar Url="images/Argo-C.png" IsCircle="true" Size="Size.Small" />
</div>
<div class="ms-2">
<div class="d-flex position-relative">
<h4>Argo Zhang</h4>
<small><i class="fa-regular fa-clock"></i> @(4 + index) mins</small>
<div class="flex-fill">Argo Zhang</div>
<small><i class="fa fa-clock-o"></i> @(4 + index) mins</small>
</div>
<div class="text-truncate">Why not buy a new awesome theme?</div>
</div>
Expand All @@ -24,15 +24,15 @@
<a href="#" @onclick:preventDefault>查看所有消息</a>
</FooterTemplate>
</DropdownWidgetItem>
<DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Success">
<DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
<HeaderTemplate>
<span>您有 10 个未读通知</span>
</HeaderTemplate>
<BodyTemplate>
@for (var index = 0; index < 10; index++)
{
<a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
<i class="fa-solid fa-users text-primary"></i>
<i class="fa fa-users text-primary"></i>
<div class="ms-2">5 new members joined</div>
</a>
}
Expand All @@ -41,31 +41,31 @@
<a href="#" @onclick:preventDefault>查看所有通知</a>
</FooterTemplate>
</DropdownWidgetItem>
<DropdownWidgetItem Icon="fa-solid fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
<DropdownWidgetItem Icon="fa-regular fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
<HeaderTemplate>
<span>您有 3 个任务</span>
</HeaderTemplate>
<BodyTemplate>
<a href="#" class="dropdown-item" @onclick:preventDefault>
<h3 class="position-relative">
Design some buttons
<small class="pull-right">20%</small>
</h3>
<BootstrapBlazor.Components.Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></BootstrapBlazor.Components.Progress>
<div class="d-flex">
<div class="flex-fill pe-5">Design some buttons</div>
<small>20%</small>
</div>
<Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></Progress>
</a>
<a href="#" class="dropdown-item" @onclick:preventDefault>
<h3 class="position-relative">
Create a nice theme
<small class="pull-right">40%</small>
</h3>
<BootstrapBlazor.Components.Progress Value="40" Color="Color.Success"></BootstrapBlazor.Components.Progress>
<div class="d-flex">
<div class="flex-fill pe-5">Create a nice theme</div>
<small>40%</small>
</div>
<Progress Value="40" Color="Color.Success"></Progress>
</a>
<a href="#" class="dropdown-item" @onclick:preventDefault>
<h3 class="position-relative">
Some task I need to do
<small class="pull-right">60%</small>
</h3>
<BootstrapBlazor.Components.Progress Value="60" Color="Color.Danger"></BootstrapBlazor.Components.Progress>
<div class="d-flex">
<div class="flex-fill pe-5">Some task I need to do</div>
<small>60%</small>
</div>
<Progress Value="60" Color="Color.Danger"></Progress>
</a>
</BodyTemplate>
<FooterTemplate>
Expand Down
123 changes: 13 additions & 110 deletions src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,25 @@
@inherits LayoutComponentBase
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption

<HeadContent>
<link href="./css/layout.css" rel="stylesheet" />
</HeadContent>

<CascadingValue Value="this" IsFixed="true">
<Layout SideWidth="0" IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
<Layout IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
ShowFooter="@ShowFooter" ShowGotoTop="true" ShowCollapseBar="true" Menus="@Menus"
UseTabSet="@UseTabSet" TabDefaultUrl="layout-page" AdditionalAssemblies="new[] { GetType().Assembly }" class="@LayoutClassString">
<Header>
<span class="ms-3 flex-fill">Bootstrap of Blazor</span>
<Widget></Widget>
<img alt="avatar" src="./images/Argo-C.png" class="layout-avatar-right" />
<span class="mx-3 d-none d-sm-block">超级管理员</span>
<div class="layout-drawer" @onclick="@ToggleDrawer"><i class="fa-solid fa-gears"></i></div>
<Logout ImageUrl="images/Argo-C.png" DisplayName="超级管理员" UserName="Admin">
<LinkTemplate>
<a href="#"><i class="fa-solid fa-suitcase"></i>个人中心</a>
<a href="#"><i class="fa-solid fa-cog"></i>设置</a>
<a href="#"><i class="fa-solid fa-bell"></i>通知<span class="badge badge-pill badge-success"></span></a>
<LogoutLink />
</LinkTemplate>
</Logout>
</Header>
<Side>
<div class="layout-banner">
Expand All @@ -29,110 +38,4 @@
</div>
</Footer>
</Layout>

<Drawer Placement="Placement.Right" @bind-IsOpen="@IsOpen" IsBackdrop="true">
<div class="layout-drawer-body">
<div class="btn btn-info w-100" @onclick="@(e => IsOpen = false)">点击关闭</div>
<div class="page-layout-demo-option">
<p>布局调整</p>
<div class="row">
<div class="col-6">
<Tooltip Title="左右结构">
<div class="layout-item @(IsFullSide ? "active d-flex" : "d-flex")" @onclick="@(e => IsFullSide = true)">
<div class="layout-left d-flex flex-column">
<div class="layout-left-header"></div>
<div class="layout-left-body flex-fill"></div>
</div>
<div class="layout-right d-flex flex-column flex-fill">
<div class="layout-right-header"></div>
<div class="layout-right-body flex-fill"></div>
<div class="layout-right-footer"></div>
</div>
</div>
</Tooltip>
</div>
<div class="col-6">
<Tooltip Title="上下结构">
<div class="layout-item flex-column @(IsFullSide ? "d-flex" : "active d-flex")" @onclick="@(e => IsFullSide = false)">
<div class="layout-top">
</div>
<div class="layout-body d-flex flex-fill">
<div class="layout-left">
</div>
<div class="layout-right flex-fill">
</div>
</div>
<div class="layout-footer">
</div>
</div>
</Tooltip>
</div>
</div>
</div>

<div class="page-layout-demo-option">
<p>固定调整</p>
<div class="row">
<div class="col-6 d-flex align-items-center">
<Switch @bind-Value="@IsFixedHeader" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
</div>
<div class="col-6 text-end">
<span>固定页头</span>
</div>
</div>
<div class="row mt-3">
<div class="col-6 d-flex align-items-center">
<Switch @bind-Value="@IsFixedFooter" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
</div>
<div class="col-6 text-end">
<span>固定页脚</span>
</div>
</div>
<div class="row mt-3">
<div class="col-6 d-flex align-items-center">
<Switch @bind-Value="@ShowFooter" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
</div>
<div class="col-6 text-end">
<span>显示页脚</span>
</div>
</div>
</div>

<div class="page-layout-demo-option">
<p>主题配色</p>
<div class="row">
<div class="col-2">
<span class="color color1" @onclick="@(e => Theme = "color1")"></span>
</div>
<div class="col-2">
<span class="color color2" @onclick="@(e => Theme = "color2")"></span>
</div>
<div class="col-2">
<span class="color color3" @onclick="@(e => Theme = "color3")"></span>
</div>
<div class="col-2">
<span class="color color4" @onclick="@(e => Theme = "color4")"></span>
</div>
<div class="col-2">
<span class="color color5" @onclick="@(e => Theme = "color5")"></span>
</div>
<div class="col-2">
<span class="color color6" @onclick="@(e => Theme = "color6")"></span>
</div>
</div>
</div>

<div class="page-layout-demo-option">
<p>更多设置</p>
<div class="row">
<div class="col-6 d-flex align-items-center">
<Switch @bind-Value="@UseTabSet" OnColor="@Color.Success" OffColor="@Color.Primary"></Switch>
</div>
<div class="col-6 text-end">
<span>@(UseTabSet ? "多标签" : "单页")</span>
</div>
</div>
</div>
</div>
</Drawer>
</CascadingValue>
11 changes: 0 additions & 11 deletions src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,37 +24,31 @@ public sealed partial class PageLayout
/// <summary>
/// 获得/设置 是否固定 TabHeader
/// </summary>
[Parameter]
public bool IsFixedTab { get; set; }

/// <summary>
/// 获得/设置 是否固定页头
/// </summary>
[Parameter]
public bool IsFixedHeader { get; set; } = true;

/// <summary>
/// 获得/设置 是否固定页脚
/// </summary>
[Parameter]
public bool IsFixedFooter { get; set; } = true;

/// <summary>
/// 获得/设置 侧边栏是否外置
/// </summary>
[Parameter]
public bool IsFullSide { get; set; } = true;

/// <summary>
/// 获得/设置 是否显示页脚
/// </summary>
[Parameter]
public bool ShowFooter { get; set; } = true;

/// <summary>
/// 获得/设置 是否开启多标签模式
/// </summary>
[Parameter]
public bool UseTabSet { get; set; } = true;

/// <summary>
Expand All @@ -80,9 +74,4 @@ protected override async Task OnInitializedAsync()
/// 更新组件方法
/// </summary>
public void Update() => StateHasChanged();

private void ToggleDrawer()
{
IsOpen = !IsOpen;
}
}
Loading

0 comments on commit 1aacef5

Please sign in to comment.