Popover (مربع منبثق)

مشابه لـ Tooltip، ولكنه يستوعب عنوانًا ومحتوى أغنى (بنية HTML، وقوائم، إلخ)، ويُطلَق بالنقر أو بالتمرير.

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

الموضع وطريقة الإطلاق والسهم

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

export default function Demo() {
  return (
    <LhPopover title="العنوان" content="هذا محتوى البطاقة الفقاعية." placement="top">
      <LhButton>أعلى</LhButton>
    </LhPopover>
  )
}

Popover Props

الخاصية	الوصف	النوع	القيم المتاحة	الافتراضي
children	عقدة المُشغِّل	ReactNode	—	—
title	العنوان (يُعرَض في منطقة __title)	ReactNode	—	—
content	المحتوى (يُعرَض في منطقة __content)	ReactNode	—	—
placement	موضع العرض	LhPopoverPlacement	top / bottom / left / right (شاملًا -start / -end)	'top'
trigger	طريقة الإطلاق	LhPopoverTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	تعطيل البطاقة	boolean	—	false
arrow	إظهار السهم	boolean	—	true
width	عرض الطبقة العائمة	string | number	—	—
visible	الظهور المتحكَّم به	boolean	—	—
defaultVisible	الظهور الافتراضي غير المتحكَّم به	boolean	—	false
showAfter	تأخير الإظهار (بالملي ثانية، افتراضي 200 للحماية من النقر غير المقصود)	number	—	200
hideAfter	تأخير الإخفاء (بالملي ثانية، افتراضي 100 للسماح بدخول المؤشر إلى الطبقة العائمة)	number	—	100
popperClass	صنف مخصَّص للطبقة العائمة	string	—	—
themeVars	متغيّرات سمة خاصة بالمكوّن	Record<string, string>	—	—
bgPattern	نمط خلفية خاص بالمكوّن	string	—	—
sx	خصائص تخطيط سريعة (تُطبَّق على المُشغِّل)	SxProps	—	—

Popover أحداث

الحدث	الوصف	معامل الاستدعاء	المقابل في Vue
onVisibleChange	تغيُّر الظهور (يُطلَق في الوضعين المتحكَّم وغير المتحكَّم)	(visible: boolean) => void	update:visible

المرجع

forwardRef<HTMLDivElement> —— العنصر الجذري للمُشغِّل. يكشف LhPopoverInstance عن show() / hide() / toggle() / isVisible.

حصر التركيز

عند trigger="click" تحتجز الطبقة المنبثقة التركيز وفق دلالات مربع الحوار (يدور Tab داخلها)، وتُعاده عند الإغلاق؛ أما الإطلاق عبر hover / focus فلا يستلب التركيز، وذلك يتوافق مع سلوك isModal في plus.

إمكانية الوصول

الطبقة العائمة تحمل role="dialog"؛ وعند وجود العنوان تُربط عبر aria-labelledby، بينما يُربط المُشغِّل بالطبقة عبر aria-describedby.

الأنماط

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