Bootstrap Blazor enterprise-level UI component library

Basic usage

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

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.PopoverConfirms> Localizer

<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="@Localizer["PopoverConfirmsNormalPopupBoxText"]"
                              Content="@Localizer["PopoverConfirmsNormalPopupBoxContent"]"
                              OnConfirm="@OnConfirm"
                              OnClose="@OnClose" />
        </div>
        <div class="d-flex justify-content-between m-4 align-items-center flex-fill">
            <PopConfirmButton Placement="Placement.Right"
                              Text="@Localizer["PopoverConfirmsNormalRightPopup"]"
                              Content="@Localizer["PopoverConfirmsNormalRightPopupContent"]"
                              OnConfirm="@OnConfirm"
                              OnClose="@OnClose" />
            <PopConfirmButton Placement="Placement.Left"
                              Text="@Localizer["PopoverConfirmsNormalLeftPopup"]"
                              Content="@Localizer["PopoverConfirmsNormalLeftPopupContent"]"
                              OnConfirm="@OnConfirm"
                              OnClose="@OnClose" />
        </div>
        <div class="d-flex justify-content-center">
            <PopConfirmButton Placement="Placement.Top"
                              Text="@Localizer["PopoverConfirmsNormalPopupAbove"]"
                              Content="@Localizer["PopoverConfirmsNormalPopupAboveContent"]"
                              OnConfirm="@OnConfirm"
                              OnClose="@OnClose" />
        </div>
    </div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    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;
    }

    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;
    }
}

Content Change the text displayed in the confirmation popup

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

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.PopoverConfirms> Localizer

<PopConfirmButton Placement="Placement.Top"
                  Color="Color.Danger"
                  ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                  ConfirmButtonColor="Color.Danger"
                  Text="@Localizer["PopoverConfirmsContentDelete"]"
                  Content="@Localizer["PopoverConfirmsContentDeleteContent"]" />

Asynchronous confirmation

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

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.PopoverConfirms> Localizer

<PopConfirmButton Placement="Placement.Top"
                  Color="Color.Danger"
                  ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                  ConfirmButtonColor="Color.Danger"
                  Text="@Localizer["PopoverConfirmsIsAsyncConfirmationText"]"
                  Content="@Localizer["PopoverConfirmsIsAsyncConfirmationContent"]"
                  Icon="fa-solid fa-font-awesome fa-fw"
                  IsAsync="true"
                  OnConfirm="OnAsyncConfirm" />

@code {
    private static Task OnAsyncConfirm() => Task.Delay(3000);
}

form submission

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

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.PopoverConfirms> Localizer

<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="@Localizer["PopoverConfirmsFormSubmitFormText"]"
                              Content="@Localizer["PopoverConfirmsFormSubmitFormContent"]"
                              Icon="fa-solid fa-floppy-disk fa-fw"
                              ButtonType="ButtonType.Submit"
                              IsAsync="true"
                              OnConfirm="OnAsyncSubmit" />
        </div>
    </div>
</ValidateForm>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private Foo? Model { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

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

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

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

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

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

hyperlink button

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

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.PopoverConfirms> Localizer

<PopConfirmButton Placement="Placement.Top"
                  ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                  Color="Color.Danger"
                  ConfirmButtonColor="Color.Danger"
                  Text="@Localizer["PopoverConfirmsIsLinkHyperLinkText"]"
                  Content="@Localizer["PopoverConfirmsIsLinkHyperLinkContent"]"
                  IsLink="true" />

custom style

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;
}

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.PopoverConfirms> Localizer

<PopConfirmButton Placement="Placement.Top"
                  ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                  Color="Color.Danger"
                  ConfirmButtonColor="Color.Danger"
                  Text="@Localizer["PopoverConfirmsCustomClassCustomButtonText"]"
                  Content="@Localizer["PopoverConfirmsCustomClassCustomButtonContent"]"
                  CustomClass="custom-popover" />

Customize the PopConfirmButton content

Customize the content by setting the BodyTemplate property

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.PopoverConfirms> Localizer

<PopConfirmButton Placement="Placement.Top"
                  ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
                  Color="Color.Primary"
                  ConfirmButtonColor="Color.Info"
                  Text="@Localizer["PopoverConfirmsBodyTemplateButtonText"]">
    <BodyTemplate>
        <div class="d-flex align-items-center">
            <span class="me-2">Label: </span>
            <BootstrapInput TValue="string" />
        </div>
    </BodyTemplate>
</PopConfirmButton>

Popconfirm bubble check box

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

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01