טוסטים

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

בעמוד זה

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

סקירה כללית

דברים שכדאי לדעת בעת שימוש בתוסף הטוסט:

טוסטים ניתנים להצטרפות מסיבות ביצועים, לכן עליך לאתחל אותם בעצמך .
טוסט יסתתר אוטומטית אם לא תציין autohide: false.

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

דוגמאות

בסיסי

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

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

שלום עולם! זו הודעת טוסט.

html

<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). עכשיו זה כבר לא נחוץ. עם זאת, עבור תאימות לאחור, הסקריפט שלנו ימשיך להחליף את המחלקה (למרות שאין צורך מעשי בכך) עד לגרסה הראשית הבאה.

דוגמה חיה

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

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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 הבא כדי להפעיל את הדגמת הטוסט החי שלנו:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

שָׁקוּף לְמֶחֱצָה

טוסטים שקופים מעט כדי להשתלב עם מה שמתחתיהם.

שלום עולם! זו הודעת טוסט.

html

<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>

הַעֲרָמָה

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

לִרְאוֹת? בדיוק ככה.

ראש למעלה, טוסטים ייערמו באופן אוטומטי

html

<div class="toast-container position-static">
  <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 כדי להתאים את הפריסה.

שלום עולם! זו הודעת טוסט.

html

<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>

לחלופין, ניתן גם להוסיף פקדים ורכיבים נוספים לטוסטים.

שלום עולם! זו הודעת טוסט.

html

<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>

ערכות צבעים

בהסתמך על הדוגמה שלעיל, אתה יכול ליצור ערכות צבע שונות של טוסט עם כלי השירות שלנו לצבע ורקע . כאן הוספנו ל- , ולאחר מכן הוספנו ללחצן הסגירה שלנו. לקבלת קצה חד, אנו מסירים את גבול ברירת המחדל עם ..text-bg-primary.toast.btn-close-white.border-0

שלום עולם! זו הודעת טוסט.

html

<div class="toast align-items-center text-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.

שלום עולם! זו הודעת טוסט.

html

<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 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>

עבור מערכות שמייצרות יותר התראות, שקול להשתמש ברכיב גלישה כדי שיוכלו להערים בקלות.

לִרְאוֹת? בדיוק ככה.

ראש למעלה, טוסטים ייערמו באופן אוטומטי

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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 ליישור טוסטים אופקית ו/או אנכית.

שלום עולם! זו הודעת טוסט.

html

<!-- 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, עליך להוסיף לחצן סגירה כדי לאפשר למשתמשים לבטל את הטוסט.

שלום עולם! זו הודעת טוסט.

html

<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.

CSS

משתנים

נוסף בגרסה 5.2.0

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

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

משתנים Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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="{value}". הקפד לשנות את סוג המארז של שם האופציה מ" camelCase " ל" kebab -case " כאשר אתה מעביר את האפשרויות באמצעות תכונות נתונים. לדוגמה, השתמש data-bs-custom-class="beautifier"במקום data-bs-customClass="beautifier".

החל מ-Bootstrap 5.2.0, כל הרכיבים תומכים בתכונת נתונים שמורה ניסיוניתdata-bs-config שיכולה להכיל תצורה פשוטה של רכיבים כמחרוזת JSON. כאשר לרכיב יש data-bs-config='{"delay":0, "title":123}'ותכונות data-bs-title="456", הערך הסופי titleיהיה 456ותכונות הנתונים הנפרדות יעקפו ערכים שניתנו ב- data-bs-config. בנוסף, תכונות נתונים קיימות מסוגלות להכיל ערכי JSON כמו data-bs-delay='{"show":0,"hide":150}'.

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
`animation`	בוליאני	`true`	החל מעבר דהייה של CSS על הטוסט.
`autohide`	בוליאני	`true`	הסתר אוטומטית את הטוסט לאחר ההשהיה.
`delay`	מספר	`5000`	עיכוב באלפיות שניות לפני הסתרת הטוסט.

שיטות

שיטות ומעברים אסינכרוניים

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

עיין בתיעוד JavaScript שלנו למידע נוסף .

שיטה	תיאור
`dispose`	מסתיר טוסט של אלמנט. הטוסט שלך יישאר ב-DOM אבל לא יופיע יותר.
`getInstance`	שיטה סטטית המאפשרת לקבל את מופע הטוסט המשויך לאלמנט DOM. לדוגמה: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`מחזירה מופע Bootstrap toast.
`getOrCreateInstance`	שיטה סטטית המאפשרת לך לקבל את מופע הטוסט המשויך לרכיב DOM, או ליצור אחד חדש, למקרה שהוא לא אותחל. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`מחזיר מופע טוסט של Bootstrap.
`hide`	מסתיר טוסט של אלמנט. חוזר אל המתקשר לפני שהטוסט הוסתר בפועל (כלומר לפני `hidden.bs.toast`התרחשות האירוע). אתה צריך לקרוא ידנית לשיטה זו אם עשית `autohide`ל `false`.
`isShown`	מחזירה ערך בוליאני בהתאם למצב הנראות של הטוסט.
`show`	חושף טוסט של אלמנט. חוזר אל המתקשר לפני שהטוסט הוצג בפועל (כלומר לפני `shown.bs.toast`התרחשות האירוע). אתה צריך לקרוא ידנית לשיטה זו, במקום זאת הטוסט שלך לא יוצג.

אירועים

מִקרֶה	תיאור
`hide.bs.toast`	אירוע זה מופעל מיד כאשר `hide`שיטת המופע נקראה.
`hidden.bs.toast`	אירוע זה מופעל כאשר הטוסט סיים להסתיר מהמשתמש.
`show.bs.toast`	אירוע זה מופעל מיד כאשר `show`שיטת המופע נקראת.
`shown.bs.toast`	אירוע זה מופעל כאשר הטוסט נעשה גלוי למשתמש.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})