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

طبقة معلومات عائمة تُشغَّل بالنقر أو التمرير. 12 موضعاً، أربع طرق تشغيل، وسهم وعرض قابلان للتخصيص.

مربع منبثق

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover title="عنوان" content="تشغيل click (افتراضي)" placement="top">
        <LhButton>click أعلى</LhButton>
      </LhPopover>
      <LhPopover content="تشغيل click" placement="right" trigger="click">
        <LhButton>click يمين</LhButton>
      </LhPopover>
      <LhPopover content="تشغيل focus" placement="bottom" trigger="focus">
        <LhButton>focus أسفل</LhButton>
      </LhPopover>
      <LhPopover content="سهم مغلق + عرض مخصّص" placement="left" :arrow="false" :width="240">
        <LhButton>بدون سهم يسار</LhButton>
      </LhPopover>
      <LhPopover content="تموضع صارم عند left" placement="left" :flip="false">
        <LhButton>flip=false</LhButton>
      </LhPopover>
    </div>
    <p class="demo-note">تشغيل manual مع :visible.sync للتحكم اليدوي؛ disabled يمنع الانبثاق؛ popperClass صنف مخصّص.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover :visible.sync="manual" content="يُتحكَّم به عبر مفتاح زر" placement="top" trigger="manual">
        <LhButton @click="manual = !manual">مفتاح manual ({{ manual ? 'تشغيل' : 'إيقاف' }})</LhButton>
      </LhPopover>
      <LhPopover content="حالة معطّلة" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopover>
      <LhPopover content="تأخير الإظهار/الإخفاء" placement="top" :show-after="300" :hide-after="500">
        <LhButton>showAfter/hideAfter</LhButton>
      </LhPopover>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    manual: false,
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
placement	موضع الظهور	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	هل تنقلب الجهة عند عدم كفاية المساحة على المحور الرئيسي (مفعّل افتراضياً)؛ ضعه false ليلتزم placement بصرامة مع السماح بالخروج عن إطار العرض	boolean	true
trigger	طريقة التشغيل	'click' \| 'hover' \| 'focus' \| 'manual'	'hover'
title	العنوان	string	—
visible	حالة الإظهار المُتحكَّم بها يدوياً (:visible.sync)	boolean	—
disabled	هل معطّل	boolean	false
arrow	هل يُظهر السهم	boolean	true
width	عرض الطبقة المنبثقة	string \| number	—
popperClass	صنف CSS مخصّص للطبقة المنبثقة	string	—
teleportTarget	هدف تركيب الطبقة المنبثقة (مُحدِّد أو عنصر، افتراضياً body؛ لا يوجد Teleport في 2.7، يُنفَّذ بنقل المضيف)	string \| HTMLElement	—
showAfter	زمن تأخير الإظهار (ms)	number	—
hideAfter	زمن تأخير الإخفاء (ms)	number	—
themeVars	متغيّرات السمة على مستوى المكوّن، تتجاوز إعدادات ConfigProvider	Record<string, string>	—
bgPattern	نقش خلفية على مستوى المكوّن، يتجاوز إعدادات ConfigProvider	string	—
sx	خصائص تخطيط سريعة عبر sx (تؤثر على العنصر الجذر للمُشغِّل)	—	—

Slots

فتحة	الوصف
default	المُشغِّل
title	منطقة العنوان (افتراضياً تُؤخَذ من الخاصية title)
content	نص المربع المنبثق (يُؤخَذ من الخاصية content عند عدم تمريره)