Heilbroodjies
Stuur kennisgewings aan jou besoekers met 'n heildronk, 'n liggewig en maklik aanpasbare waarskuwingsboodskap.
Toasts is liggewig-kennisgewings wat ontwerp is om die stootkennisgewings na te boots wat deur mobiele en rekenaarbedryfstelsels gewild gemaak is. Hulle is gebou met flexbox, so hulle is maklik om in lyn te bring en te plaas.
Oorsig
Dinge om te weet wanneer jy die toast-inprop gebruik:
- As jy ons JavaScript vanaf die bron bou, vereis
util.js
dit . - Toasts is intekening vir prestasieredes, so jy moet dit self inisialiseer .
- Neem asseblief kennis dat jy verantwoordelik is vir die posisionering van heildronke.
- Heilbrood sal outomaties versteek as jy nie spesifiseer nie
autohide: false
.
prefers-reduced-motion
medianavraag. Sien die
verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .
Voorbeelde
Basies
Om verlengbare en voorspelbare heildronke aan te moedig, beveel ons 'n kopskrif en liggaam aan. Roosterbroodkoppe gebruik display: flex
, wat maklike belyning van inhoud moontlik maak danksy ons marge- en flexbox-hulpmiddels.
Roosterbroodjies is so buigsaam as wat jy nodig het en het baie min vereiste opmaak. Ons benodig ten minste 'n enkele element om jou "geroosterde" inhoud te bevat en moedig 'n afwysknoppie sterk aan.
<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>
Leef
Klik op die knoppie hieronder om 'n heildronk te wys (geposisioneer met ons nutsprogramme in die onderste regterhoek) wat by verstek versteek is met .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>
Deurskynend
Roosterbroodjies is effens deurskynend om in te meng met wat onder hulle is.
<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>
Stapel
Wanneer jy veelvuldige roosterbrood het, is ons verstek om dit vertikaal op 'n leesbare manier te stapel.
<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>
Plasing
Plaas roosterbrood met pasgemaakte CSS soos jy dit nodig het. Regs bo word dikwels vir kennisgewings gebruik, net soos die boonste middel. As jy net een heildronk op 'n slag gaan wys, plaas die posisioneringstyle reg op die .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>
Vir stelsels wat meer kennisgewings genereer, oorweeg dit om 'n wikkelelement te gebruik sodat hulle maklik kan stapel.
<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>
Jy kan ook fancy raak met flexbox-hulpmiddels om roosterbrood horisontaal en/of vertikaal in lyn te bring.
<!-- 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>
Toeganklikheid
Heildronk is bedoel om klein onderbrekings vir jou besoekers of gebruikers te wees, so om diegene met skermlesers en soortgelyke ondersteunende tegnologieë te help, moet jy jou heildronke in 'n aria-live
streek toevou . Veranderinge aan lewende streke (soos die inspuiting/opdatering van 'n roosterbrood-komponent) word outomaties deur skermlesers aangekondig sonder dat dit nodig is om die gebruiker se fokus te verskuif of die gebruiker andersins te onderbreek. Sluit ook in aria-atomic="true"
om te verseker dat die hele roosterbrood altyd as 'n enkele (atomiese) eenheid aangekondig word, eerder as om net aan te kondig wat verander is (wat tot probleme kan lei as jy net 'n deel van die roosterbrood se inhoud opdateer, of as dieselfde roosterbrood-inhoud vertoon word op 'n later tydstip). As die nodige inligting belangrik is vir die proses, bv. vir 'n lys van foute in 'n vorm, gebruik dan die waarskuwingskomponentin plaas van roosterbrood.
Let daarop dat die lewendige streek in die opmaak teenwoordig moet wees voordat die roosterbrood gegenereer of opgedateer word. As jy albei op dieselfde tyd dinamies genereer en dit in die bladsy inspuit, sal hulle oor die algemeen nie deur ondersteunende tegnologieë aangekondig word nie.
role
Jy moet ook die en vlak aanpas aria-live
na gelang van die inhoud. As dit 'n belangrike boodskap soos 'n fout is, gebruik role="alert" aria-live="assertive"
, anders gebruik role="status" aria-live="polite"
kenmerke.
Soos die inhoud wat jy wys verander, maak seker dat jy die delay
uitteltyd opdateer sodat gebruikers genoeg tyd het om die heildronk te lees.
<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>
Wanneer jy gebruik autohide: false
, moet jy 'n toemaakknoppie byvoeg om gebruikers toe te laat om die roosterbrood af te wys.
<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>
Alhoewel dit tegnies moontlik is om fokusbare/uitvoerbare kontroles (soos bykomende knoppies of skakels) in jou roosterbrood by te voeg, moet jy dit vermy om roosterbrood outomaties te verberg. Selfs al gee jy die roosterbrood 'n lang delay
tydsverloop , kan sleutelbord- en hulptegnologiegebruikers dit moeilik vind om die roosterbrood betyds te bereik om aksie te neem (aangesien roosterbrood nie fokus kry wanneer dit vertoon word nie). As jy absoluut verdere kontroles moet hê, beveel ons aan om 'n roosterbrood met autohide: false
.
JavaScript gedrag
Gebruik
Inisialiseer heildronke via JavaScript:
$('.toast').toast(option)
Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-animation=""
.
Naam | Tik | Verstek | Beskrywing |
---|---|---|---|
animasie | boolean | waar | Pas 'n CSS-vervaag-oorgang op die roosterbrood toe |
outomaties versteek | boolean | waar | Versteek die roosterbrood outomaties |
vertraging | nommer | 500 |
Vertraag om die heildronk te versteek (ms) |
Metodes
Asinchroniese metodes en oorgange
Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .
$().toast(options)
Heg 'n roosterbroodhanteerder aan 'n elementversameling.
.toast('show')
Onthul 'n element se heildronk. Keer terug na die oproeper voordat die heildronk werklik gewys is (dws voor die shown.bs.toast
gebeurtenis plaasvind). Jy moet hierdie metode handmatig bel, in plaas daarvan sal jou roosterbrood nie wys nie.
$('#element').toast('show')
.toast('hide')
Versteek 'n element se roosterbrood. Keer terug na die oproeper voordat die heildronk eintlik weggesteek is (dws voor die hidden.bs.toast
gebeurtenis plaasvind). Jy moet hierdie metode handmatig aanroep as jy autohide
na false
.
$('#element').toast('hide')
.toast('dispose')
Versteek 'n element se roosterbrood. Jou heildronk sal op die DOM bly, maar sal nie meer wys nie.
$('#element').toast('dispose')
Gebeurtenisse
Soort gebeurtenis | Beskrywing |
---|---|
wys.bs.roosterbrood | Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. |
getoon.bs.roosterbrood | Hierdie gebeurtenis word afgevuur wanneer die heildronk vir die gebruiker sigbaar gemaak is. |
verberg.bs.roosterbrood | Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide instansiemetode geroep is. |
versteekte.bs.roosterbrood | Hierdie gebeurtenis word afgevuur wanneer die heildronk klaar vir die gebruiker weggesteek is. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})