Zdravice
Push obavijesti svojim posjetiteljima uz zdravicu, laganu i lako prilagodljivu poruku upozorenja.
Zdravice su lagane obavijesti dizajnirane da oponašaju push obavijesti koje su popularizirali mobilni i desktop operativni sustavi. Izrađeni su od flexboxa, tako da ih je lako poravnati i postaviti.
Pregled
Stvari koje treba znati kada koristite dodatak za tost:
- Ako gradite naš JavaScript iz izvora, to zahtijeva
util.js
. - Toastovi su opt-in zbog performansi, tako da ih morate sami inicijalizirati .
- Imajte na umu da ste vi odgovorni za pozicioniranje tosta.
- Tostovi će se automatski sakriti ako ne navedete
autohide: false
.
prefers-reduced-motion
medijskom upitu. Pogledajte odjeljak
smanjenog kretanja u našoj dokumentaciji o pristupačnosti .
Primjeri
Osnovni, temeljni
Kako bismo potaknuli proširive i predvidljive zdravice, preporučujemo zaglavlje i tijelo. Toast zaglavlja koriste display: flex
, omogućujući jednostavno usklađivanje sadržaja zahvaljujući našim uslužnim programima za margine i flexbox.
Toastovi su fleksibilni koliko vam je potrebno i imaju vrlo malo potrebne oznake. Minimalno zahtijevamo da jedan element sadrži vaš "prepečeni" sadržaj i snažno potičemo gumb za odbacivanje.
<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>
Uživo
Pritisnite donji gumb za prikaz tosta (pozicioniranog s našim uslužnim programima u donjem desnom kutu) koji je prema zadanim postavkama skriven s .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>
Proziran
Tostovi su blago prozirni kako bi se stopili s onim što je ispod njih.
<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>
Slaganje
Kada imate više tosta, prema zadanim postavkama postavljamo ih okomito na čitljiv način.
<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>
Plasman
Postavite zdravice s prilagođenim CSS-om onako kako ih trebate. Gornji desni često se koristi za obavijesti, kao i gornji srednji. Ako ćete ikad prikazivati samo jedan tost odjednom, postavite stilove pozicioniranja točno na .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>
Za sustave koji generiraju više obavijesti, razmislite o korištenju elementa za omatanje kako bi se mogli jednostavno slagati.
<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>
Također možete postati fensi s uslužnim programima flexbox za vodoravno i/ili okomito poravnavanje tosta.
<!-- 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>
Pristupačnost
Zdravice su namijenjene malim prekidima za vaše posjetitelje ili korisnike, tako da biste pomogli onima koji imaju čitače zaslona i slične pomoćne tehnologije, trebali biste zamotati svoje zdravice u aria-live
regiju . Promjene živih regija (kao što je ubacivanje/ažuriranje toast komponente) automatski se najavljuju od strane čitača zaslona bez potrebe za pomicanjem fokusa korisnika ili na drugi način prekidanjem korisnika. Osim toga, uključite aria-atomic="true"
kako biste osigurali da se cijela zdravica uvijek najavljuje kao jedna (atomska) jedinica, umjesto da se samo najavljuje što je promijenjeno (što bi moglo dovesti do problema ako ažurirate samo dio sadržaja zdravice ili ako prikazujete isti sadržaj zdravice u kasnijoj točki vremena). Ako su potrebne informacije važne za proces, npr. za popis pogrešaka u obrascu, tada koristite komponentu upozorenjaumjesto dvopeka.
Imajte na umu da živa regija mora biti prisutna u označavanju prije nego što se tost generira ili ažurira. Ako dinamički generirate oboje u isto vrijeme i umetnete ih na stranicu, općenito ih neće objaviti pomoćne tehnologije.
Također trebate prilagoditi razinu role
i aria-live
ovisno o sadržaju. Ako se radi o važnoj poruci poput pogreške, upotrijebite role="alert" aria-live="assertive"
, inače upotrijebite role="status" aria-live="polite"
atribute.
Kako se sadržaj koji prikazujete mijenja, svakako ažurirajte delay
vremensko ograničenje kako bi korisnici imali dovoljno vremena za čitanje tosta.
<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>
Kada koristite autohide: false
, morate dodati gumb za zatvaranje kako bi korisnici mogli odbaciti tost.
<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>
Iako je tehnički moguće dodati kontrole koje se mogu fokusirati/djelovati (kao što su dodatni gumbi ili veze) u vaš tost, trebali biste to izbjegavati za tostove koji se automatski skrivaju. Čak i ako zdravici date dugo delay
vremensko ograničenje , korisnicima tipkovnice i pomoćne tehnologije može biti teško doći do zdravice na vrijeme da poduzmu radnju (budući da zdravice ne dobivaju fokus kada su prikazane). Ako apsolutno morate imati dodatne kontrole, preporučujemo korištenje tosta s autohide: false
.
JavaScript ponašanje
Korištenje
Inicijaliziraj zdravice putem JavaScripta:
$('.toast').toast(option)
Mogućnosti
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-
, kao u data-animation=""
.
Ime | Tip | Zadano | Opis |
---|---|---|---|
animacija | Booleov | pravi | Primijenite CSS fade prijelaz na tost |
autohide | Booleov | pravi | Automatski sakrij tost |
odgoditi | broj | 500 |
Odgoda skrivanja tosta (ms) |
Metode
Asinkrone metode i prijelazi
Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija .
$().toast(options)
Priključuje alat za rukovanje zbirkom elemenata.
.toast('show')
Otkriva tost elementa. Vraća se pozivatelju prije nego što je tost stvarno prikazan (tj. prije nego što se shown.bs.toast
događaj dogodi). Morate ručno pozvati ovu metodu, umjesto toga vaš tost se neće prikazati.
$('#element').toast('show')
.toast('hide')
Skriva tost elementa. Vraća se pozivatelju prije nego što je zdravica zapravo skrivena (tj. prije nego što se hidden.bs.toast
događaj dogodi). Morate ručno pozvati ovu metodu ako ste autohide
napravili false
.
$('#element').toast('hide')
.toast('dispose')
Skriva tost elementa. Vaš tost ostat će na DOM-u, ali se više neće prikazivati.
$('#element').toast('dispose')
Događaji
Vrsta događaja | Opis |
---|---|
show.bs.toast | Ovaj događaj aktivira se odmah kada show se pozove metoda instance. |
prikazano.bs.toast | Ovaj događaj se pokreće kada tost postane vidljiv korisniku. |
sakriti.bs.toast | Ovaj se događaj aktivira odmah nakon hide pozivanja metode instance. |
skriven.bs.toast | Ovaj događaj se pokreće kada tost više nije skriven od korisnika. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})