test/BootstrapBlazor3
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2024-12-07 14:39:24 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

!796 feat(#I2AGVS): add Drawer demo on template

Browse Source 
* 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:
Argo 2020-12-23 00:19:04 +08:00
parent 7c8ab6e1fd
commit 42345e6b43
14 changed files with 408 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/BootstrapBlazor.Shared/Pages/Components/LayoutPage.razor
View File

@ -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>

101
src/BootstrapBlazor.Shared/Pages/Components/LayoutPage.razor.cs
View File

@ -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);
}
}
}

69
src/BootstrapBlazor.Shared/Pages/LayoutPages.razor
View File

@ -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>

104
src/BootstrapBlazor.Shared/Pages/LayoutPages.razor.cs
View File

@ -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();
}
}
}

108
src/BootstrapBlazor.Shared/Shared/PageLayout.razor
View File

@ -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>

35
src/BootstrapBlazor.Shared/Shared/PageLayout.razor.cs
View File

@ -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;
}
}
}

99
src/BootstrapBlazor.Shared/wwwroot/css/site.css
View File

@ -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;
}

3
src/BootstrapBlazor.Shared/wwwroot/js/common.js
View File

@ -158,6 +158,9 @@
});
});
}, 500);
},
tooltip: function () {
$('[data-toggle="tooltip"]').tooltip();
}
});

2
src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long

19
src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css vendored
View File

@ -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%);
}

2
src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js vendored
View File

@ -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);
}
}

2
src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js vendored
View File

File diff suppressed because one or more lines are too long