تصل واجهة برمجة تطبيقات Popover API إلى Baseline

Una Kravets

التغيير آتٍ. أصبحت إحدى الميزات التي تهمّني كثيرًا متوفّرة الآن على جميع المتصفّحات الحديثة، وهي تشكّل رسميًا جزءًا من Baseline 2024. وهذه الميزة هي Popover API. يوفر Popover العديد من الأدوات الأساسية الرائعة وإمكانيات المطورين لإنشاء واجهات متعددة الطبقات مثل التلميحات والقوائم وواجهات المستخدم التعليمية والمزيد.

دعم المتصفح

  • Chrome: 114.
  • الحافة: 114.
  • Firefox: 125.
  • Safari: 17.

المصدر

في ما يلي بعض أبرز ميزات النوافذ المنبثقة:

  • الترقية إلى الطبقة العليا ستظهر النوافذ المنبثقة في الطبقة العلوية فوق بقية الصفحة، لذا لن تحتاج إلى تغيير z-index.
  • وظيفة الإغلاق الخفيف: سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاق النافذة المنبثقة وإعادة التركيز.
  • إدارة التركيز التلقائي: يؤدي فتح النافذة المنبثقة إلى توقف علامة التبويب التالية داخل النافذة المنبثقة.
  • أربطة لوحة مفاتيح يمكن الوصول إليها: وسيؤدي الضغط على مفتاح esc أو التبديل المزدوج إلى إغلاق النافذة المنبثقة وإعادة التركيز.
  • عمليات ربط المكوّنات التي يمكن الوصول إليها: توصيل عنصر منبثق بمشغل منبثق دلاليًا.

إنشاء نوافذ منبثقة

إنّ إنشاء نوافذ منبثقة أمر بسيط وسهل للغاية. لاستخدام القيم التلقائية، كل ما تحتاج إليه هو button لتشغيل النافذة المنبثقة وعنصر ليتم تشغيله.

  • أولاً، عليك ضبط السمة popover على العنصر الذي سيتم عرضه على شكل نافذة منبثقة.
  • بعد ذلك، أضِف علامة id فريدة إلى العنصر المنبثق.
  • أخيرًا، لربط الزر بالنافذة المنبثقة، اضبط قيمة الزر popovertargetعلى قيمة id في عنصر النافذة المنبثقة.

يظهر ذلك في الرمز التالي:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>
مثال أساسي على استخدام سمة النافذة المنبثقة

للتحكّم بدقة أكبر في النافذة المنبثقة، يمكنك ضبط أنواع النوافذ المنبثقة بشكل صريح. على سبيل المثال، في حال استخدام سمة popover واضحة بدون قيمة، يتم استخدام السمة popover="auto" نفسها. تتيح قيمة auto سلوك الإغلاق الفاتح وتُغلق النوافذ المنبثقة الأخرى تلقائيًا. استخدِم popover="manual" وستحتاج إلى إضافة زر إغلاق، لأن النوافذ المنبثقة اليدوية لا تغلق النوافذ المنبثقة الأخرى أو تسمح للمستخدمين بإغلاق النافذة المنبثقة بالنقر على إغلاقها في واجهة المستخدم. يمكنك إنشاء نافذة منبثقة يدوية باستخدام ما يلي:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>
مثال على النافذة المنبثقة اليدوية

مربع الحوار المنبثق في مقابل مربّع الحوار المشروط

قد تتساءل عما إذا كنت تحتاج إلى نافذة منبثقة عند وجود مربع حوار، والإجابة هي: قد لا تحتاج إلى ذلك.

من المهم ملاحظة أنّ سمة النافذة المنبثقة لا توفِّر دلالات من تلقاء نفسها. وعلى الرغم من أنّه يمكنك الآن إنشاء تجارب شكلية شبيهة بمربّعات الحوار باستخدام نافذة منبثقة، إلا أنّ هناك بعض الاختلافات الرئيسية بينهما:

العنصر <dialog> المشروط

  • تم افتتاحه باستخدام "dialog.showModal()".
  • مُغلَق مع dialog.close().
  • جعل بقية الصفحة غير نشطة
  • لا تتوافق مع سلوك الإغلاق الفاتح.
  • يمكنك اختيار نمط الحالة المفتوحة باستخدام السمة [open].
  • تمثل دلاليًا مكوِّنًا تفاعليًا يحظر التفاعل مع بقية الصفحة.

السمة [popover]

  • يمكن فتحها باستخدام مرسِل بيان (popovertarget).
  • مغلق مع popovertarget (نافذة منبثقة تلقائية) أو popovertargetaction=hide (نافذة منبثقة يدوية).
  • عدم إيقاف باقي الصفحة
  • تسمح باستخدام سلوك الإغلاق الخفيف.
  • يمكنك تصميم الحالة المفتوحة باستخدام الفئة الزائفة :popover-open.
  • ما مِن دلالات دلالية متأصلة.

الخاتمة والقراءة الإضافية

توفّر "popover" العديد من الميزات الرائعة على المنصة. لمعرفة المزيد عن واجهة برمجة التطبيقات هذه، بما في ذلك المزيد حول إمكانية الوصول إلى الميزة والوثائق المتعلقة بمجموعة الميزات، إليك بعض القراءة التي يُنصح بها للحصول على مزيد من المعلومات: