mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 13:39:39 +08:00
!825 feat(#I2AZNB): template page support switch theme feature
* docs: 模板演示页面增加 Theme 示例
This commit is contained in:
parent
6933d4a59d
commit
8224785a0f
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user