logoEnterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

Popconfirm bubble check box

Click on the element to pop up a bubble confirmation box.

The attributes of Popconfirm are very similar to Popover, so for repeated attributes, please refer to the attributes of Popover documentation, which is not explained in detail in this document.

Demo

Change the text displayed in the confirmation popup by setting the Content attribute

Demo

By setting the IsAsync attribute, the data is submitted asynchronously when the confirm button is clicked

Demo

By setting the ButtonType property value to ButtonType.Submit, the confirmation button is clicked to perform asynchronous form data submission

Demo

By setting the IsLink attribute the component uses the A tag to render

Demo

Set the CssClass custom component style

Demo
.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}

Attributes

Loading...

Event

Loading...
@page "/popconfirms"
@inject IStringLocalizer<PopoverConfirms> Localizer

<h3>Popconfirm bubble check box</h3>
<h4>Click on the element to pop up a bubble confirmation box.</h4>

<DemoBlock Title="Basic usage" Introduction="The attributes of <code>Popconfirm</code> are very similar to <code>Popover</code>, so for repeated attributes, please refer to the attributes of <a href='/popovers'><code>Popover</code><a> documentation, which is not explained in detail in this document." Name="Normal">
    <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="pop-up box below" Content="Is this a piece of content sure to delete?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-between m-4 align-items-center flex-fill">
                <PopConfirmButton Placement="Placement.Right" Text="right popup" Content="Is this a piece of content sure to delete?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
                <PopConfirmButton Placement="Placement.Left" Text="left popup" Content="Is this a piece of content sure to delete?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Top" Text="popup above" Content="Are you sure you want to delete a piece of content?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Content Change the text displayed in the confirmation popup" Introduction="Change the text displayed in the confirmation popup by setting the <code>Content</code> attribute" Name="Content">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger" ConfirmButtonColor="Color.Danger" Text="Delete confirmation button" Content="Are you sure you want to delete the data?" />
</DemoBlock>

<DemoBlock Title="Asynchronous confirmation" Introduction="By setting the <code>IsAsync</code> attribute, the data is submitted asynchronously when the confirm button is clicked" Name="IsAsync">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                      ConfirmButtonColor="Color.Danger" Text="Asynchronous confirmation" Content="Are you sure you want to delete the data?" Icon="fa-solid fa-font-awesome fa-fw" IsAsync="true"
                      OnConfirm="OnAsyncConfirm" />
</DemoBlock>

<DemoBlock Title="form submission" Introduction="By setting the <code>ButtonType</code> property value to <code>ButtonType.Submit</code>, the confirmation button is clicked to perform asynchronous form data submission" Name="Form">
    <ValidateForm Model="@Model" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInValidSubmit">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Address" />
            </div>
            <div class="col-12">
                <PopConfirmButton Placement="Placement.Top" Color="Color.Primary" ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
                                  ConfirmButtonColor="Color.Success" Text="submit Form" Content="Are you sure you want to submit data?" Icon="fa-solid fa-floppy-disk fa-fw"
                                  ButtonType="ButtonType.Submit" IsAsync="true" OnConfirm="OnAsyncSubmit" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace1" class="mt-3" />
</DemoBlock>

<DemoBlock Title="hyperlink button" Introduction="By setting the <code>IsLink</code> attribute the component uses the <code>A</code> tag to render" Name="IsLink">
    <PopConfirmButton Placement="Placement.Top" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger" Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger" Text="i am hyperlink" Content="Are you sure you want to delete the data?" IsLink="true" />
</DemoBlock>

<DemoBlock Title="custom style" Introduction="Set the <code>CssClass</code> custom component style" Name="CustomClass">
    <Pre>.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}
</Pre>
    <PopConfirmButton Placement="Placement.Top" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger" Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger" Text="custom style button" Content="Are you sure you want to delete the data?" CustomClass="custom-popover" />
</DemoBlock>

<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 Microsoft.AspNetCore.Components.Forms;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class PopoverConfirms
{
    [NotNull]
    private Foo? Model { get; set; }

    /// <summary>
    /// 
    /// </summary>
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 
    /// </summary>
    [NotNull]
    private BlockLogger? Trace1 { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Model = new() { Name = "Name", Education = EnumEducation.Primary, DateTime = DateTime.Now };
    }

    /// <summary>
    /// 
    /// </summary>
    private Task OnClose()
    {
        // This method is called back when the confirm button is clicked, and this method will not be called when the cancel button is clicked
        Trace.Log("OnClose Trigger");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 
    /// </summary>
    private Task OnConfirm()
    {
        // This method is called back when the confirm button is clicked, and this method will not be called when the cancel button is clicked
        Trace.Log("OnConfirm Trigger");
        return Task.CompletedTask;
    }

    private static Task OnAsyncConfirm() => Task.Delay(3000);

    private async Task OnAsyncSubmit()
    {
        Trace1.Log("异步提交");
        await Task.Delay(3000);
    }

    private async Task OnValidSubmit(EditContext context)
    {
        await Task.Delay(3000);
        Trace1.Log("数据合规");
    }

    private Task OnInValidSubmit(EditContext context)
    {
        Trace1.Log("数据非法");
        return Task.CompletedTask;
    }

    /// <summary>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = nameof(PopConfirmButton.IsLink),
            Description = "Whether to render the component for the A tag",
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Text",
            Description = "Show title",
            Type = "string",
            ValueList = "",
            DefaultValue = "删除"
        },
        new AttributeItem() {
            Name = "Icon",
            Description = "Button icon",
            Type = "string",
            ValueList = "",
            DefaultValue = "fa-solid fa-xmark"
        },
        new AttributeItem() {
            Name = "CloseButtonText",
            Description = "Close button display text",
            Type = "string",
            ValueList = "",
            DefaultValue = "关闭"
        },
        new AttributeItem() {
            Name = "CloseButtonColor",
            Description = "Confirm button color",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "Secondary"
        },
        new AttributeItem() {
            Name = "Color",
            Description = "Color",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "ConfirmButtonText",
            Description = "Confirm button display text",
            Type = "string",
            ValueList = "",
            DefaultValue = "确定"
        },
        new AttributeItem() {
            Name = "ConfirmButtonColor",
            Description = "Confirm button color",
            Type = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            ValueList = "",
            DefaultValue = "Primary"
        },
        new AttributeItem() {
            Name = "ConfirmIcon",
            Description = "Confirmation box icon",
            Type = "string",
            ValueList = "",
            DefaultValue = "fa-solid fa-circle-exclamation text-info"
        },
        new AttributeItem() {
            Name = "Content",
            Description = "Display text",
            Type = "string",
            ValueList = "",
            DefaultValue = "Confirm delete?"
        },
        new AttributeItem() {
            Name = "Placement",
            Description = "Location",
            Type = "Placement",
            ValueList = "Auto / Top / Left / Bottom / Right",
            DefaultValue = "Auto"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "Popover Popup title",
            Type = "string",
            ValueList = "",
            DefaultValue = " "
        }
    };

    /// <summary>
    /// Get event method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnConfirm",
            Description="Callback method when confirm is clicked",
            Type ="Func<Task>"
        },
        new EventItem()
        {
            Name = "OnClose",
            Description="Callback method when click close",
            Type ="Func<Task>"
        },
        new EventItem()
        {
            Name = "OnBeforeClick",
            Description="Click the callback method before confirming the pop-up window",
            Type ="Func<Task<bool>>"
        }
    };
}

B station related video link

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor Component library updated to 7.0.8-beta05

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915