!2328 doc(#I4RCRW): update sample code for Dialog ShowEdit/Search/SaveDialog

* doc: 增加弹窗示例代码
* feat: 增加 DialogSaveDetail 组件
* refactor: 微调 Popover 脚本代码
* revert: 恢复配置
* doc: 格式化代码
This commit is contained in:
Argo 2022-01-18 13:32:01 +00:00
parent 17b9482304
commit 26245c0db9
3 changed files with 89 additions and 8 deletions

View File

@ -0,0 +1,17 @@
<div class="row form-inline g-3">
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="Value.Name" ShowLabel="true" DisplayText="姓名" />
</div>
<div class="col-12 col-sm-6">
<BootstrapInput @bind-Value="Value.Count" ShowLabel="true" DisplayText="数量" />
</div>
</div>
@code {
/// <summary>
///
/// </summary>
[Parameter]
[NotNull]
public Foo? Value { get; set; }
}

View File

@ -4,14 +4,6 @@
<h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4> <h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>
<Tips class="mt-3">
<p>
本组件使用注入服务的形式提供功能,使用时用户体验效果非常舒适,随时随地的调用,需要在使用本组件的页面中内置 <code>Dialog</code> 组件,或者在 <code>MainLayout</code> 主布局组件中内置,示例代码如下:
</p>
</Tips>
<Pre>&lt;Dialog /&gt;</Pre>
<DemoBlock Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" Name="Keyboard"> <DemoBlock Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" Name="Keyboard">
<div> <div>
<p>通过设置 <code>DialogOption</code> <code>IsKeyboard</code> 参数,开启弹窗是否支持 <kbd>ESC</kbd>,请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p> <p>通过设置 <code>DialogOption</code> <code>IsKeyboard</code> 参数,开启弹窗是否支持 <kbd>ESC</kbd>,请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p>
@ -100,6 +92,35 @@
<BlockLogger @ref="Trace" class="mt-3" /> <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="编辑对话框" Introduction="通过 <code>ShowEditDialog</code> 方法弹出保存对话框" Name="EditDialog">
<p>功能介绍</p>
<ul class="ul-demo">
<li>点击按钮弹出编辑弹窗</li>
<li>通过 <code>EditDialogOption</code> 参数对弹窗进行设置</li>
<li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成带客户端验证的表单窗口</li>
</ul>
<Button OnClick="@OnEditDialogClick">编辑弹窗</Button>
</DemoBlock>
<DemoBlock Title="搜索对话框" Introduction="通过 <code>ShowSearchDialog</code> 方法弹出保存对话框" Name="SearchDialog">
<p>功能介绍</p>
<ul class="ul-demo">
<li>点击按钮弹出搜索弹窗</li>
<li>通过 <code>SearchDialogOption</code> 参数对弹窗进行设置</li>
<li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成搜索窗口</li>
</ul>
<Button OnClick="@OnSearchDialogClick">搜索弹窗</Button>
</DemoBlock>
<DemoBlock Title="保存对话框" Introduction="通过 <code>ShowSaveDialog</code> 方法弹出保存对话框" Name="SaveDialog">
<p>功能介绍</p>
<ul class="ul-demo">
<li>点击按钮弹出保存弹窗</li>
<li>设计出发点通过给定 <code>TComponent</code> 自动生成保存窗口,通过设置 <code>saveCallback</code> 在保存回调方法中进行数据处理,<code>TComponent</code> 泛型组件所需要参数可以通过 <code>parameters</code> 进行传递</li>
</ul>
<Button OnClick="@OnSaveDialogClick">保存弹窗</Button>
</DemoBlock>
<DemoBlock Title="对话框大小" Introduction="通过设置 <code>Size</code> <code>FullScreenSize</code> 参数组合可以实现非常灵活的窗体大小控制" Name="ModalDialog"> <DemoBlock Title="对话框大小" Introduction="通过设置 <code>Size</code> <code>FullScreenSize</code> 参数组合可以实现非常灵活的窗体大小控制" Name="ModalDialog">
<Button OnClick="@OnSizeDialogClick">全屏弹窗(&lt; 1200px)</Button> <Button OnClick="@OnSizeDialogClick">全屏弹窗(&lt; 1200px)</Button>
</DemoBlock> </DemoBlock>

View File

@ -7,6 +7,7 @@ using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components; using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.Localization;
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis; using System.Diagnostics.CodeAnalysis;
@ -29,6 +30,10 @@ public sealed partial class Dialogs
[NotNull] [NotNull]
private DialogService? DialogService { get; set; } private DialogService? DialogService { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
private bool IsKeyboard { get; set; } private bool IsKeyboard { get; set; }
private void OnClickKeyboard() private void OnClickKeyboard()
@ -224,6 +229,44 @@ public sealed partial class Dialogs
}); });
} }
private async Task OnEditDialogClick()
{
var option = new EditDialogOption<Foo>()
{
Title = "编辑弹窗",
Model = new Foo(),
RowType = RowType.Inline,
ItemsPerRow = 2,
ItemChangedType = ItemChangedType.Update
};
await DialogService.ShowEditDialog(option);
}
private async Task OnSearchDialogClick()
{
var option = new SearchDialogOption<Foo>()
{
Title = "搜索弹窗",
Model = new Foo(),
RowType = RowType.Inline,
ItemsPerRow = 2,
};
await DialogService.ShowSearchDialog(option);
}
private async Task OnSaveDialogClick()
{
var foo = Foo.Generate(Localizer);
await DialogService.ShowSaveDialog<DialogSaveDetail>("保存", () =>
{
// 此处可以访问 foo 实例进行入库操作等
return Task.FromResult(true);
}, new Dictionary<string, object?>
{
["Value"] = foo
});
}
/// <summary> /// <summary>
/// 获得属性方法 /// 获得属性方法
/// </summary> /// </summary>