Popconfirm (تأكيد منبثق)

انقر على عنصر لتظهر فقاعة تأكيد، تُستخدم للتأكيد الثاني قبل العمليات الخطيرة أو المهمة. دلالته role="alertdialog"، يحصر التركيز عند الفتح، ويُغلق عند التأكيد / الإلغاء أو الضغط على Esc.

الاستخدام الأساسي

تأكيد / إلغاء / نوع النبرة

تم التأكيد 0 مرة

import { LhButton, LhPopconfirm } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhPopconfirm title="هل أنت متأكد من تنفيذ هذه العملية؟" onConfirm={() => console.log('confirmed')}>
      <LhButton>تأكيد</LhButton>
    </LhPopconfirm>
  )
}

خصائص Popconfirm

خاصية	الوصف	النوع	القيم المتاحة	الافتراضي
children	عقدة المُشغّل	ReactNode	—	—
title	عنوان / سؤال التأكيد	ReactNode	—	—
confirmText	نص زر التأكيد	string	—	حزمة اللغة popconfirm.confirm (确定)
cancelText	نص زر الإلغاء	string	—	حزمة اللغة popconfirm.cancel (取消)
type	نوع النبرة	'info' | 'warning' | 'danger'	—	'warning'
placement	موضع العرض	LhPopconfirmPlacement	top / bottom / left / right (مشتملة على -start / -end)	'top'
trigger	طريقة التشغيل	LhPopconfirmTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	معطّل	boolean	—	false
showIcon	هل تُظهر الأيقونة	boolean	—	true
hideCancel	هل يُخفي زر الإلغاء	boolean	—	false
visible	إظهار / إخفاء مُتحكم به	boolean	—	—
defaultVisible	الإظهار والإخفاء الافتراضي غير المُتحكم به	boolean	—	false
popperClass	فئة مخصصة للطبقة المنبثقة	string	—	—
themeVars	متغيرات السمة على مستوى المكوّن	Record<string, string>	—	—
sx	خصائص التخطيط السريع (تنطبق على المُشغّل)	SxProps	—	—

أحداث Popconfirm

حدث	الوصف	توقيع الاستدعاء	مقابل Vue
onConfirm	النقر على زر التأكيد	() => void	confirm
onCancel	النقر على زر الإلغاء أو الضغط على Esc	() => void	cancel
onVisibleChange	تغيّر الإظهار والإخفاء	(visible: boolean) => void	update:visible

حصر التركيز و Esc

تحصر الطبقة المنبثقة التركيز دائمًا كـ alertdialog؛ والضغط على Esc يُكافئ النقر على زر الإلغاء (يُطلق onCancel ويُغلق).

الإغلاق التلقائي بعد التأكيد

كما في plus: يؤدي النقر على زر التأكيد أو الإلغاء إلى إطلاق رد الاستدعاء أولًا ثم الإغلاق، دون حاجة إلى طيّه يدويًا من الخارج.

الأنماط

import '@lh-ui/react/style/popconfirm'