- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
点击元素,弹出气泡式的确认框。
目标元素的操作需要用户进一步的确认时,在目标元素附近弹出浮层提示,询问用户。
和 confirm
弹出的全屏居中模态对话框相比,交互形式更轻量。
import { Button, message, Popconfirm } from 'antd';
import React from 'react';
const confirm = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
message.success('Click on Yes');
};
const cancel = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
message.error('Click on No');
};
const App: React.FC = () => (
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
onConfirm={confirm}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<Button danger>Delete</Button>
</Popconfirm>
);
export default App;
import { Button, message, Popconfirm } from 'antd';
import React from 'react';
const text = 'Are you sure to delete this task?';
const description = 'Delete the task';
const confirm = () => {
message.info('Clicked on Yes.');
};
const App: React.FC = () => (
<>
<div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
<Popconfirm
placement="topLeft"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>TL</Button>
</Popconfirm>
<Popconfirm
placement="top"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Top</Button>
</Popconfirm>
<Popconfirm
placement="topRight"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>TR</Button>
</Popconfirm>
</div>
<div style={{ width: 70, float: 'left' }}>
<Popconfirm
placement="leftTop"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>LT</Button>
</Popconfirm>
<Popconfirm
placement="left"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Left</Button>
</Popconfirm>
<Popconfirm
placement="leftBottom"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>LB</Button>
</Popconfirm>
</div>
<div style={{ width: 70, marginLeft: 304 }}>
<Popconfirm
placement="rightTop"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>RT</Button>
</Popconfirm>
<Popconfirm
placement="right"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Right</Button>
</Popconfirm>
<Popconfirm
placement="rightBottom"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>RB</Button>
</Popconfirm>
</div>
<div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
<Popconfirm
placement="bottomLeft"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>BL</Button>
</Popconfirm>
<Popconfirm
placement="bottom"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Bottom</Button>
</Popconfirm>
<Popconfirm
placement="bottomRight"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>BR</Button>
</Popconfirm>
</div>
</>
);
export default App;
#components-popconfirm-demo-placement .ant-btn {
margin-left: 0;
margin-right: 8px;
margin-bottom: 8px;
width: 70px;
text-align: center;
padding: 0;
}
#components-popconfirm-demo-placement .ant-btn-rtl {
margin-left: 8px;
margin-right: 0;
}
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Button, Popconfirm } from 'antd';
import React from 'react';
const App: React.FC = () => (
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
>
<Button danger>Delete</Button>
</Popconfirm>
);
export default App;
import React from 'react';
import { Button, Popconfirm } from 'antd';
const App: React.FC = () => {
const confirm = () =>
new Promise((resolve) => {
setTimeout(() => resolve(null), 3000);
});
return (
<Popconfirm
title="Title"
description="Open Popconfirm with Promise"
onConfirm={confirm}
onOpenChange={() => console.log('open change')}
>
<Button type="primary">Open Popconfirm with Promise</Button>
</Popconfirm>
);
};
export default App;
import { Button, Popconfirm } from 'antd';
import React from 'react';
const App: React.FC = () => (
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
okText="Yes"
cancelText="No"
>
<Button danger>Delete</Button>
</Popconfirm>
);
export default App;
import { Button, message, Popconfirm, Switch } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const [condition, setCondition] = useState(true);
const changeCondition = (checked: boolean) => {
setCondition(checked);
};
const confirm = () => {
setOpen(false);
message.success('Next step.');
};
const cancel = () => {
setOpen(false);
message.error('Click on cancel.');
};
const handleOpenChange = (newOpen: boolean) => {
if (!newOpen) {
setOpen(newOpen);
return;
}
// Determining condition before show the popconfirm.
console.log(condition);
if (condition) {
confirm(); // next step
} else {
setOpen(newOpen);
}
};
return (
<div>
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
open={open}
onOpenChange={handleOpenChange}
onConfirm={confirm}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<Button danger>Delete a task</Button>
</Popconfirm>
<br />
<br />
Whether directly execute:
<Switch defaultChecked onChange={changeCondition} />
</div>
);
};
export default App;
import React, { useState } from 'react';
import { Button, Popconfirm } from 'antd';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const showPopconfirm = () => {
setOpen(true);
};
const handleOk = () => {
setConfirmLoading(true);
setTimeout(() => {
setOpen(false);
setConfirmLoading(false);
}, 2000);
};
const handleCancel = () => {
console.log('Clicked cancel button');
setOpen(false);
};
return (
<Popconfirm
title="Title"
description="Open Popconfirm with async logic"
open={open}
onConfirm={handleOk}
okButtonProps={{ loading: confirmLoading }}
onCancel={handleCancel}
>
<Button type="primary" onClick={showPopconfirm}>
Open Popconfirm with async logic
</Button>
</Popconfirm>
);
};
export default App;
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
cancelButtonProps | cancel 按钮 props | ButtonProps | - | |
cancelText | 取消按钮文字 | string | 取消 | |
disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
icon | 自定义弹出气泡 Icon 图标 | ReactNode | <ExclamationCircle /> | |
okButtonProps | ok 按钮 props | ButtonProps | - | |
okText | 确认按钮文字 | string | 确定 | |
okType | 确认按钮类型 | string | primary | |
showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
title | 确认框标题 | ReactNode | () => ReactNode | - | |
description | 确认内容的详细描述 | ReactNode | () => ReactNode | - | 5.1.0 |
onCancel | 点击取消的回调 | function(e) | - | |
onConfirm | 点击确认的回调 | function(e) | - | |
onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
更多属性请参考 Tooltip。
请确保 Popconfirm
的子元素能接受 onMouseEnter
、onMouseLeave
、onFocus
、onClick
事件。