Ant Design Blazor
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:
- Wraps child element (content of the
Popconfirm) with a<div>(default approach). - 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
@refset to@context.Current Ant Design Blazorcomponent: has to have itsRefBackattribute set to@context.
- html tag: has to have its
Examples
The basic example of both types of the Popconfirm.
There are 12 placement options available. Use arrowPointAtCenter if you want the arrow to point at the center of target.
Set icon props to customize the icon.
Set okText and cancelText or Locale props to customize the button's labels.
Make it pop up under some conditions.
The basic properties of a button can be modified by setting the OkButtonProps and CancelButtonProps parameters.
Set to null to hide the button.
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. |
ButtonProps API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Block | Boolean | -- | |
| Ghost | Boolean | -- | |
| Loading | Boolean | -- | |
| Type | String | -- | |
| Shape | String | -- | |
| Size | String | -- | |
| Icon | String | -- | |
| Disabled | Boolean | -- | |
| Danger | Boolean? | -- | |
| ChildContent | OneOf<String, RenderFragment?? | -- |