Toasts
Push Notifikatiounen un Är Besucher mat engem Toast, e liicht a liicht personaliséierbare Alarmmeldung.
Toasts si liicht Notifikatiounen entwéckelt fir d'Push Notifikatiounen ze mimikéieren, déi vu mobilen an Desktop Betribssystemer populariséiert goufen. Si gi mat Flexbox gebaut, sou datt se einfach ausriichten a positionéieren.
Iwwersiicht
Saachen ze wëssen wann Dir den Toast Plugin benotzt:
- Wann Dir eis JavaScript aus der Quell baut, brauch
util.js
et . - Toasts sinn opt-in aus Leeschtungsgrënn, also musst Dir se selwer initialiséieren .
- Maacht weg datt Dir responsabel sidd fir Toasten ze positionéieren.
- Toast verstoppt sech automatesch wann Dir net spezifizéiert
autohide: false
.
prefers-reduced-motion
Medienufro of. Kuckt d'
Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .
Beispiller
Basis
Ze encouragéieren extensible an prévisibel Toasts, Mir recommandéieren engem Header a Kierper. Toast Header benotzen display: flex
, erlaabt eng einfach Ausrichtung vum Inhalt dank eise Margin a Flexbox Utilities.
Toasts si sou flexibel wéi Dir braucht an hu ganz wéineg erfuerderlech Markup. Op d'mannst verlaange mir en eenzegt Element fir Ären "getoasten" Inhalt ze enthalen an en Entlooss Knäppchen staark ze encouragéieren.
<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>
Live
Klickt op de Knäppchen hei ënnen fir en Toast ze weisen (mat eisen Utilitys an der ënneschter rechter Ecke positionéiert) deen als Standard verstoppt ass mat .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>
Duerchsichteg
Toasts si liicht transluzent fir ze vermëschen mat deem wat ënnert hinnen ass.
<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
Wann Dir e puer Toasts hutt, gi mir Standard fir se vertikal op eng liesbar Manéier ze stackelen.
<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>
Placement
Plaz Toast mat personaliséierte CSS wéi Dir se braucht. Uewe riets gëtt dacks fir Notifikatiounen benotzt, sou wéi déi iewescht Mëtt. Wann Dir nëmmen jeemools een Toast gläichzäiteg wäert weisen, setzt d'Positiounsstiler direkt op der .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>
Fir Systemer déi méi Notifikatiounen generéieren, betruecht e Wrapping-Element ze benotzen fir datt se einfach kënne stackelen.
<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>
Dir kënnt och lëschteg sinn mat Flexbox Utilities fir Toasts horizontal an / oder vertikal ze alignéieren.
<!-- 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>
Accessibilitéit
Toasts si geduecht fir kleng Ënnerbriechungen fir Är Besucher oder Benotzer ze sinn, also fir déi mat Écran Lieser an ähnlechen Assistenztechnologien ze hëllefen, sollt Dir Är Toasts an enger aria-live
Regioun wéckelen . Ännerunge fir lieweg Regiounen (sou wéi d'Injektioun / d'Aktualiséierung vun engem Toastkomponent) ginn automatesch vun den Écran Lieser ugekënnegt ouni de Benotzer säi Fokus ze beweegen oder de Benotzer soss z'ënnerbriechen. Zousätzlech, enthalen aria-atomic="true"
fir sécherzestellen datt de ganzen Toast ëmmer als eenzeg (atomar) Eenheet ugekënnegt gëtt, anstatt just ze verkënnegen wat geännert gouf (wat zu Probleemer kéint féieren wann Dir nëmmen en Deel vum Inhalt vum Toast aktualiséiert, oder wann Dir deeselwechten Toast Inhalt weist zu engem spéideren Zäitpunkt). Wann déi néideg Informatioun wichteg ass fir de Prozess, zB fir eng Lëscht vu Feeler an enger Form, da benotzt d' Alarmkomponentamplaz Toast.
Bedenkt datt d'Live Regioun am Markup muss präsent sinn ier den Toast generéiert oder aktualiséiert gëtt. Wann Dir béid gläichzäiteg dynamesch generéiert an se op d'Säit sprëtzen, ginn se normalerweis net vun Hëllefstechnologien ugekënnegt.
Dir musst och den role
an aria-live
Niveau upassen ofhängeg vum Inhalt. Wann et e wichtege Message wéi e Feeler ass, benotzt role="alert" aria-live="assertive"
, soss benotzt role="status" aria-live="polite"
Attributer.
Wéi den Inhalt deen Dir weist ännert, gitt sécher den delay
Timeout ze aktualiséieren sou datt d'Benotzer genuch Zäit hunn fir den Toast ze liesen.
<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>
Wann Dir benotzt autohide: false
, musst Dir en Zoumaache Knäppchen derbäi fir datt d'Benotzer den Toast entloossen.
<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>
Wärend technesch et méiglech ass fokusséierbar / handlungsfäeg Kontrollen (wéi zousätzlech Knäppercher oder Linken) an Ärem Toast ze addéieren, sollt Dir dëst vermeiden fir Autohiding Toasts ze maachen. Och wann Dir den Toast e laange delay
Timeout gitt , kënnen d'Benotzer vun der Tastatur an Hëllefstechnologie et schwéier fannen den Toast an der Zäit z'erreechen fir ze handelen (well Toasten net fokusséieren wann se ugewise ginn). Wann Dir onbedéngt weider Kontrollen muss hunn, recommandéiere mir en Toast mat ze benotzen autohide: false
.
JavaScript Verhalen
Benotzung
Initialiséiere Toasts iwwer JavaScript:
$('.toast').toast(option)
Optiounen
Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-
, wéi an data-animation=""
.
Numm | Typ | Default | Beschreiwung |
---|---|---|---|
Animatioun | boolesch | wouer | Fëllt e CSS Fade Iwwergang op den Toast |
autohide | boolesch | wouer | Auto verstoppen den Toast |
Retard | Zuel | 500 |
Verzögerung verstoppt den Toast (ms) |
Methoden
Asynchron Methoden an Iwwergäng
All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .
$().toast(options)
Befestegt engem Toast Handler zu engem Element Kollektioun.
.toast('show')
Entdeckt en Element Toast. Zréck op den Uruffer ier den Toast tatsächlech gewisen gouf (dh ier d' shown.bs.toast
Evenement geschitt ass). Dir musst dës Method manuell ruffen, amplaz wäert Ären Toast net weisen.
$('#element').toast('show')
.toast('hide')
Verstoppt en Element Toast. Zréck op den Uruffer ier den Toast tatsächlech verstoppt ass (dh ier d' hidden.bs.toast
Evenement geschitt ass). Dir musst dës Method manuell ruffen wann Dir gemaach autohide
hutt false
.
$('#element').toast('hide')
.toast('dispose')
Verstoppt en Element Toast. Ären Toast bleift op der DOM awer wäert net méi weisen.
$('#element').toast('dispose')
Evenementer
Event Typ | Beschreiwung |
---|---|
show.bs.Toast | Dëst Event brennt direkt wann d' show Instanzmethod genannt gëtt. |
gewisen.bs.Toast | Dëst Evenement gëtt gebrannt wann den Toast fir de Benotzer siichtbar gemaach gouf. |
hide.bs.Toast | Dëst Evenement gëtt direkt gebrannt wann d' hide Instanzmethod genannt gouf. |
hidden.bs.Toast | Dëst Evenement gëtt ofgeléist wann den Toast fäerdeg ass fir de Benotzer verstoppt ze ginn. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})