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 יש הרבה תכונות מלהיבות. למידע נוסף על ה-API הזה, כולל מידע נוסף על נגישות התכונה ומסמכי תיעוד בנוגע לקבוצת התכונות, כדאי לקרוא את המאמרים הבאים כדי לקבל מידע נוסף: