טאָסט
פּוש נאָוטאַפאַקיישאַנז צו דיין וויזאַטערז מיט אַ טאָסט, אַ לייטווייט און לייכט קוסטאָמיזאַבלע פלינק אָנזאָג.
טאָוסטס זענען לייטווייט נאָוטאַפאַקיישאַנז דיזיינד צו נאָכקרימען די שטופּן נאָוטאַפאַקיישאַנז וואָס זענען פּאָפּולאַרייזד דורך רירעוודיק און דעסקטאַפּ אָפּערייטינג סיסטעמען. זיי זענען געבויט מיט פלעקסבאָקס, אַזוי זיי זענען גרינג צו ייַנרייען און שטעלע.
איבערבליק
טינגז צו וויסן ווען איר נוצן די טאָסט פּלוגין:
- אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערז
util.js
. - טאָוסטס זענען אַפּט-אין פֿאַר פאָרשטעלונג סיבות, אַזוי איר מוזן ינישאַלייז זיי זיך .
- ביטע טאָן אַז איר זענט פאַראַנטוואָרטלעך פֿאַר פּאַזישאַנינג טאָסט.
- טאָוסט וועט אויטאָמאַטיש באַהאַלטן אויב איר טאָן ניט ספּעציפיצירן
autohide: false
.
prefers-reduced-motion
מידיאַ אָנפֿרעג. זען די
רידוסט באַוועגונג אָפּטיילונג פון אונדזער אַקסעסאַביליטי דאַקיומענטיישאַן .
ביישפילן
באַסיק
צו מוטיקן עקסטענסיבלע און פּרידיקטאַבאַל טאָסט, מיר רעקאָמענדירן אַ כעדער און גוף. טאָסט כעדערז נוצן display: flex
, אַלאַוינג גרינג אַליינמאַנט פון אינהאַלט דאַנק צו אונדזער גרענעץ און פלעקסבאָקס יוטילאַטיז.
טאָוסט זענען ווי פלעקסאַבאַל ווי איר דאַרפֿן און האָבן זייער קליין פארלאנגט מאַרקאַפּ. אין אַ מינימום, מיר דאַרפן אַ איין עלעמענט צו אַנטהאַלטן דיין "טאָוסטיד" אינהאַלט און שטארק מוטיקן אַ אָפּזאָגן קנעפּל.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
לעבן
דריקט דעם קנעפּל אונטן צו ווייַזן אַ טאָסט (פּאַזישאַנד מיט אונדזער יוטילאַטיז אין דער נידעריקער רעכט ווינקל) וואָס איז פאַרבאָרגן דורך פעליקייַט מיט .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
טראַנסלוסאַנט
טאָוסט זענען אַ ביסל טראַנסלוסאַנט צו צונויפגיסן מיט וואָס איז אונטער זיי.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
סטאַקינג
ווען איר האָבן קייפל טאָסט, מיר פעליקייַט צו ווערטיקלי סטאַקינג זיי אין אַ ליינעוודיק שטייגער.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</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 mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
פּלייסמאַנט
שטעלן טאָסט מיט מנהג CSS ווי איר דאַרפֿן זיי. די שפּיץ רעכט איז אָפט געניצט פֿאַר נאָוטאַפאַקיישאַנז, ווי די שפּיץ מיטל. אויב איר וועט נאָר ווייַזן איין טאָסט אין אַ צייַט, שטעלן די פּאַזישאַנינג סטיילז רעכט אויף די .toast
.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
פֿאַר סיסטעמען וואָס דזשענערייט מער נאָוטאַפאַקיישאַנז, באַטראַכטן ניצן אַ ראַפּינג עלעמענט אַזוי זיי קענען לייכט אָנלייגן.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</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 mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
איר קענען אויך באַקומען פאַנטאַזיע מיט פלעקסבאָקס יוטילאַטיז צו ייַנרייען טאָסט כאָריזאַנטאַלי און / אָדער ווערטיקלי.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</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-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-autohide="false">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
כאָטש טעקניקלי עס איז מעגלעך צו לייגן פאָוקיסטאַבאַל / אַקטיאָנאַבלע קאָנטראָלס (אַזאַ ווי נאָך קנעפּלעך אָדער לינקס) אין דיין טאָסט, איר זאָל ויסמיידן טאן דעם פֿאַר אַוטאָהיידינג טאָסט. אפילו אויב איר געבן די טאָסט אַ לאַנג delay
טיימאַוט , קלאַוויאַטור און אַסיסטאַנט טעכנאָלאָגיע ניצערס קען געפֿינען עס שווער צו דערגרייכן די טאָסט אין צייט צו נעמען קאַמף (ווייַל טאָסט טאָן ניט באַקומען פאָקוס ווען זיי זענען געוויזן). אויב איר מוזן האָבן ווייַטער קאָנטראָלס, מיר רעקאָמענדירן צו נוצן אַ טאָסט מיט autohide: false
.
דזשאַוואַסקריפּט נאַטור
באַניץ
ינישאַליזע טאָסט דורך דזשאַוואַסקריפּט:
$('.toast').toast(option)
אָפּציעס
אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-
, ווי אין data-animation=""
.
נאָמען | טיפּ | פעליקייַט | באַשרייַבונג |
---|---|---|---|
אַנאַמיישאַן | בוליאַן | אמת | צולייגן אַ CSS וועלקן יבערגאַנג צו די טאָסט |
אַוטאָהידע | בוליאַן | אמת | אַוטאָ באַהאַלטן די טאָסט |
פאַרהאַלטן | נומער | 500 |
פאַרהאַלטן כיידינג די טאָסט (מס) |
מעטהאָדס
אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז
אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .
זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .
$().toast(options)
אַטאַטשיז אַ טאָסט האַנדלער צו אַן עלעמענט זאַמלונג.
.toast('show')
אַנטפּלעקט אַן עלעמענט ס טאָסט. קערט צו די קאַללער איידער די טאָסט איז אַקטשאַוואַלי געוויזן (ד"ה איידער די shown.bs.toast
געשעעניש אַקערז). איר מוזן מאַניואַלי רופן דעם אופֿן, אַנשטאָט דיין טאָסט וועט נישט ווייַזן.
$('#element').toast('show')
.toast('hide')
באַהאַלט אַן עלעמענט ס טאָסט. קערט צו די קאַללער איידער די טאָסט איז פאקטיש געווען פאַרבאָרגן (ד"ה איידער די hidden.bs.toast
געשעעניש אַקערז). איר האָבן צו מאַניואַלי רופן דעם אופֿן אויב איר געמאכט autohide
צו false
.
$('#element').toast('hide')
.toast('dispose')
באַהאַלט אַן עלעמענט ס טאָסט. דיין טאָסט וועט בלייבן אויף די DOM אָבער וועט נישט ווייַזן ענימאָר.
$('#element').toast('dispose')
געשעענישן
געשעעניש טיפּ | באַשרייַבונג |
---|---|
ווייַזן.בס.טאָסט | דער געשעעניש פירט גלייך ווען דער show בייַשפּיל אופֿן איז גערופן. |
געוויזן.בס.טאָסט | דעם געשעעניש איז פייערד ווען די טאָסט איז געווען קענטיק צו דער באַניצער. |
באַהאַלטן.בס.טאָסט | דעם געשעעניש איז פייערד מיד ווען דער hide בייַשפּיל אופֿן איז גערופן. |
פאַרבאָרגן.בס.טאָסט | דעם געשעעניש איז פייערד ווען די טאָסט איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})