Skip to content

Commit 1aacef5

Browse files
ArgoZhangArgoZhang
authored
refactor(Layout): enhance layout styles (#4679)
* 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: 更新开发工具名称
1 parent f24b4f4 commit 1aacef5

File tree

18 files changed

+421
-808
lines changed

18 files changed

+421
-808
lines changed

‎src/BootstrapBlazor.Server/Components/Components/Widget.razor‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<DropdownWidget>
2-
<DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4" BadgeColor="Color.Primary">
1+
<DropdownWidget class="px-3 d-none d-sm-block">
2+
<DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4">
33
<HeaderTemplate>
44
<span>您有 4 个未读消息</span>
55
</HeaderTemplate>
@@ -8,12 +8,12 @@
88
{
99
<a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
1010
<div style="width: 40px; height: 40px;">
11-
<Avatar Url="./images/Argo-C.png" IsCircle="true" Size="Size.Small" />
11+
<Avatar Url="images/Argo-C.png" IsCircle="true" Size="Size.Small" />
1212
</div>
1313
<div class="ms-2">
1414
<div class="d-flex position-relative">
15-
<h4>Argo Zhang</h4>
16-
<small><i class="fa-regular fa-clock"></i> @(4 + index) mins</small>
15+
<div class="flex-fill">Argo Zhang</div>
16+
<small><i class="fa fa-clock-o"></i> @(4 + index) mins</small>
1717
</div>
1818
<div class="text-truncate">Why not buy a new awesome theme?</div>
1919
</div>
@@ -24,15 +24,15 @@
2424
<a href="#" @onclick:preventDefault>查看所有消息</a>
2525
</FooterTemplate>
2626
</DropdownWidgetItem>
27-
<DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Success">
27+
<DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
2828
<HeaderTemplate>
2929
<span>您有 10 个未读通知</span>
3030
</HeaderTemplate>
3131
<BodyTemplate>
3232
@for (var index = 0; index < 10; index++)
3333
{
3434
<a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
35-
<i class="fa-solid fa-users text-primary"></i>
35+
<i class="fa fa-users text-primary"></i>
3636
<div class="ms-2">5 new members joined</div>
3737
</a>
3838
}
@@ -41,31 +41,31 @@
4141
<a href="#" @onclick:preventDefault>查看所有通知</a>
4242
</FooterTemplate>
4343
</DropdownWidgetItem>
44-
<DropdownWidgetItem Icon="fa-solid fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
44+
<DropdownWidgetItem Icon="fa-regular fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
4545
<HeaderTemplate>
4646
<span>您有 3 个任务</span>
4747
</HeaderTemplate>
4848
<BodyTemplate>
4949
<a href="#" class="dropdown-item" @onclick:preventDefault>
50-
<h3 class="position-relative">
51-
Design some buttons
52-
<small class="pull-right">20%</small>
53-
</h3>
54-
<BootstrapBlazor.Components.Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></BootstrapBlazor.Components.Progress>
50+
<div class="d-flex">
51+
<div class="flex-fill pe-5">Design some buttons</div>
52+
<small>20%</small>
53+
</div>
54+
<Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></Progress>
5555
</a>
5656
<a href="#" class="dropdown-item" @onclick:preventDefault>
57-
<h3 class="position-relative">
58-
Create a nice theme
59-
<small class="pull-right">40%</small>
60-
</h3>
61-
<BootstrapBlazor.Components.Progress Value="40" Color="Color.Success"></BootstrapBlazor.Components.Progress>
57+
<div class="d-flex">
58+
<div class="flex-fill pe-5">Create a nice theme</div>
59+
<small>40%</small>
60+
</div>
61+
<Progress Value="40" Color="Color.Success"></Progress>
6262
</a>
6363
<a href="#" class="dropdown-item" @onclick:preventDefault>
64-
<h3 class="position-relative">
65-
Some task I need to do
66-
<small class="pull-right">60%</small>
67-
</h3>
68-
<BootstrapBlazor.Components.Progress Value="60" Color="Color.Danger"></BootstrapBlazor.Components.Progress>
64+
<div class="d-flex">
65+
<div class="flex-fill pe-5">Some task I need to do</div>
66+
<small>60%</small>
67+
</div>
68+
<Progress Value="60" Color="Color.Danger"></Progress>
6969
</a>
7070
</BodyTemplate>
7171
<FooterTemplate>

‎src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor‎

Lines changed: 13 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
@inherits LayoutComponentBase
22
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
33

4+
<HeadContent>
5+
<link href="./css/layout.css" rel="stylesheet" />
6+
</HeadContent>
7+
48
<CascadingValue Value="this" IsFixed="true">
5-
<Layout SideWidth="0" IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
9+
<Layout IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
610
ShowFooter="@ShowFooter" ShowGotoTop="true" ShowCollapseBar="true" Menus="@Menus"
711
UseTabSet="@UseTabSet" TabDefaultUrl="layout-page" AdditionalAssemblies="new[] { GetType().Assembly }" class="@LayoutClassString">
812
<Header>
913
<span class="ms-3 flex-fill">Bootstrap of Blazor</span>
1014
<Widget></Widget>
11-
<img alt="avatar" src="./images/Argo-C.png" class="layout-avatar-right" />
12-
<span class="mx-3 d-none d-sm-block">超级管理员</span>
13-
<div class="layout-drawer" @onclick="@ToggleDrawer"><i class="fa-solid fa-gears"></i></div>
15+
<Logout ImageUrl="images/Argo-C.png" DisplayName="超级管理员" UserName="Admin">
16+
<LinkTemplate>
17+
<a href="#"><i class="fa-solid fa-suitcase"></i>个人中心</a>
18+
<a href="#"><i class="fa-solid fa-cog"></i>设置</a>
19+
<a href="#"><i class="fa-solid fa-bell"></i>通知<span class="badge badge-pill badge-success"></span></a>
20+
<LogoutLink />
21+
</LinkTemplate>
22+
</Logout>
1423
</Header>
1524
<Side>
1625
<div class="layout-banner">
@@ -29,110 +38,4 @@
2938
</div>
3039
</Footer>
3140
</Layout>
32-
33-
<Drawer Placement="Placement.Right" @bind-IsOpen="@IsOpen" IsBackdrop="true">
34-
<div class="layout-drawer-body">
35-
<div class="btn btn-info w-100" @onclick="@(e => IsOpen = false)">点击关闭</div>
36-
<div class="page-layout-demo-option">
37-
<p>布局调整</p>
38-
<div class="row">
39-
<div class="col-6">
40-
<Tooltip Title="左右结构">
41-
<div class="layout-item @(IsFullSide ? "active d-flex" : "d-flex")" @onclick="@(e => IsFullSide = true)">
42-
<div class="layout-left d-flex flex-column">
43-
<div class="layout-left-header"></div>
44-
<div class="layout-left-body flex-fill"></div>
45-
</div>
46-
<div class="layout-right d-flex flex-column flex-fill">
47-
<div class="layout-right-header"></div>
48-
<div class="layout-right-body flex-fill"></div>
49-
<div class="layout-right-footer"></div>
50-
</div>
51-
</div>
52-
</Tooltip>
53-
</div>
54-
<div class="col-6">
55-
<Tooltip Title="上下结构">
56-
<div class="layout-item flex-column @(IsFullSide ? "d-flex" : "active d-flex")" @onclick="@(e => IsFullSide = false)">
57-
<div class="layout-top">
58-
</div>
59-
<div class="layout-body d-flex flex-fill">
60-
<div class="layout-left">
61-
</div>
62-
<div class="layout-right flex-fill">
63-
</div>
64-
</div>
65-
<div class="layout-footer">
66-
</div>
67-
</div>
68-
</Tooltip>
69-
</div>
70-
</div>
71-
</div>
72-
73-
<div class="page-layout-demo-option">
74-
<p>固定调整</p>
75-
<div class="row">
76-
<div class="col-6 d-flex align-items-center">
77-
<Switch @bind-Value="@IsFixedHeader" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
78-
</div>
79-
<div class="col-6 text-end">
80-
<span>固定页头</span>
81-
</div>
82-
</div>
83-
<div class="row mt-3">
84-
<div class="col-6 d-flex align-items-center">
85-
<Switch @bind-Value="@IsFixedFooter" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
86-
</div>
87-
<div class="col-6 text-end">
88-
<span>固定页脚</span>
89-
</div>
90-
</div>
91-
<div class="row mt-3">
92-
<div class="col-6 d-flex align-items-center">
93-
<Switch @bind-Value="@ShowFooter" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
94-
</div>
95-
<div class="col-6 text-end">
96-
<span>显示页脚</span>
97-
</div>
98-
</div>
99-
</div>
100-
101-
<div class="page-layout-demo-option">
102-
<p>主题配色</p>
103-
<div class="row">
104-
<div class="col-2">
105-
<span class="color color1" @onclick="@(e => Theme = "color1")"></span>
106-
</div>
107-
<div class="col-2">
108-
<span class="color color2" @onclick="@(e => Theme = "color2")"></span>
109-
</div>
110-
<div class="col-2">
111-
<span class="color color3" @onclick="@(e => Theme = "color3")"></span>
112-
</div>
113-
<div class="col-2">
114-
<span class="color color4" @onclick="@(e => Theme = "color4")"></span>
115-
</div>
116-
<div class="col-2">
117-
<span class="color color5" @onclick="@(e => Theme = "color5")"></span>
118-
</div>
119-
<div class="col-2">
120-
<span class="color color6" @onclick="@(e => Theme = "color6")"></span>
121-
</div>
122-
</div>
123-
</div>
124-
125-
<div class="page-layout-demo-option">
126-
<p>更多设置</p>
127-
<div class="row">
128-
<div class="col-6 d-flex align-items-center">
129-
<Switch @bind-Value="@UseTabSet" OnColor="@Color.Success" OffColor="@Color.Primary"></Switch>
130-
</div>
131-
<div class="col-6 text-end">
132-
<span>@(UseTabSet ? "多标签" : "单页")</span>
133-
</div>
134-
</div>
135-
</div>
136-
</div>
137-
</Drawer>
13841
</CascadingValue>

‎src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,37 +24,31 @@ public sealed partial class PageLayout
2424
/// <summary>
2525
/// 获得/设置 是否固定 TabHeader
2626
/// </summary>
27-
[Parameter]
2827
public bool IsFixedTab { get; set; }
2928

3029
/// <summary>
3130
/// 获得/设置 是否固定页头
3231
/// </summary>
33-
[Parameter]
3432
public bool IsFixedHeader { get; set; } = true;
3533

3634
/// <summary>
3735
/// 获得/设置 是否固定页脚
3836
/// </summary>
39-
[Parameter]
4037
public bool IsFixedFooter { get; set; } = true;
4138

4239
/// <summary>
4340
/// 获得/设置 侧边栏是否外置
4441
/// </summary>
45-
[Parameter]
4642
public bool IsFullSide { get; set; } = true;
4743

4844
/// <summary>
4945
/// 获得/设置 是否显示页脚
5046
/// </summary>
51-
[Parameter]
5247
public bool ShowFooter { get; set; } = true;
5348

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

6054
/// <summary>
@@ -80,9 +74,4 @@ protected override async Task OnInitializedAsync()
8074
/// 更新组件方法
8175
/// </summary>
8276
public void Update() => StateHasChanged();
83-
84-
private void ToggleDrawer()
85-
{
86-
IsOpen = !IsOpen;
87-
}
8877
}

0 commit comments

Comments
 (0)