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

Una Kravets

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

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

• الترقية إلى الطبقة العليا ستظهر النوافذ المنبثقة في الطبقة العلوية فوق بقية الصفحة، لذا لن تحتاج إلى تغيير 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>

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

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

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

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

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

• الدلالات وسمة المنبثق: متى يتم استخدامها؟ من "هيدد دي فريس"
• عند تسهيل استخدام النوافذ المنبثقة: الإجراءات التي ينفّذها متصفّح Hidde de Vries وما لا يفعله
• مستندات MDN حول النوافذ المنبثقة