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

• السمات والدلالات في سمة النافذة المنبثقة: ما هي الحالات التي يجب فيها استخدام كل منهما؟ بقلم "هيد دي فيرس"
• On popover accessibility: what the browser does and doesn't do by Hidde de Vries
• مستندات MDN حول النافذة المنبثقة