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

Una Kravets

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

في ما يلي بعض أبرز النقاط البارزة سريعًا حول إمكانات النافذة المنبثقة:

• عرض الترويج في الطبقة العليا: ستظهر النوافذ المنبثقة في الطبقة العلوية فوق باقي الصفحة، بحيث لا تحتاج إلى تجربة 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 العديد من الميزات الرائعة على المنصة. لمعرفة المزيد حول واجهة برمجة التطبيقات هذه، بما في ذلك المزيد حول إمكانية الوصول إلى الميزة، والمستندات المتعلقة بمجموعة الميزات، إليك بعض القراءة الموصى بها للحصول على مزيد من المعلومات:

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