For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/popconfirm.md.

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'—浮层相对触发控件的位置。
popupClassNamestring—浮层的自定义类名。
popupStyleCSSProperties—浮层的自定义样式。
popupRender(content: React.ReactNode) => React.ReactNode—包装或补充面板内容,保留传入的内容以维持交互。
getPopupContainer() => Element | DocumentFragment—返回浮层的挂载容器,也可返回 ShadowRoot。
childrenReactElement< 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'显示位置
openboolean—受控展示状态
defaultOpenbooleanfalse初始展示状态
onOpenChange(open: boolean) => void—展开状态变化
disabledboolean—禁用交互。
enterDelaynumber100指针进入后的打开延迟,单位毫秒
leaveDelaynumber100指针离开后的关闭延迟,单位毫秒
widthnumber | string—宽度,数字按像素计算
maxWidthnumber | string—浮层最大宽度
classNamestring—容器类名
styleCSSProperties—容器内联样式
aria-labelstring—无可见标题时的可访问名称
titleReactNode必填必需。标题内容
descriptionReactNode—补充说明
type'success' | 'info' | 'warning' | 'error' | 'default''warning'显示或选项类型
iconReactNode—自定义图标
confirmTextReactNode—确认按钮内容
cancelTextReactNode—取消按钮内容
confirmButtonPropsButtonProps—确认按钮属性
cancelButtonPropsButtonProps—取消按钮属性
showCancelbooleantrue展示取消按钮
onConfirm() => void | Promise<void>—确认操作,支持异步等待
onCancel() => void—取消操作
onError(error: unknown) => void—异常回调

ButtonProps API

属性类型默认值说明
variant'solid' | 'outline' | 'soft' | 'link''solid'按钮样式
size'sm' | 'md' | 'lg''md'尺寸或间距预设
dangerbooleanfalse危险操作颜色
loadingbooleanfalse加载状态
fullWidthbooleanfalse占满宽度
startIconReactNode—前置图标
endIconReactNode—后置图标