* docs: split shardProps * chore: update english * chore: update style * chore: update snap
3.1 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Feedback | Popconfirm | Pop up a bubble confirmation box for an action. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a7tqQ6wrdeAAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iwYsQpeFcB0AAAAAAAAAAAAADrJ8AQ/original |
|
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.
Examples
Basic
Locale text
Placement
Auto Shift
Conditional trigger
Customize icon
Asynchronously close
Asynchronously close on Promise
_InternalPanelDoNotUseOrYouWillBeFired
Wireframe
API
Common props ref:Common props
Param | Description | Type | Default value | Version |
---|---|---|---|---|
cancelButtonProps | The cancel button props | ButtonProps | - | |
cancelText | The text of the Cancel button | string | Cancel |
|
disabled | Whether show popconfirm when click its childrenNode | boolean | false | |
icon | Customize icon of confirmation | ReactNode | <ExclamationCircle /> | |
okButtonProps | The ok button props | ButtonProps | - | |
okText | The text of the Confirm button | string | OK |
|
okType | Button type of the Confirm button |
string | primary |
|
showCancel | Show cancel button | boolean | true | 4.18.0 |
title | The title of the confirmation box | ReactNode | () => ReactNode | - | |
description | The description of the confirmation box title | ReactNode | () => ReactNode | - | 5.1.0 |
onCancel | A callback of cancel | function(e) | - | |
onConfirm | A callback of confirmation | function(e) | - | |
onPopupClick | A callback of popup click | function(e) | - | 5.5.0 |
Design Token
FAQ
Why does the warning findDOMNode is deprecated
sometimes appear in strict mode?
This is due to the implementation of rc-trigger
. rc-trigger
forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use React.forwardRef
transparently passes ref
to native html tags.
findDOMNode is deprecated
reproduce: https://codesandbox.io/p/sandbox/finddomnode-c5hy96- Using
forwardRef
to fix: https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs
Note
Please ensure that the child node of Popconfirm
accepts onMouseEnter
, onMouseLeave
, onFocus
, onClick
events.