logo

Popconfirm

A simple and compact confirmation dialog of an action.

When To Use

A simple and compact dialog used for asking for user confirmation.

The difference with the confirm modal dialog is that it's more lightweight than the static popped full-screen confirm modal.

Two types

There are 2 rendering approaches for Popconfirm:

  1. Wraps child element (content of the Popconfirm) with a <div> (default approach).
  2. Child element is not wrapped with anything. This approach requires usage of <Unbound> tag inside <Popconfirm> and depending on the child element type (please refer to the first example):
    • html tag: has to have its @ref set to @context.Current
    • Ant Design Blazor component: has to have its RefBack attribute set to @context.

Examples

The basic example of both types of the Popconfirm.

expand code expand code

There are 12 placement options available. Use arrowPointAtCenter if you want the arrow to point at the center of target.

expand code expand code

Set icon props to customize the icon.

expand code expand code

Set okText and cancelText or Locale props to customize the button's labels.

expand code expand code

Make it pop up under some conditions.

expand code expand code

Popconfirm API#

Property Description Type Default Value
Title ParameterTitle String --
TitleTemplate ParameterTitle. Takes priority over Title. RenderFragment --
CancelText ParameterCancel button text String Cancel
OkText ParameterOkay button text String OK
OkType ParameterOkay button type String primary
Locale ParameterProperties to pass through to the okay button PopconfirmLocale --
OkButtonProps ParameterProperties to pass through to the okay button ButtonProps --
CancelButtonProps ParameterProperties to pass through to the cancel button ButtonProps --
Icon ParameterIcon displayed by text String exclamation-circle
IconTemplate ParameterIcon displayed by text. Takes priority over Icon. RenderFragment --
OnCancel ParameterCallback executed when clicking cancel button EventCallback<MouseEventArgs> --
OnConfirm ParameterCallback executed when clicking okay button EventCallback<MouseEventArgs> --
ArrowPointAtCenter ParameterPoint the tooltip arrow at the center Boolean false
MouseEnterDelay ParameterDelay (in seconds) before showing popconfirm when trigger is Hover and mouse enters Double 0.1
MouseLeaveDelay ParameterDelay (in seconds) before hiding popconfirm when trigger is Hover and mouse leaves Double 0.1
BoundaryAdjustMode ParameterOverlay adjustment strategy (when for example browser resize is happening). Check enum for details. TriggerBoundaryAdjustMode TriggerBoundaryAdjustMode.InView
ChildContent ParameterTrigger (link, button, etc) RenderFragment --
ComplexAutoCloseAndVisible ParameterWhether need both auto-off and Visible control closing. Boolean false
Disabled ParameterWhether the trigger is disabled. Boolean false
HiddenMode ParameterProperty forwarded to Overlay component. Consult the Overlay property for more detailed explanation. Boolean false
InlineFlexMode Parameter(not used in Unbound) Sets wrapping div style to `display: inline-flex;`. Boolean false
IsButton ParameterBehave like a button: when clicked invoke OnClick (unless OnClickDiv is overriden and does not call base). Boolean false
OnClick ParameterCallback when triggger is clicked EventCallback<MouseEventArgs> --
OnMaskClick ParameterCallback - equivalent of OnMouseUp event on the trigger trigger. EventCallback --
OnMouseEnter ParameterCallback when mouse enters trigger boundaries. EventCallback --
OnMouseLeave ParameterCallback when mouse leaves trigger boundaries. EventCallback --
OnOverlayHiding ParameterCallback when overlay is hiding. EventCallback<Boolean> --
OnVisibleChange ParameterCallback when overlay visibility is changing.Use VisibleChanged instead

Obsolete Will be removed in a future version.
EventCallback<Boolean> --
Overlay ParameterOverlay content (what will be rendered after trigger is activated) RenderFragment --
OverlayClassName ParameterOverlay container custom css class. String --
OverlayEnterCls ParameterCss class added to overlay when overlay is shown. String --
OverlayHiddenCls ParameterCss class added to overlay when overlay is hidden. String --
OverlayLeaveCls ParameterCss class added to overlay when overlay is hiding. String --
OverlayStyle ParameterCss style that will be added to overlay div. String --
Placement ParameterThe position of the Dropdown overlay relative to the target. Can be: Top, Left, Right, Bottom, TopLeft, TopRight, BottomLeft, BottomRight, LeftTop, LeftBottom, RightTop, RightBottom Placement PlacementType.BottomLeft
PlacementCls ParameterOverride default placement class which is based on `Placement` parameter. String --
PopupContainerSelector ParameterDefine what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. String body
Trigger ParameterTrigger mode. Could be multiple by passing an array. Trigger[] TriggerType.Hover
TriggerCls ParameterThe trigger element CSS class. String ant-dropdown-trigger
TriggerReference ParameterManually set reference to triggering element. ElementReference --
Unbound ParameterChildElement with ElementReference set to avoid wrapping div. RenderFragment<ForwardRef> --
Visible ParameterToggles overlay viability. Boolean false
VisibleChanged ParameterCallback when visibility is changed. EventCallback<Boolean> --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Method Signature Return Type Description
Close() Task Will hide the overlay.
IsOverlayShow() Boolean Checks if overlay is currently in visible state.
SetVisible(Boolean visible) void Toggle overlay visibility.
Notification Progress
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.