Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

@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>&lt;PopoverConfirm /&gt;</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>>"
            },
        };
    }
}

B 站相关视频链接

[传送门]

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload