Toasts
Push notifikaasjes nei jo besikers mei in toast, in lichtgewicht en maklik oanpasber warskôgingsberjocht.
Toasts binne lichtgewicht notifikaasjes ûntworpen om de push-notifikaasjes te mimikjen dy't populêr binne troch mobile en buroblêdbestjoeringssystemen. Se binne boud mei flexbox, sadat se maklik binne te rjochtsjen en te pleatsen.
Oersicht
Dingen om te witten by it brûken fan de toast-plugin:
- As jo ús JavaScript bouwe fanút boarne, fereasket
util.js
it . - Toasts binne opt-in foar prestaasjes redenen, dus jo moatte se sels inisjalisearje .
- Tink derom dat jo ferantwurdlik binne foar it pleatsen fan toasts.
- Toasts sille automatysk ferbergje as jo net spesifisearje
autohide: false
.
prefers-reduced-motion
mediafraach. Sjoch de
seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .
Foarbylden
Basic
Foar in stimulearjen útwreide en foarsisber toasts, Wy riede in koptekst en lichem. Toast-headers brûke display: flex
, wêrtroch maklike ôfstimming fan ynhâld mooglik is troch ús marzje- en flexbox-helpprogramma's.
Toasts binne sa fleksibel as jo nedich binne en hawwe heul lyts fereaske markup. Wy fereaskje op syn minst ien elemint om jo "toasted" ynhâld te befetsjen en in ûntslachknop sterk oan te moedigjen.
<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>
Libje
Klikje op de knop hjirûnder om in toast sjen te litten (posityf mei ús nutsbedriuwen yn 'e rjochter ûnderhoeke) dy't standert ferburgen is mei .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>
Trochsichtich
Toasten binne wat trochsichtich om te kombinearjen mei wat ûnder har 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>
Stacking
As jo meardere toasts hawwe, sille wy se standert op in lêsbere manier fertikaal stapelje.
<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>
Pleatsing
Plak toasts mei oanpaste CSS as jo se nedich hawwe. Rjochts boppe wurdt faak brûkt foar notifikaasjes, lykas de boppeste midden. As jo mar ea sille sjen litte ien toast op in tiid, set de posisjonearring stilen rjocht op 'e .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>
Foar systemen dy't mear notifikaasjes generearje, beskôgje it brûken fan in wrappingselemint sadat se maklik kinne stapelje.
<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>
Jo kinne ek fancy wurde mei flexbox-hulpprogramma's om toasts horizontaal en / of fertikaal út te rjochtsjen.
<!-- 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>
Tagonklikheid
Toasts binne bedoeld om lytse ûnderbrekkings te wêzen foar jo besikers of brûkers, dus om dy te helpen mei skermlêzers en ferlykbere assistinte technologyen, moatte jo jo toasts yn in aria-live
regio ynpakke . Feroarings yn libbensregio's (lykas it ynjeksje/bywurkjen fan in toastkomponint) wurde automatysk oankundige troch skermlêzers sûnder de fokus fan 'e brûker te ferpleatsen of de brûker oars te ûnderbrekken. Dêrneist omfetsje aria-atomic="true"
om te soargjen dat de hiele toast altyd wurdt oankundige as ien (atomêre) ienheid, yn stee fan gewoan oan te kundigjen wat feroare is (wat kin liede ta problemen as jo mar in part fan 'e ynhâld fan' e toast bywurkje, of as jo deselde toastynhâld werjaan op in letter momint). As de needsaaklike ynformaasje wichtich is foar it proses, bygelyks foar in list mei flaters yn in formulier, brûk dan de warskôgingskomponintynstee fan toast.
Tink derom dat de live regio oanwêzich wêze moat yn 'e markearring foardat de toast wurdt generearre of bywurke. As jo dynamysk generearje beide tagelyk en ynjeksje se yn 'e side, se wurde oer it algemien net oankundige troch assistinte technologyen.
Jo moatte ek oanpasse de role
en aria-live
nivo ôfhinklik fan de ynhâld. As it in wichtich berjocht is lykas in flater, brûk dan role="alert" aria-live="assertive"
, oars brûk role="status" aria-live="polite"
attributen.
As de ynhâld dy't jo werjaan feroaret, wês wis dat jo de delay
time -out bywurkje , sadat brûkers genôch tiid hawwe om de toast te lêzen.
<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>
As jo brûke autohide: false
, moatte jo in slute knop tafoegje om brûkers de toast te ferlitten.
<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>
Hoewol it technysk mooglik is om fokusbere / aksjebere kontrôles (lykas ekstra knoppen of keppelings) yn jo toast ta te foegjen, moatte jo foarkomme dat jo dit dwaan foar autohiding toasts. Sels as jo de toast in lange delay
tiid jouwe , kinne brûkers fan toetseboerd en assistinte technology it dreech fine om de toast op 'e tiid te berikken om aksje te nimmen (om't toasts gjin fokus krije as se werjûn wurde). As jo perfoarst moatte hawwe fierdere kontrôles, wy riede in gebrûk in toast mei autohide: false
.
JavaScript gedrach
Gebrûk
Inisjalisearje toasts fia JavaScript:
$('.toast').toast(option)
Opsjes
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-animation=""
.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
animaasje | boolean | wier | Tapasse in CSS fade oergong nei de toast |
autohide | boolean | wier | Auto ferbergje de toast |
fertraging | nûmer | 500 |
Fertraging ferbergjen fan de toast (ms) |
Metoaden
Asynchrone metoaden en transysjes
Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .
$().toast(options)
Hechtet in toast handler oan in elemint kolleksje.
.toast('show')
Bliuwt in elemint syn toast. Keart werom nei de beller foardat de toast eins is toand (dat wol sizze foardat it shown.bs.toast
evenemint bart). Jo moatte dizze metoade manuell neame, ynstee sil jo toast net sjen.
$('#element').toast('show')
.toast('hide')
Ferberget in elemint syn toast. Keart werom nei de beller foardat de toast eins ferburgen is (dus foardat it hidden.bs.toast
evenemint bart). Jo moatte dizze metoade manuell neame as jo makke autohide
hawwe false
.
$('#element').toast('hide')
.toast('dispose')
Ferberget in elemint syn toast. Jo toast bliuwt op 'e DOM, mar sil net mear sjen.
$('#element').toast('dispose')
Eveneminten
Event Type | Beskriuwing |
---|---|
show.bs.toast | Dit evenemint fjoer fuortendaliks as de show eksimplaar metoade wurdt oanroppen. |
werjûn.bs.toast | Dit evenemint wurdt ûntslein as de toast is makke sichtber foar de brûker. |
hide.bs.toast | Dit barren wurdt fuortendaliks ûntslein as de hide eksimplaarmetoade oanroppen is. |
hidden.bs.toast | Dit evenemint wurdt ûntslein as de toast is klear mei in ferburgen fan de brûker. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})