דיאלוגים ומודלים הם חלק בלתי נפרד מרוב יישומי האינטרנט. אמנם בנייתם ​​ביד אינה משימה מורכבת, אך היא הופכת במהירות מייגעת עבור כל מפתח אינטרנט. החלופה הרגילה לבנייתם ​​ביד היא להשתמש ברכיב שנבנה על ידי מישהו אחר.

עם זאת, יש כמה בעיות עם גישה זו. יש כל כך הרבה אפשרויות, שקשה לדעת באיזה רכיב יהיה הכי טוב להשתמש, וכן התאמה אישית של המראה של רכיבים כאלה יכולה לפעמים להיות מייגעת בדיוק כמו בניית דיאלוג ביד. למרבה המזל, ישנה חלופה נוספת: רכיב הדו-שיח HTML.

מהו אלמנט הדיאלוג?

רכיב הדיאלוג של HTML הוא תג HTML מובנה (כמו div או span), המאפשר למפתחים ליצור דיאלוגים ומודלים מותאמים אישית. אלמנט הדו-שיח קיים בכרום ובאופרה מאז 2014, אך רק לאחרונה זכה לתמיכה בכל הדפדפנים הגדולים.

למה להשתמש ברכיב הדיאלוג?

הסיבה העיקרית להשתמש באלמנט הדו-שיח היא נוחות. זה מקל על בניית דיאלוגים שיכולים להופיע בשורה או להופיע כמודלים, עם לא יותר מתג HTML בודד וכמה שורות של JavaScript.

רכיב הדו-שיח מסיר את הצורך לבנות ולפתור באגים של דו-שיח מותאם אישית, או לייבא רכיב של מישהו אחר. זה גם קל מאוד לסגנן עם CSS.

תמיכה בדפדפן עבור רכיב הדיאלוג

instagram viewer

למרבה הצער, התמיכה בדפדפן ברכיב הדו-שיח יכולה להיות טובה יותר. זה נתמך בגרסאות העדכניות ביותר של כל הדפדפנים הגדולים החל מחודש מרץ 2022, עם כמה אזהרות.

כל דפדפן פיירפוקס ישן מ-Firefox 98 יתמוך בו רק אם הוא מופעל באופן ידני בהגדרות הדפדפן, וכל גרסה קודמת של Safari מ-Safari 15.4 אינה תומכת בו כלל. פרטי תמיכת דפדפן מלאים זמינים ב- אני יכול להשתמש.

למרבה המזל, זה לא אומר שאלמנט הדו-שיח אינו שמיש. צוות Google Chrome שומר על polyfill שתוכל למצוא בו Github עבור רכיב הדו-שיח המספק תמיכה בו גם בדפדפנים שבהם הוא אינו נתמך באופן מקורי.

בצורתו הנוכחית, לרכיב הדו-שיח יכולות להיות בעיות נגישות, כך שייתכן שיתאים יותר להשתמש ברכיב דו-שיח מותאם אישית כמו a11y-דיאלוג ביישומי ייצור.

כיצד להשתמש ברכיב הדיאלוג

כדי להדגים כיצד להשתמש באלמנט הדו-שיח, תשתמש בו כדי לבנות תכונת אתר נפוצה: מודאל אישור ללחצן מחיקה.

כל מה שנדרש כדי לעקוב הוא קובץ HTML בודד.

1. הגדר את קובץ ה-HTML

התחל ביצירת הקובץ האמור ותן לו את השם index.html.

לאחר מכן, קבע את המבנה של קובץ ה-HTML וספק מעט מטא-מידע בסיסי על הדף, כך שהוא יוצג כראוי בכל המכשירים.

הקלד את הקוד הבא ב-index.html:

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<meta charset="UTF-8">
<מטא http-equiv="X-UA-תואם" תוכן="IE=קצה">
<מטא שם="נקודת מבט" תוכן="רוחב=רוחב התקן, קנה מידה התחלתי=1.0">
<כותרת>הדגמת דיאלוג</title>
</head>
<סִגְנוֹן></style>


<גוּף></body>
<תַסרִיט></script>
</html>

זה כל ההגדרה הדרושה לפרויקט הזה.

2. כתיבת הסימון

לאחר מכן, כתוב את הסימון עבור כפתור המחיקה, כמו גם את רכיב הדו-שיח.

הקלד את הקוד הבא בתג הגוף של index.html:

<div class="כפתורים-מיכל">
<לַחְצָן>
לִמְחוֹק פריט
</button>
</div>
<דו-שיח>
<div>
 אתה בטוח שאתה רוצה לִמְחוֹקזֶה פריט?
</div>
<div>
<כפתור class="סגור">
 כן
</button>
<כפתור class="סגור">
 לא
</button>
</div>
</dialog>

ה-HTML שלמעלה ייצור:

  • כפתור מחיקה.
  • אלמנט הדו-שיח.
  • שני כפתורים בתוך תיבת הדו-שיח.

