Enterprise-level component library based on Bootstrap and Blazor
Popconfirm 气泡确认框
点击元素，弹出气泡确认框。
基础用法
Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
Demo
Content 更改确认弹窗显示文字
通过设置Content 属性更改确认弹窗显示文字
Demo
<PopoverConfirm />Attributes
Loading...
事件 Events
Loading...
@page "/popconfirms"
<h3>Popconfirm 气泡确认框</h3>
<h4>点击元素，弹出气泡确认框。</h4>
<Block Title="基础用法" Introduction="<code>Popconfirm</code> 的属性与 <code>Popover</code> 很类似，因此对于重复属性，请参考 <a href='/popovers'><code>Popover</code><a> 的文档，在此文档中不做详尽解释。">
<div class="d-flex justify-content-center border p-3 rounded">
<div class="d-flex flex-column w-100" style="height: 240px;">
<div class="d-flex justify-content-center">
<PopConfirmButton Placement="Placement.Bottom" ConfirmButtonColor="Color.Danger" Text="下面弹框" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
</div>
<div class="d-flex justify-content-between m-4 align-items-center flex-fill">
<PopConfirmButton Placement="Placement.Right" CloseButtonText="取消" Text="右侧弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
<PopConfirmButton Placement="Placement.Left" Text="左侧弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
</div>
<div class="d-flex justify-content-center">
<PopConfirmButton Placement="Placement.Top" Text="上面弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
</div>
</div>
</div>
<Logger @ref="Trace" class="mt-3" />
</Block>
<Block Title="Content 更改确认弹窗显示文字" Introduction="通过设置<code>Content</code> 属性更改确认弹窗显示文字">
<PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa fa-exclamation-triangle text-danger" ConfirmButtonColor="Color.Danger" Text="删除确认按钮" Content="确定删除数据吗？" />
</Block>
<Tips class="mt-3">
<p>
<code>Popconfirm</code> 组件使用了全局组件，需要再使用本组件的页面或者全局组件中内置本组件，示例代码如下：
</p>
</Tips>
<Pre><PopoverConfirm /></Pre>
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
// 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.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class PopoverConfirms
{
/// <summary>
///
/// </summary>
private Logger? Trace { get; set; }
/// <summary>
///
/// </summary>
private Task OnClose()
{
// 点击确认按钮后此方法被回调，点击取消按钮时此方法不会被调用
Trace?.Log("OnClose Trigger");
return Task.CompletedTask;
}
/// <summary>
///
/// </summary>
private Task OnConfirm()
{
// 点击确认按钮后此方法被回调，点击取消按钮时此方法不会被调用
Trace?.Log("OnConfirm Trigger");
return Task.CompletedTask;
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Text",
Description = "显示标题",
Type = "string",
ValueList = "",
DefaultValue = "删除"
},
new AttributeItem() {
Name = "Icon",
Description = "按钮图标",
Type = "string",
ValueList = "",
DefaultValue = "fa fa-remove"
},
new AttributeItem() {
Name = "CloseButtonText",
Description = "关闭按钮显示文字",
Type = "string",
ValueList = "",
DefaultValue = "关闭"
},
new AttributeItem() {
Name = "CloseButtonColor",
Description = "确认按钮颜色",
Type = "Color",
ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
DefaultValue = "Secondary"
},
new AttributeItem() {
Name = "Color",
Description = "颜色",
Type = "Color",
ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
DefaultValue = "None"
},
new AttributeItem() {
Name = "ConfirmButtonText",
Description = "确认按钮显示文字",
Type = "string",
ValueList = "",
DefaultValue = "确定"
},
new AttributeItem() {
Name = "ConfirmButtonColor",
Description = "确认按钮颜色",
Type = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
ValueList = "",
DefaultValue = "Primary"
},
new AttributeItem() {
Name = "ConfirmIcon",
Description = "确认框图标",
Type = "string",
ValueList = "",
DefaultValue = "fa fa-exclamation-circle text-info"
},
new AttributeItem() {
Name = "Cotent",
Description = "显示文字",
Type = "string",
ValueList = "",
DefaultValue = "确认删除吗？"
},
new AttributeItem() {
Name = "Placement",
Description = "位置",
Type = "Placement",
ValueList = "Auto / Top / Left / Bottom / Right",
DefaultValue = "Auto"
},
new AttributeItem() {
Name = "Title",
Description = "Popover 弹窗标题",
Type = "string",
ValueList = "",
DefaultValue = " "
},
};
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private IEnumerable<EventItem> GetEvents() => new EventItem[]
{
new EventItem()
{
Name = "OnConfirm",
Description="点击确认时回调方法",
Type ="Func<Task>"
},
new EventItem()
{
Name = "OnClose",
Description="点击关闭时回调方法",
Type ="Func<Task>"
},
new EventItem()
{
Name = "OnBeforeClick",
Description="点击确认弹窗前回调方法 返回真时弹出弹窗 返回假时不弹出",
Type ="Func<Task<bool>>"
},
};
}
}