טוסטים
שלח הודעות למבקרים שלך עם כוסית, הודעת התראה קלת משקל וניתנת להתאמה אישית בקלות.
טוסטים הם הודעות קלות משקל שנועדו לחקות את הודעות הדחיפה שזכו לפופולריות על ידי מערכות ההפעלה לנייד ולשולחן העבודה. הם בנויים עם flexbox, כך שקל ליישר אותם ולמקם אותם.
סקירה כללית
דברים שכדאי לדעת בעת שימוש בתוסף הטוסט:
- טוסטים ניתנים להצטרפות מסיבות ביצועים, לכן עליך לאתחל אותם בעצמך .
- טוסט יסתתר אוטומטית אם לא תציין
autohide: false
.
prefers-reduced-motion
בשאילתת המדיה. עיין
בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .
דוגמאות
בסיסי
כדי לעודד טוסטים ניתנים להרחבה וצפויים, אנו ממליצים על כותרת וגוף. כותרות טוסט משתמשות ב- display: flex
, המאפשרות יישור קל של תוכן הודות לכלי השירות שלנו לשוליים ול-flexbox.
טוסטים גמישים ככל שאתה צריך ויש להם מעט מאוד סימון נדרש. לכל הפחות, אנו דורשים אלמנט בודד שיכיל את התוכן ה"קלוי" שלך ומעודדים בחום לחצן סגור.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
.hide
המחלקה כדי להסתיר לחלוטין טוסט (עם
display:none
, ולא רק עם
opacity:0
). עכשיו זה כבר לא נחוץ. עם זאת, עבור תאימות לאחור, הסקריפט שלנו ימשיך להחליף את המחלקה (למרות שאין צורך מעשי בכך) עד לגרסה הראשית הבאה.
דוגמה חיה
לחץ על הלחצן למטה כדי להציג טוסט (הממוקם עם כלי השירות שלנו בפינה הימנית התחתונה) שהוסתר כברירת מחדל.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
אנו משתמשים ב-JavaScript הבא כדי להפעיל את הדגמת הטוסט החי שלנו:
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
שָׁקוּף לְמֶחֱצָה
טוסטים שקופים מעט כדי להשתלב עם מה שמתחתיהם.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
הַעֲרָמָה
אתה יכול לערום טוסטים על ידי עטיפתם במיכל טוסט, שיוסיף במאונך קצת מרווחים.
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
תוכן מותאם אישית
התאם אישית את הטוסטים שלך על ידי הסרת רכיבי משנה, כוונם עם כלי עזר , או על ידי הוספת סימון משלך. כאן יצרנו טוסט פשוט יותר על ידי הסרת ברירת המחדל .toast-header
, הוספת סמל הסתרה מותאם אישית מ- Bootstrap Icons ושימוש בכמה כלי עזר של flexbox כדי להתאים את הפריסה.
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
לחלופין, ניתן גם להוסיף פקדים ורכיבים נוספים לטוסטים.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
ערכות צבעים
בהסתמך על הדוגמה שלעיל, אתה יכול ליצור ערכות צבע שונות של טוסט עם כלי השירות שלנו לצבע ורקע . כאן הוספנו ול- , ולאחר מכן הוספנו ללחצן הסגירה שלנו. לקבלת קצה חד, אנו מסירים את גבול ברירת המחדל עם ..bg-primary
.text-white
.toast
.btn-close-white
.border-0
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
מיקום
הנח טוסטים עם CSS מותאם אישית כפי שאתה צריך אותם. הפינה השמאלית העליונה משמשת לעתים קרובות להתראות, וכך גם האמצע העליון. אם אתה מתכוון להציג רק טוסט אחד בכל פעם, הצב את סגנונות המיקום ישירות על ה- .toast
.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
עבור מערכות שמייצרות יותר התראות, שקול להשתמש ברכיב גלישה כדי שיוכלו להערים בקלות.
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.p-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
אתה יכול גם להיות מפואר עם כלי עזר של flexbox ליישור טוסטים אופקית ו/או אנכית.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
נְגִישׁוּת
הטוסטים נועדו להיות הפרעות קטנות למבקרים או למשתמשים שלך, אז כדי לעזור לאלה עם קוראי מסך וטכנולוגיות מסייעות דומות, עליך לעטוף את הטוסט שלך aria-live
באזור . שינויים באזורים חיים (כגון הזרקה/עדכון של רכיב טוסט) מוכרזים אוטומטית על ידי קוראי מסך ללא צורך להזיז את המיקוד של המשתמש או להפריע למשתמש בדרך אחרת. בנוסף, כלול aria-atomic="true"
כדי להבטיח שהטוסט כולו יוכרז תמיד כיחידה אחת (אטומית), במקום רק להכריז על מה שהשתנה (מה שעלול להוביל לבעיות אם תעדכן רק חלק מתוכן הטוסט, או אם תציג את אותו תוכן טוסט בנקודת זמן מאוחרת יותר). אם המידע הדרוש חשוב לתהליך, למשל עבור רשימת שגיאות בטופס, השתמש ברכיב ההתראהבמקום טוסט.
שימו לב שהאזור החי צריך להיות נוכח בסימון לפני יצירת הטוסט או עדכון. אם תיצור את שניהם באופן דינמי בו-זמנית ותזריק אותם לדף, הם בדרך כלל לא יוכרזו על ידי טכנולוגיות מסייעות.
אתה גם צריך להתאים את role
ורמת aria-live
בהתאם לתוכן. אם זו הודעה חשובה כמו שגיאה, השתמש ב- role="alert" aria-live="assertive"
, אחרת השתמש role="status" aria-live="polite"
בתכונות.
ככל שהתוכן שאתה מציג משתנה, הקפד לעדכן את delay
הזמן הקצוב כך שלמשתמשים יהיה מספיק זמן לקרוא את הטוסט.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
בעת שימוש autohide: false
, עליך להוסיף לחצן סגירה כדי לאפשר למשתמשים לבטל את הטוסט.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
בעוד שמבחינה טכנית ניתן להוסיף פקדים הניתנים למיקוד/פעולה (כגון לחצנים או קישורים נוספים) בטוסט שלך, עליך להימנע מלעשות זאת עבור הסתרה אוטומטית של טוסט. גם אם תיתן לטוסט delay
פסק זמן ארוך , משתמשי מקלדת וטכנולוגיה מסייעת עלולים להתקשות להגיע לטוסט בזמן כדי לנקוט בפעולה (שכן הטוסטים אינם מקבלים פוקוס כשהם מוצגים). אם אתה בהחלט חייב בקרה נוספת, אנו ממליצים להשתמש בטוסט עם autohide: false
.
סאס
משתנים
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba($black, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba($black, .05);
נוֹהָג
אתחול טוסטים באמצעות JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
טריגרים
ניתן להשיג הדחה באמצעות data
התכונה על כפתור בתוך הטוסט כפי שמוצג להלן:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
או על כפתור מחוץ לטוסט באמצעות הלחצן data-bs-target
כפי שמוצג להלן:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
אפשרויות
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-bs-
, כמו ב- data-bs-animation=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
animation |
בוליאני | true |
החל מעבר דהייה של CSS על הטוסט |
autohide |
בוליאני | true |
הסתר אוטומטית את הטוסט |
delay |
מספר | 5000 |
עיכוב הסתרת הטוסט (ms) |
שיטות
שיטות ומעברים אסינכרוניים
כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .
הופעה
חושף טוסט של אלמנט. חוזר אל המתקשר לפני שהטוסט הוצג בפועל (כלומר לפני shown.bs.toast
התרחשות האירוע). אתה צריך לקרוא ידנית לשיטה זו, במקום זאת הטוסט שלך לא יוצג.
toast.show()
להתחבא
מסתיר טוסט של אלמנט. חוזר אל המתקשר לפני שהטוסט הוסתר בפועל (כלומר לפני hidden.bs.toast
התרחשות האירוע). אתה צריך לקרוא ידנית לשיטה זו אם עשית autohide
ל false
.
toast.hide()
להיפטר
מסתיר טוסט של אלמנט. הטוסט שלך יישאר ב-DOM אבל לא יופיע יותר.
toast.dispose()
getInstance
שיטה סטטית המאפשרת לקבל את מופע הטוסט המשויך לאלמנט DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
שיטה סטטית המאפשרת לך לקבל את מופע הטוסט המשויך לרכיב DOM, או ליצור אחד חדש למקרה שהוא לא אותחל
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
אירועים
סוג אירוע | תיאור |
---|---|
show.bs.toast |
אירוע זה מופעל מיד כאשר show שיטת המופע נקראת. |
shown.bs.toast |
אירוע זה מופעל כאשר הטוסט נעשה גלוי למשתמש. |
hide.bs.toast |
אירוע זה מופעל מיד כאשר hide שיטת המופע נקראה. |
hidden.bs.toast |
אירוע זה מופעל כאשר הטוסט סיים להסתיר מהמשתמש. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})