!825 feat(#I2AZNB): template page support switch theme feature

* docs: 模板演示页面增加 Theme 示例
This commit is contained in:
Argo 2020-12-28 01:08:05 +08:00
parent 6933d4a59d
commit 8224785a0f
3 changed files with 149 additions and 7 deletions

View File

@ -4,7 +4,7 @@
<CascadingValue Value="this" IsFixed="true"> <CascadingValue Value="this" IsFixed="true">
<Layout SideWidth="0" IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter" <Layout SideWidth="0" IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
ShowFooter="@ShowFooter" ShowGotoTop="true" ShowCollapseBar="true" Menus="@GetIconSideMenuItems()" ShowFooter="@ShowFooter" ShowGotoTop="true" ShowCollapseBar="true" Menus="@GetIconSideMenuItems()"
UseTabSet="@UseTabSet" AdditionalAssemblies="new[] { GetType().Assembly }"> UseTabSet="@UseTabSet" AdditionalAssemblies="new[] { GetType().Assembly }" class="@Theme">
<Header> <Header>
<span class="ml-3 flex-fill">Bootstrap of Blazor</span> <span class="ml-3 flex-fill">Bootstrap of Blazor</span>
<Widget></Widget> <Widget></Widget>
@ -104,22 +104,22 @@
<p>主题配色</p> <p>主题配色</p>
<div class="row"> <div class="row">
<div class="col-2"> <div class="col-2">
<span class="color color1"></span> <span class="color color1" @onclick="@(e => Theme = "color1")"></span>
</div> </div>
<div class="col-2"> <div class="col-2">
<span class="color color2"></span> <span class="color color2" @onclick="@(e => Theme = "color2")"></span>
</div> </div>
<div class="col-2"> <div class="col-2">
<span class="color color3"></span> <span class="color color3" @onclick="@(e => Theme = "color3")"></span>
</div> </div>
<div class="col-2"> <div class="col-2">
<span class="color color4"></span> <span class="color color4" @onclick="@(e => Theme = "color4")"></span>
</div> </div>
<div class="col-2"> <div class="col-2">
<span class="color color5"></span> <span class="color color5" @onclick="@(e => Theme = "color5")"></span>
</div> </div>
<div class="col-2"> <div class="col-2">
<span class="color color6"></span> <span class="color color6" @onclick="@(e => Theme = "color6")"></span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -18,6 +18,8 @@ namespace BootstrapBlazor.Shared.Shared
{ {
private bool IsOpen { get; set; } private bool IsOpen { get; set; }
private string Theme { get; set; } = "";
/// <summary> /// <summary>
/// 获得/设置 是否固定页头 /// 获得/设置 是否固定页头
/// </summary> /// </summary>

View File

@ -1251,6 +1251,146 @@ section {
background-color: #4a3275; background-color: #4a3275;
} }
.color1,
.layout.is-page.color1 .layout-header {
background-color: #409eff;
}
.layout.is-page.color1 .layout-side .layout-banner {
background-color: #3e84d0
}
.layout.is-page.color1 .layout-side {
background-color: #212529;
color: #ebeef5;
}
.layout.is-page.color1 .layout-footer {
background-color: #343a40;
}
.layout.is-page.color1 .layout-header-bar {
background-color: #2b7cd0;
border-color: #014186;
}
.layout.is-page.color1 .layout-drawer:hover {
background-color: #3184dc;
}
.color2,
.layout.is-page.color2 .layout-header {
background-color: #28a745;
}
.layout.is-page.color2 .layout-side .layout-banner {
background-color: #24903d
}
.layout.is-page.color2 .layout-side {
background-color: #212529;
color: #ebeef5;
}
.layout.is-page.color2 .layout-footer {
background-color: #343a40;
}
.layout.is-page.color2 .layout-header-bar {
background-color: #258c3c;
border-color: #014186;
}
.layout.is-page.color2 .layout-drawer:hover {
background-color: #24903d;
}
.color3,
.layout.is-page.color3 .layout-header {
background-color: #e83e8c;
}
.layout.is-page.color3 .layout-side .layout-banner {
background-color: #c5417e
}
.layout.is-page.color3 .layout-side {
background-color: #212529;
color: #ebeef5;
}
.layout.is-page.color3 .layout-footer {
background-color: #343a40;
}
.layout.is-page.color3 .layout-header-bar {
background-color: #c73477;
border-color: #014186;
}
.layout.is-page.color3 .layout-drawer:hover {
background-color: #c5417e;
}
.color4,
.layout.is-page.color4 .layout-header {
background-color: #ffc107;
}
.layout.is-page.color4 .layout-side .layout-banner {
background-color: #e4af10
}
.layout.is-page.color4 .layout-side {
background-color: #212529;
color: #ebeef5;
}
.layout.is-page.color4 .layout-footer {
background-color: #343a40;
}
.layout.is-page.color4 .layout-header-bar {
background-color: #e2b221;
border-color: #014186;
}
.layout.is-page.color4 .layout-drawer:hover {
background-color: #e4af10;
}
.color5,
.layout.is-page.color5 .layout-header {
background-color: #17a2b8;
}
.color6,
.layout.is-page.color6 .layout-header {
background-color: #6610f2;
}
.layout.is-page.color6 .layout-side .layout-banner {
background-color: #4b0cb3
}
.layout.is-page.color6 .layout-side {
background-color: #212529;
color: #ebeef5;
}
.layout.is-page.color6 .layout-footer {
background-color: #343a40;
}
.layout.is-page.color6 .layout-header-bar {
background-color: #4b0ab5;
border-color: #014186;
}
.layout.is-page.color6 .layout-drawer:hover {
background-color: #4b0cb3;
}
.widget .dropdown-body h3 { .widget .dropdown-body h3 {
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;