זה קורה! אחת התכונות שהכי נהניתי מהן הגיעה עכשיו לכל הדפדפנים המודרניים, ונכללה באופן רשמי ב-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>
תיבת דו-שיח של חלון קופץ לעומת תיבת דו-שיח
יכול להיות שתשאלו את עצמכם אם אתם צריכים להשתמש בחלון קופץ כאשר תיבת הדו-שיח קיימת, והתשובה היא: יכול להיות שלא.
חשוב לציין שמאפיין החלון הקופץ לא מספק סמנטיקה בפני עצמו. ובעוד שעכשיו אפשר לבנות חוויות דמויות דו-שיח מודאליות באמצעות חלון קופץ, יש כמה הבדלים עיקריים בין השניים:
הרכיב <dialog> של העזר
- נפתח עם
dialog.showModal(). - סגור עם
dialog.close(). - הופך את שאר הדף לעקבי.
- לא תומכת בהתנהגות של סגירה קלה.
- אפשר לעצב את המצב הפתוח בעזרת המאפיין
[open]. - מבחינה סמנטית, רכיב אינטראקטיבי שחוסם את האינטראקציה עם שאר הדף.
המאפיין [popover]
- אפשר לפתוח באמצעות חשבונית מוצהרת (
popovertarget). - נסגר באמצעות
popovertarget(חלון קופץ אוטומטי) אוpopovertargetaction=hide(חלון קופץ ידני). - לא הופך את שאר הדף לנוח.
- תומכת בהתנהגות של סגירה קלה.
- אפשר לעצב את המצב הפתוח באמצעות המחלקה המדומה של
:popover-open. - אין סמנטיקה מובנית.
סיכום וקריאה נוספת
popover מציע לפלטפורמה הרבה תכונות מלהיבות. לקבלת מידע נוסף על ממשק ה-API הזה, כולל מידע נוסף על הנגישות של התכונה ותיעוד לגבי קבוצת התכונות, הנה כמה מקורות מידע מומלצים לקבלת מידע נוסף: