
Drawer 抽屉
有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验
基本用法
呼出一个临时的侧边栏, 可以从多个方向呼出
Demo
抽屉内布局、组件等完全可以自定义
点击遮罩关闭
通过设置 IsBackdrop
属性为 true
,点击遮罩部分时自动关闭抽屉
Demo
点击遮罩阴影部分自动关闭抽屉
Attributes
Loading...
@page "/drawers"
<h3>Drawer 抽屉</h3>
<h4>有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验</h4>
<DemoBlock Title="基本用法" Introduction="呼出一个临时的侧边栏, 可以从多个方向呼出" Name="Normal">
<p class="d-flex flex-wrap drawer-demo">
<RadioList TValue="SelectedItem" Items="@DrawerDirection" OnSelectedChanged="@OnStateChanged" />
</p>
<p>
<button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = true)">点我打开</button>
</p>
<Drawer Placement="@DrawerAlign" IsOpen="@IsOpen">
<div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
<p>抽屉内布局、组件等完全可以自定义</p>
<button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">关闭抽屉</button>
</div>
</Drawer>
</DemoBlock>
<DemoBlock Title="点击遮罩关闭" Introduction="通过设置 <code>IsBackdrop</code> 属性为 <code>true</code>,点击遮罩部分时自动关闭抽屉" Name="Placement">
<p>
<button type="button" class="btn btn-primary" @onclick="@OpenDrawer">点我打开</button>
</p>
<Drawer Placement="Placement.Left" @bind-IsOpen="@IsBackdropOpen" IsBackdrop="true">
<p class="mt-3 text-center">
点击遮罩阴影部分自动关闭抽屉
</p>
</Drawer>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Drawers
{
private IEnumerable<SelectedItem> DrawerDirection { get; } = new SelectedItem[] {
new SelectedItem("left", "从左向右") { Active = true },
new SelectedItem("right", "从右向左"),
new SelectedItem("top", "从上到下"),
new SelectedItem("bottom", "从下向上")
};
private Placement DrawerAlign { get; set; }
private Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem val)
{
DrawerAlign = val.Value switch
{
"right" => Placement.Right,
"top" => Placement.Top,
"bottom" => Placement.Bottom,
_ => Placement.Left
};
IsOpen = false;
StateHasChanged();
return Task.CompletedTask;
}
private bool IsOpen { get; set; }
private bool IsBackdropOpen { get; set; }
private void OpenDrawer()
{
IsBackdropOpen = true;
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Width",
Description = "抽屉宽度",
Type = "string",
ValueList = " — ",
DefaultValue = "360px"
},
new AttributeItem() {
Name = "Height",
Description = "抽屉高度",
Type = "string",
ValueList = " — ",
DefaultValue = "290px"
},
new AttributeItem() {
Name = "IsOpen",
Description = "抽屉是否打开",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "IsBackdrop",
Description = "点击遮罩是否关闭抽屉",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "OnClickBackdrop",
Description = "点击背景遮罩时回调委托方法",
Type = "Action",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Placement",
Description = "组件出现位置",
Type = "Placement",
ValueList = "Left|Right|Top|Bottom",
DefaultValue = "Left"
},
new AttributeItem() {
Name = "ChildContent",
Description = "子组件",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
};
}