orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Modal 组件模板化

This commit is contained in:
Argo Window10 2019-11-28 11:49:13 +08:00
parent bfc1869d5f
commit 5b05c4b9ab
3 changed files with 110 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/admin/Bootstrap.Admin/Components/ModalBase.cs Normal file
View File

@ -0,0 +1,60 @@
using Bootstrap.Admin.Extensions;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace Bootstrap.Admin.Components
{
/// <summary>
/// 模态框组件类
/// </summary>
public class ModalBase : ComponentBase
{
/// <summary>
///
/// </summary>
[Inject]
protected IJSRuntime? JSRuntime { get; set; }
/// <summary>
///
/// </summary>
[Parameter]
public string Id { get; set; } = "";
/// <summary>
///
/// </summary>
[Parameter]
public string Title { get; set; } = "未设置";
/// <summary>
///
/// </summary>
[Parameter]
public RenderFragment? ModalBody { get; set; }
/// <summary>
///
/// </summary>
[Parameter]
public bool Backdrop { get; set; }
/// <summary>
///
/// </summary>
[Parameter]
public RenderFragment? ModalFooter { get; set; }
/// <summary>
///
/// </summary>
/// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InitModal();
}
}
}
}

44
src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
View File

@ -57,7 +57,49 @@
</div>
</div>
<Modal></Modal>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<Modal Id="exampleModal" Title="字典编辑窗口">
<ModalBody>
<form class="form-inline">
<div class="row">
<input type="hidden" id="dictID" />
<div class="form-group col-sm-6">
<label class="control-label" for="dictCate">字典标签</label>
<input type="text" class="form-control" id="dictCate" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="dictDefine">字典类型</label>
<input class="form-control" data-toggle="lgbSelect" />
<select data-toggle="lgbSelect" class="d-none" data-default-val="1" id="dictDefine">
<option value="0">系统使用</option>
<option value="1">自定义</option>
</select>
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="dictName">字典名称</label>
<input type="text" class="form-control" id="dictName" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="dictCode">字典代码</label>
<input type="text" class="form-control" id="dictCode" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
</div>
</div>
</form>
</ModalBody>
<ModalFooter>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" id="btnSubmit">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</ModalFooter>
</Modal>
@code {

25
src/admin/Bootstrap.Admin/Shared/Modal.razor
View File

@ -1,36 +1,25 @@
@inject IJSRuntime JSRuntime
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
@inherits ModalBase
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal fade" id="@Id" tabindex="-1" role="dialog" aria-labelledby="modal_@Id" aria-hidden="true" data-backdrop="@(Backdrop ? "none" : "static")">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<h5 class="modal-title" id="modal_@Id">@Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
@ModalBody
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
@ModalFooter
</div>
</div>
</div>
</div>
@code {
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InitModal();
}
}
}