mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 21:50:05 +08:00
!2328 doc(#I4RCRW): update sample code for Dialog ShowEdit/Search/SaveDialog
* doc: 增加弹窗示例代码 * feat: 增加 DialogSaveDetail 组件 * refactor: 微调 Popover 脚本代码 * revert: 恢复配置 * doc: 格式化代码
This commit is contained in:
parent
17b9482304
commit
26245c0db9
17
src/BootstrapBlazor.Shared/Components/DialogSaveDetail.razor
Normal file
17
src/BootstrapBlazor.Shared/Components/DialogSaveDetail.razor
Normal 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; }
|
||||||
|
}
|
@ -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><Dialog /></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">全屏弹窗(< 1200px)</Button>
|
<Button OnClick="@OnSizeDialogClick">全屏弹窗(< 1200px)</Button>
|
||||||
</DemoBlock>
|
</DemoBlock>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user