אם index.html פתוח בדפדפן שלך, הרכיב היחיד הנראה על המסך יהיה כפתור המחיקה. זה לא אומר שמשהו לא בסדר, רכיב הדו-שיח פשוט דורש מעט JavaScript כדי להפוך לגלוי.

3. הוספת JavaScript

כעת, כתוב את הקוד שיפתח את הדו-שיח כאשר משתמש ילחץ על כפתור המחיקה, וכן קוד כדי לאפשר את סגירת הדו-שיח.

הקלד את הדברים הבאים בתג הסקריפט של index.html:

const מודאלי = מסמך.querySelector("dialog")
document.querySelector("כפתור .button-container").addEventListener("נְקִישָׁה", () => {
מוֹדָלִי.showModal();
});
const closeBtns = מסמך.getElementsByClassName("close");
עבור (btn של closeBtns) {
 btn.addEventListener("נְקִישָׁה", () => {
מוֹדָלִי.סגור();
 })
}

הקוד הזה משתמש בשיטת querySelector כדי לקבל הפניות ללחצנים ולתיבת הדו-שיח. לאחר מכן הוא מצרף מאזין אירוע קליק לכל כפתור.

אולי אתה מכיר מאזיני אירועים ב-JavaScript, שבהם אתה יכול להשתמש בעצמך. מאזין האירועים המצורף ללחצן המחיקה קורא לשיטת showModal() כדי להציג את תיבת הדו-שיח כאשר הלחצן נלחץ.

לכל כפתור בתוך המודאל צמוד לו מאזין אירועים שמשתמש בשיטת close() כדי להסתיר את תיבת הדו-שיח כאשר לוחצים עליהם.

גם אם אין JavaScript שקורא לשיטת close() בקוד, משתמשים יכולים גם לסגור את המודאל על ידי לחיצה על מקש ה-escape במקלדת שלהם.

כעת, כשה-JavaScript הזה קיים, אם משתמש לוחץ על כפתור המחיקה, המודאל ייפתח, ולחיצה על כפתור כן או לא תסגור את המודאל.

כך אמור להיראות המודל שנפתח:

דבר אחד ראוי לציין הוא שאלמנט הדו-שיח כבר מגיע עם סגנון מסוים, למרות שאין CSS ב-index.html. המודאל כבר מרוכז, יש לו גבול, הרוחב מוגבל לתוכן, ויש לו ריפוד ברירת מחדל.

משתמשים לא יכולים לקיים אינטראקציה (ללחוץ, לבחור) עם שום דבר ברקע בזמן שהמודאל פתוח.

אלמנט הדיאלוג יכול גם להציג את עצמו כחלק מהזרימה של הדף במקום כמודאל. כדי לנסות את זה, שנה את מאזין האירועים הראשון ב-JavaScript כך:

document.querySelector("כפתור .button-container").addEventListener("נְקִישָׁה", () => { modal.show(); });

הדבר היחיד שהשתנה בקוד זה הוא שהקוד קורא למתודה show() במקום שיטת showModal(). כעת, כאשר משתמש לוחץ על כפתור מחק פריט, המודאל אמור להיפתח בשורה כך:

4. הוסף סטיילינג

לאחר מכן, התאם אישית את המראה של תיבת הדו-שיח והרקע שלה על ידי כתיבת CSS.

ה-CSS יקטין את גבול תיבת הדו-שיח, יגביל את הרוחב המרבי שלו, ולאחר מכן יככה את הרקע, וכן יוסיף מעט סטיילינג לכפתורים.

סגנון הדיאלוג עצמו הוא פשוט, אבל מחלקת הפסאודו רקע נחוצה כדי להוסיף סגנון שמכוון לרקע של הדו-שיח.

הדבק את הקוד הבא בתג הסגנון של index.html:

דיאלוג:: רקע {
 רקע: שחור;
אֲטִימוּת: 0.5;
}
כפתור {
 border-radius: 2px;
 צבע רקע: לבן;
 גבול: 1px שחור מלא;
 שוליים: 5 פיקסלים;
 box-shadow: 1px 1px 2px אפור;
}
תיבת דו-שיח {
 רוחב מקסימלי: 90vw;
 גבול: 1px שחור מלא;
}

כאשר תיבת הדו-שיח פתוחה, היא אמורה כעת להיראות כך:

ובנית דיאלוג פונקציונלי לחלוטין.

אלמנט הדיאלוג הוא דרך מצוינת לבנות מודלים

באמצעות רכיב הדו-שיח HTML שזכה לאחרונה לתמיכה בכל הדפדפנים הגדולים, מפתחי אינטרנט יכולים כעת לבנות פונקציונלי מלא, מודלים ודיאלוגים הניתנים להתאמה אישית בקלות עם תג HTML אחד וכמה שורות של JavaScript וללא צורך להסתמך על צד שלישי פִּתָרוֹן.

לרכיב הדו-שיח יש polyfill שמתוחזק על ידי צוות Google Chrome, המאפשר למפתחים להשתמש בדיאלוג בגרסאות דפדפן שאינן תומכות בו.