mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 05:29:47 +08:00
!796 feat(#I2AGVS): add Drawer demo on template
* style: 微调侧边栏样式 * docs: 微调文档间隙 * scripts: 结构调整增加 tooltip 提示 * style: 微调 Drawer 组件 z-index * docs: 更新 Toggle/Switch OnValueChanged 文档 * feat: Toggle 组件增加 OnValueChanged 回调委托 * style: 微调 Tab 样式 * refactor: 删除 LayoutPage 组件 * refactor: 增加多标签功能默认开启 * feat: 增加左右结构与上下结构更改功能 * docs: 更改关闭按钮位置 * docs: 增加右侧功能抽屉组件 * scripts: 抽屉弹出时消除 body 滚动条 * style: 抽屉组件内部增加滚动条
This commit is contained in:
parent
7c8ab6e1fd
commit
42345e6b43
@ -1,55 +0,0 @@
|
||||
<div style="@StyleString">
|
||||
|
||||
<h4>整页面级别组件</h4>
|
||||
|
||||
<Tips class="mt-3">
|
||||
<p>通过内置组件 <code>Layout</code> 进行整页面布局,可通过 <code>dotnet new bbapp</code> 或者安装 <code>Visual Studio 2019</code> 项目插件选择 <code>Bootstrap Blazor 项目模板</code> 即可自动生成,详细文档请点击 <a href="template" target="_blank">[传送门]</a></p>
|
||||
<div>
|
||||
<b>特别注意:</b>
|
||||
<br />
|
||||
<code>Layout</code> 组件开启<code>多标签</code>模式后,如果有 <code>Razor 组件</code> 在额外的程序集中时,请正确设置 <code>AdditionalAssemblies</code> 属性值,以便标签组件内路由正确解析,相关文档 <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-to-components-from-multiple-assemblies" target="_blank">[传送门]</a>
|
||||
</div>
|
||||
</Tips>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>布局调整</p>
|
||||
<Radio Items="@SideBarItems" OnStateChanged="@OnSideChanged" />
|
||||
<Checkbox @bind-Value="ShowFooter" OnStateChanged="OnFooterChanged" ShowAfterLabel="true" DisplayText="显示页脚" />
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>固定调整</p>
|
||||
<Checkbox @bind-Value="@IsFixedHeader" OnStateChanged="@OnHeaderStateChanged" ShowAfterLabel="true" DisplayText="固定页头" class="mr-3" />
|
||||
<Checkbox @bind-Value="@IsFixedFooter" OnStateChanged="@OnFooterStateChanged" ShowAfterLabel="true" DisplayText="固定页脚" />
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>收缩调整</p>
|
||||
<div>请点击 <code>Header</code> 中的绿色小按钮</div>
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>高度调整</p>
|
||||
<div class="page-layout-demo-option-height">
|
||||
<span>视图高度</span>
|
||||
<Slider @bind-Value="@Height" style="margin: 0 1rem;" />
|
||||
<BootstrapInput Value="@(Height * 100)" readonly style="width: 80px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>布局代码</p>
|
||||
<Tab>
|
||||
<TabItem Text="组件文件(PageLayout.razor)">
|
||||
<Pre CodeFile="layout.6.html"></Pre>
|
||||
</TabItem>
|
||||
<TabItem Text="后台文件(PageLayout.razor.cs)">
|
||||
<Pre CodeFile="layout.7.html"></Pre>
|
||||
</TabItem>
|
||||
<TabItem Text="页面文件(Demo.razor)">
|
||||
<Tips>请注意:开发过程中设置 <code>layout</code> 即可继承上面设置的布局,功能页面中仅实现自己功能即可</Tips>
|
||||
<Pre CodeFile="layout.8.html"></Pre>
|
||||
</TabItem>
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
@ -1,101 +0,0 @@
|
||||
// **********************************
|
||||
// 框架名称:BootstrapBlazor
|
||||
// 框架作者:Argo Zhang
|
||||
// 开源地址:
|
||||
// Gitee : https://gitee.com/LongbowEnterprise/BootstrapBlazor
|
||||
// GitHub: https://github.com/ArgoZhang/BootstrapBlazor
|
||||
// 开源协议:Apache-2.0 (https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/dev/LICENSE)
|
||||
// **********************************
|
||||
|
||||
using BootstrapBlazor.Components;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace BootstrapBlazor.Shared.Pages.Components
|
||||
{
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
public sealed partial class LayoutPage
|
||||
{
|
||||
private IEnumerable<SelectedItem> SideBarItems { get; set; } = new SelectedItem[]
|
||||
{
|
||||
new SelectedItem("left-right", "左右结构"),
|
||||
new SelectedItem("top-bottom", "上下结构")
|
||||
};
|
||||
|
||||
private string? StyleString => CssBuilder.Default()
|
||||
.AddClass($"height: {Height * 100}px", Height > 0)
|
||||
.Build();
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int Height { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool ShowFooter { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsFixedHeader { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 是否固定页脚
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsFixedFooter { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 侧边栏是否外置
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsFullSide { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public Func<bool, bool, bool, bool, Task>? OnLayoutChanged { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
SideBarItems.ElementAt(IsFullSide ? 0 : 1).Active = true;
|
||||
}
|
||||
|
||||
private async Task OnFooterChanged(CheckboxState state, bool val)
|
||||
{
|
||||
if (OnLayoutChanged != null) await OnLayoutChanged.Invoke(IsFullSide, IsFixedHeader, IsFixedFooter, ShowFooter);
|
||||
}
|
||||
|
||||
private async Task OnHeaderStateChanged(CheckboxState state, bool val)
|
||||
{
|
||||
if (OnLayoutChanged != null) await OnLayoutChanged.Invoke(IsFullSide, IsFixedHeader, IsFixedFooter, ShowFooter);
|
||||
}
|
||||
|
||||
private async Task OnFooterStateChanged(CheckboxState state, bool val)
|
||||
{
|
||||
if (OnLayoutChanged != null) await OnLayoutChanged.Invoke(IsFullSide, IsFixedHeader, IsFixedFooter, ShowFooter);
|
||||
}
|
||||
|
||||
private async Task OnSideChanged(CheckboxState state, SelectedItem item)
|
||||
{
|
||||
IsFullSide = item.Value == "left-right";
|
||||
if (OnLayoutChanged != null) await OnLayoutChanged.Invoke(IsFullSide, IsFixedHeader, IsFixedFooter, ShowFooter);
|
||||
}
|
||||
}
|
||||
}
|
@ -1,4 +1,71 @@
|
||||
@page "/layout-page"
|
||||
@layout PageLayout
|
||||
|
||||
<LayoutPage IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter" ShowFooter="@ShowFooter" OnLayoutChanged="@OnLayoutChanged"></LayoutPage>
|
||||
<div style="@StyleString">
|
||||
|
||||
<h4>整页面级别组件</h4>
|
||||
|
||||
<Tips class="mt-3">
|
||||
<p>通过内置组件 <code>Layout</code> 进行整页面布局,可通过 <code>dotnet new bbapp</code> 或者安装 <code>Visual Studio 2019</code> 项目插件选择 <code>Bootstrap Blazor 项目模板</code> 即可自动生成,详细文档请点击 <a href="template" target="_blank">[传送门]</a></p>
|
||||
<div>
|
||||
<b>特别注意:</b>
|
||||
<br />
|
||||
<code>Layout</code> 组件开启 <code>多标签</code> 模式后,如果有 <code>Razor 组件</code> 在额外的程序集中时,请正确设置 <code>AdditionalAssemblies</code> 属性值,以便标签组件内路由正确解析,相关文档 <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-to-components-from-multiple-assemblies" target="_blank">[传送门]</a>
|
||||
</div>
|
||||
</Tips>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>布局调整</p>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<Radio Items="@SideBarItems" OnStateChanged="@OnSideChanged" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<Checkbox @bind-Value="ShowFooter" OnStateChanged="OnFooterChanged" ShowAfterLabel="true" DisplayText="显示页脚" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<Switch @bind-Value="@UseTabSet" OnText="多标签" OffText="单页" OnColor="@Color.Success" OffColor="@Color.Secondary" style="width: 120px;" OnValueChanged="OnUseTabSetChanged"></Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>固定调整</p>
|
||||
<Checkbox @bind-Value="@IsFixedHeader" OnStateChanged="@OnHeaderStateChanged" ShowAfterLabel="true" DisplayText="固定页头" class="mr-3" />
|
||||
<Checkbox @bind-Value="@IsFixedFooter" OnStateChanged="@OnFooterStateChanged" ShowAfterLabel="true" DisplayText="固定页脚" />
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>收缩调整</p>
|
||||
<div>请点击 <code>Header</code> 中的绿色小按钮</div>
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>高度调整</p>
|
||||
<div class="page-layout-demo-option-height">
|
||||
<span>视图高度</span>
|
||||
<Slider @bind-Value="@Height" style="margin: 0 1rem;" />
|
||||
<BootstrapInput Value="@(Height * 100)" readonly style="width: 80px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>布局代码</p>
|
||||
<Tab>
|
||||
<TabItem Text="组件文件(PageLayout.razor)">
|
||||
<Pre CodeFile="layout.6.html"></Pre>
|
||||
</TabItem>
|
||||
<TabItem Text="后台文件(PageLayout.razor.cs)">
|
||||
<Pre CodeFile="layout.7.html"></Pre>
|
||||
</TabItem>
|
||||
<TabItem Text="页面文件(Demo.razor)">
|
||||
<Tips>请注意:开发过程中设置 <code>layout</code> 即可继承上面设置的布局,功能页面中仅实现自己功能即可</Tips>
|
||||
<Pre CodeFile="layout.8.html"></Pre>
|
||||
</TabItem>
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -7,9 +7,12 @@
|
||||
// 开源协议:Apache-2.0 (https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/dev/LICENSE)
|
||||
// **********************************
|
||||
|
||||
using BootstrapBlazor.Components;
|
||||
using BootstrapBlazor.Shared.Shared;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Collections.Generic;
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace BootstrapBlazor.Shared.Pages
|
||||
@ -19,15 +22,48 @@ namespace BootstrapBlazor.Shared.Pages
|
||||
/// </summary>
|
||||
public sealed partial class LayoutPages
|
||||
{
|
||||
private bool IsFixedHeader { get; set; }
|
||||
private IEnumerable<SelectedItem> SideBarItems { get; set; } = new SelectedItem[]
|
||||
{
|
||||
new SelectedItem("left-right", "左右结构"),
|
||||
new SelectedItem("top-bottom", "上下结构")
|
||||
};
|
||||
|
||||
private bool IsFixedFooter { get; set; }
|
||||
private string? StyleString => CssBuilder.Default()
|
||||
.AddClass($"height: {Height * 100}px", Height > 0)
|
||||
.Build();
|
||||
|
||||
private bool IsFullSide { get; set; }
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
private int Height { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
private bool ShowFooter { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
private bool IsFixedHeader { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 是否固定页脚
|
||||
/// </summary>
|
||||
private bool IsFixedFooter { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 侧边栏是否外置
|
||||
/// </summary>
|
||||
private bool IsFullSide { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 是否开启多标签模式
|
||||
/// </summary>
|
||||
private bool UseTabSet { get; set; }
|
||||
|
||||
[CascadingParameter]
|
||||
[NotNull]
|
||||
private PageLayout? RootPage { get; set; }
|
||||
|
||||
/// <summary>
|
||||
@ -37,34 +73,58 @@ namespace BootstrapBlazor.Shared.Pages
|
||||
{
|
||||
await base.OnInitializedAsync();
|
||||
|
||||
if (RootPage != null)
|
||||
{
|
||||
IsFullSide = RootPage.IsFullSide;
|
||||
IsFixedHeader = RootPage.IsFixedHeader;
|
||||
IsFixedFooter = RootPage.IsFixedFooter;
|
||||
ShowFooter = RootPage.ShowFooter;
|
||||
}
|
||||
IsFullSide = RootPage.IsFullSide;
|
||||
IsFixedHeader = RootPage.IsFixedHeader;
|
||||
IsFixedFooter = RootPage.IsFixedFooter;
|
||||
ShowFooter = RootPage.ShowFooter;
|
||||
UseTabSet = RootPage.UseTabSet;
|
||||
|
||||
SideBarItems.ElementAt(IsFullSide ? 0 : 1).Active = true;
|
||||
}
|
||||
|
||||
private async Task OnFooterChanged(CheckboxState state, bool val)
|
||||
{
|
||||
await UpdateAsync();
|
||||
}
|
||||
|
||||
private async Task OnHeaderStateChanged(CheckboxState state, bool val)
|
||||
{
|
||||
await UpdateAsync();
|
||||
}
|
||||
|
||||
private async Task OnFooterStateChanged(CheckboxState state, bool val)
|
||||
{
|
||||
await UpdateAsync();
|
||||
}
|
||||
|
||||
private async Task OnSideChanged(CheckboxState state, SelectedItem item)
|
||||
{
|
||||
IsFullSide = item.Value == "left-right";
|
||||
await UpdateAsync();
|
||||
}
|
||||
|
||||
private async Task OnUseTabSetChanged(bool val)
|
||||
{
|
||||
await UpdateAsync();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
public async Task OnLayoutChanged(bool fullside, bool fixedHeader, bool fixedFooter, bool showFooter)
|
||||
public async Task UpdateAsync()
|
||||
{
|
||||
if (RootPage != null)
|
||||
await RootPage.SetParametersAsync(ParameterView.FromDictionary(new Dictionary<string, object>()
|
||||
{
|
||||
await RootPage.SetParametersAsync(ParameterView.FromDictionary(new Dictionary<string, object>()
|
||||
{
|
||||
[nameof(RootPage.IsFullSide)] = fullside,
|
||||
[nameof(RootPage.IsFixedFooter)] = fixedFooter && showFooter,
|
||||
[nameof(RootPage.IsFixedHeader)] = fixedHeader,
|
||||
[nameof(RootPage.ShowFooter)] = showFooter,
|
||||
}));
|
||||
[nameof(RootPage.IsFullSide)] = IsFullSide,
|
||||
[nameof(RootPage.IsFixedFooter)] = IsFixedFooter && ShowFooter,
|
||||
[nameof(RootPage.IsFixedHeader)] = IsFixedHeader,
|
||||
[nameof(RootPage.ShowFooter)] = ShowFooter,
|
||||
[nameof(RootPage.UseTabSet)] = UseTabSet
|
||||
}));
|
||||
|
||||
// 获得 Razor 示例代码
|
||||
RootPage.Update();
|
||||
}
|
||||
// 获得 Razor 示例代码
|
||||
RootPage.Update();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -7,9 +7,9 @@
|
||||
UseTabSet="@UseTabSet" AdditionalAssemblies="new[] { GetType().Assembly }">
|
||||
<Header>
|
||||
<span class="ml-3 flex-fill">Bootstrap of Blazor</span>
|
||||
<Switch @bind-Value="@UseTabSet" OnText="多标签" OffText="单页" OnColor="@Color.Danger" OffColor="@Color.Dark" style="width: 120px;"></Switch>
|
||||
<img src="_content/BootstrapBlazor.Shared/images/Argo.png" class="layout-avatar-right" />
|
||||
<span class="ml-3 d-none d-sm-block">超级管理员</span>
|
||||
<span class="mx-3 d-none d-sm-block">超级管理员</span>
|
||||
<div class="layout-drawer" @onclick="@ToggleDrawer"><i class="fa fa-gears"></i></div>
|
||||
</Header>
|
||||
<Side>
|
||||
<div class="layout-banner">
|
||||
@ -35,4 +35,108 @@
|
||||
</div>
|
||||
</Footer>
|
||||
</Layout>
|
||||
<Drawer Placement="Placement.Right" @bind-IsOpen="@IsOpen">
|
||||
<div class="layout-drawer-body">
|
||||
<div class="page-layout-demo-option">
|
||||
<p>布局调整</p>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="layout-item @(IsFullSide ? "active d-flex" : "d-flex")" @onclick="@(e => IsFullSide = true)" data-toggle="tooltip" title="左右结构">
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="layout-item flex-column @(IsFullSide ? "d-flex" : "active d-flex")" @onclick="@(e => IsFullSide = false)" data-toggle="tooltip" title="上下结构">
|
||||
<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>
|
||||
</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-right">
|
||||
<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-right">
|
||||
<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.Primary"></Switch>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<span>显示页脚</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-layout-demo-option">
|
||||
<p>主题配色</p>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<span class="color color1"></span>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<span class="color color2"></span>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<span class="color color3"></span>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<span class="color color4"></span>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<span class="color color5"></span>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<span class="color 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-right">
|
||||
<span>@(UseTabSet ? "多标签" : "单页")</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 text-right">
|
||||
<button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
</CascadingValue>
|
||||
|
@ -9,7 +9,10 @@
|
||||
|
||||
using BootstrapBlazor.Components;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.JSInterop;
|
||||
using System.Collections.Generic;
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace BootstrapBlazor.Shared.Shared
|
||||
{
|
||||
@ -18,6 +21,8 @@ namespace BootstrapBlazor.Shared.Shared
|
||||
/// </summary>
|
||||
public sealed partial class PageLayout
|
||||
{
|
||||
private bool IsOpen { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 是否固定页头
|
||||
/// </summary>
|
||||
@ -42,7 +47,30 @@ namespace BootstrapBlazor.Shared.Shared
|
||||
[Parameter]
|
||||
public bool ShowFooter { get; set; } = true;
|
||||
|
||||
private bool UseTabSet { get; set; }
|
||||
/// <summary>
|
||||
/// 获得/设置 是否开启多标签模式
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool UseTabSet { get; set; } = true;
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IJSRuntime? JSRuntime { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnAfterRenderAsync 方法
|
||||
/// </summary>
|
||||
/// <param name="firstRender"></param>
|
||||
/// <returns></returns>
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
|
||||
if (firstRender)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("$.tooltip");
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 更新组件方法
|
||||
@ -55,5 +83,10 @@ namespace BootstrapBlazor.Shared.Shared
|
||||
new MenuItem() { Text = "布局网页", Icon = "fa fa-fw fa-desktop", Url = "layout-page" },
|
||||
new MenuItem() { Text = "示例网页", Icon = "fa fa-fw fa-laptop", Url = "layout-demo" }
|
||||
};
|
||||
|
||||
private void ToggleDrawer()
|
||||
{
|
||||
IsOpen = !IsOpen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1151,3 +1151,102 @@ section {
|
||||
.culture-selector .form-select {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.layout-drawer {
|
||||
padding: 13px;
|
||||
margin-right: -1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layout-drawer:hover {
|
||||
background-color: #1893a7;
|
||||
}
|
||||
|
||||
.layout-drawer-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.layout-item {
|
||||
cursor: pointer;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
height: 80px;
|
||||
width: 120px;
|
||||
transition: border .3s linear;
|
||||
}
|
||||
|
||||
.layout-item:hover,
|
||||
.layout-item.active {
|
||||
border: 2px solid #28a745;
|
||||
}
|
||||
|
||||
.layout-item .layout-left {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.layout-item .layout-left .layout-left-header {
|
||||
height: 16px;
|
||||
background-color: #367fa9;
|
||||
}
|
||||
|
||||
.layout-item .layout-left .layout-left-body,
|
||||
.layout-item .layout-body .layout-left {
|
||||
background-color: #2f4050;
|
||||
}
|
||||
|
||||
.layout-item .layout-right .layout-right-header,
|
||||
.layout-item .layout-top {
|
||||
background-color: #17a2b8;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.layout-item .layout-right .layout-right-footer,
|
||||
.layout-item .layout-footer {
|
||||
background-color: #5b6e84;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.layout-item .layout-top,
|
||||
.layout-item .layout-body,
|
||||
.layout-item .layout-footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 4px;
|
||||
transition: border .3s linear;
|
||||
}
|
||||
|
||||
.color:hover {
|
||||
border: 2px solid #28a745;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
background-color: #e83e8c;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
background-color: #ffe484;
|
||||
}
|
||||
|
||||
.color5 {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.color6 {
|
||||
background-color: #4a3275;
|
||||
}
|
||||
|
@ -158,6 +158,9 @@
|
||||
});
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
tooltip: function () {
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
}
|
||||
});
|
||||
|
||||
|
File diff suppressed because one or more lines are too long
@ -3189,27 +3189,27 @@ input:disabled,
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tabs-border-card .tabs-header {
|
||||
.tabs-border-card > .tabs-header {
|
||||
background-color: #f5f7fa;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tabs-border-card .tabs-header .tabs-item.is-active {
|
||||
.tabs-border-card > .tabs-header .tabs-item.is-active {
|
||||
color: #409eff;
|
||||
background-color: #fff;
|
||||
border-right-color: #dcdfe6;
|
||||
border-left-color: #dcdfe6;
|
||||
}
|
||||
|
||||
.tabs-border-card .tabs-header .tabs-item {
|
||||
.tabs-border-card > .tabs-header .tabs-item {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.tabs-border-card .tabs-header .tabs-item:not(:hover):not(.is-active) {
|
||||
.tabs-border-card > .tabs-header .tabs-item:not(:hover):not(.is-active) {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.tabs-border-card .tabs-header .tabs-item:hover {
|
||||
.tabs-border-card > .tabs-header .tabs-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
@ -4719,8 +4719,8 @@ input:disabled,
|
||||
}
|
||||
|
||||
.layout.is-page .layout-side {
|
||||
background-color: #2f4050;
|
||||
color: #dcdfe6;
|
||||
background-color: #343a40;
|
||||
color: #c2c7d0;
|
||||
}
|
||||
|
||||
.layout-header-bar {
|
||||
@ -4864,6 +4864,7 @@ input:disabled,
|
||||
|
||||
.layout.is-page .layout-side {
|
||||
width: 214px;
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
|
||||
}
|
||||
|
||||
.layout.is-page .layout-side.is-collapsed,
|
||||
@ -5278,7 +5279,7 @@ input:disabled,
|
||||
margin: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transform: translateX(-100%);
|
||||
z-index: 2020;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.drawer-container {
|
||||
@ -5298,7 +5299,7 @@ input:disabled,
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
transition: transform .3s linear;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1997,6 +1997,7 @@
|
||||
var $el = $(el);
|
||||
if (open) {
|
||||
$el.addClass('is-open');
|
||||
$('body').addClass('overflow-hidden');
|
||||
}
|
||||
else {
|
||||
if ($el.hasClass('is-open')) {
|
||||
@ -2004,6 +2005,7 @@
|
||||
var handler = window.setTimeout(function () {
|
||||
window.clearTimeout(handler);
|
||||
$el.removeClass('is-close');
|
||||
$('body').removeClass('overflow-hidden');
|
||||
}, 350);
|
||||
}
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user