#Popconfirm 气泡确认
在操作位置附近确认重要操作。
#基本用法
basic.tsx
import { Button, Popconfirm } from '@ifhover/leaf-ui';
import { useState } from 'react';
export function PopconfirmBasic() {
const [removed, setRemoved] = useState(false);
return (
<Popconfirm
title="移除此项目?"
description="移除后仍可在回收站中恢复。"
onConfirm={() => setRemoved(true)}
>
<Button variant="outline" danger disabled={removed}>
{removed ? '已移除' : '移除项目'}
</Button>
</Popconfirm>
);
}
#更多用法
advanced.tsx
import { Button, Popconfirm } from '@ifhover/leaf-ui';
export function PopconfirmAsync() {
return (
<Popconfirm
title="提交审核?"
type="info"
onConfirm={() => new Promise<void>((resolve) => setTimeout(resolve, 900))}
>
<Button>异步确认</Button>
</Popconfirm>
);
}
#使用说明
onConfirm 可返回 Promise;等待期间显示加载并阻止重复提交。成功后关闭,失败时保持打开,可通过 onError 展示错误。触发元素应支持 ref 与按钮交互。
#类型
组装数据、定义回调和使用 ref 时,可以导入这些类型。
import type { PopconfirmProps, ButtonProps } from '@ifhover/leaf-ui';#PopconfirmProps API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
popupPlacement | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | — | 浮层相对触发控件的位置。 |
popupClassName | string | — | 浮层的自定义类名。 |
popupStyle | CSSProperties | — | 浮层的自定义样式。 |
popupRender | (content: React.ReactNode) => React.ReactNode | — | 包装或补充面板内容,保留传入的内容以维持交互。 |
getPopupContainer | () => Element | DocumentFragment | — | 返回浮层的挂载容器,也可返回 ShadowRoot。 |
children | ReactElement< HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement>; disabled?: boolean } > | 必填 | 必需。内容或下级项目 |
placement | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'top' | 显示位置 |
open | boolean | — | 受控展示状态 |
defaultOpen | boolean | false | 初始展示状态 |
onOpenChange | (open: boolean) => void | — | 展开状态变化 |
disabled | boolean | — | 禁用交互。 |
enterDelay | number | 100 | 指针进入后的打开延迟,单位毫秒 |
leaveDelay | number | 100 | 指针离开后的关闭延迟,单位毫秒 |
width | number | string | — | 宽度,数字按像素计算 |
maxWidth | number | string | — | 浮层最大宽度 |
className | string | — | 容器类名 |
style | CSSProperties | — | 容器内联样式 |
aria-label | string | — | 无可见标题时的可访问名称 |
title | ReactNode | 必填 | 必需。标题内容 |
description | ReactNode | — | 补充说明 |
type | 'success' | 'info' | 'warning' | 'error' | 'default' | 'warning' | 显示或选项类型 |
icon | ReactNode | — | 自定义图标 |
confirmText | ReactNode | — | 确认按钮内容 |
cancelText | ReactNode | — | 取消按钮内容 |
confirmButtonProps | ButtonProps | — | 确认按钮属性 |
cancelButtonProps | ButtonProps | — | 取消按钮属性 |
showCancel | boolean | true | 展示取消按钮 |
onConfirm | () => void | Promise<void> | — | 确认操作,支持异步等待 |
onCancel | () => void | — | 取消操作 |
onError | (error: unknown) => void | — | 异常回调 |
#ButtonProps API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'solid' | 'outline' | 'soft' | 'link' | 'solid' | 按钮样式 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸或间距预设 |
danger | boolean | false | 危险操作颜色 |
loading | boolean | false | 加载状态 |
fullWidth | boolean | false | 占满宽度 |
startIcon | ReactNode | — | 前置图标 |
endIcon | ReactNode | — | 后置图标 |