Zdravice
Potisna obvestila svojim obiskovalcem z zdravico, lahkim in enostavno prilagodljivim opozorilnim sporočilom.
Zdravice so lahka obvestila, zasnovana tako, da posnemajo potisna obvestila, ki so jih popularizirali mobilni in namizni operacijski sistemi. Izdelani so s flexboxom, zato jih je enostavno poravnati in namestiti.
Pregled
Kaj morate vedeti pri uporabi vtičnika toast:
- Če gradite naš JavaScript iz izvorne kode, zahteva
util.js
. - Zdravice so opt-in zaradi učinkovitosti, zato jih morate inicializirati sami .
- Upoštevajte, da ste odgovorni za pozicioniranje toastov.
- Zdravice se samodejno skrijejo, če ne določite
autohide: false
.
prefers-reduced-motion
medijske poizvedbe. Oglejte si razdelek o
zmanjšanem gibanju v naši dokumentaciji o dostopnosti .
Primeri
Osnovno
Za spodbujanje razširljivih in predvidljivih zdravic priporočamo glavo in telo. Glave Toast uporabljajo display: flex
, kar omogoča enostavno poravnavo vsebine zahvaljujoč pripomočkom margin in flexbox.
Toasti so tako prilagodljivi, kot jih potrebujete, in zahtevajo zelo malo pribitka. Zahtevamo, da vsaj en element vsebuje vašo »prepečeno« vsebino in močno spodbujamo gumb za opustitev.
<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>
V živo
Kliknite spodnji gumb, da prikažete zdravico (postavljeno z našimi pripomočki v spodnjem desnem kotu), ki je bila privzeto skrita z .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>
Prosojno
Toasti so rahlo prosojni, da se zlijejo s tistim, kar je pod njimi.
<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>
Zlaganje
Ko imate več toastov, jih privzeto zložimo navpično na berljiv 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>
Umestitev
Postavite zdravice s CSS po meri, kot jih potrebujete. Zgornji desni se pogosto uporablja za obvestila, prav tako zgornji srednji. Če boste naenkrat prikazali samo en toast, postavite sloge pozicioniranja neposredno 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 sisteme, ki ustvarjajo več obvestil, razmislite o uporabi ovojnega elementa, da jih je mogoče enostavno zložiti.
<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>
Za vodoravno in/ali navpično poravnavo toastov si lahko privoščite tudi pripomočke flexbox.
<!-- 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>
Dostopnost
Zdravice so namenjene majhnim motnjam obiskovalcev ali uporabnikov, zato za pomoč tistim, ki imajo bralnike zaslona in podobne podporne tehnologije, zavijte svoje zdravice v aria-live
regijo . Spremembe območij v živo (kot je vstavljanje/posodabljanje komponente toast) samodejno objavijo bralniki zaslona, ne da bi bilo treba premakniti fokus uporabnika ali kako drugače prekiniti uporabnika. Poleg tega vključite, aria-atomic="true"
da zagotovite, da je celotna zdravica vedno objavljena kot ena (atomska) enota, namesto da bi samo objavili, kaj je bilo spremenjeno (kar lahko povzroči težave, če posodobite samo del vsebine zdravice ali če prikazujete isto vsebino zdravice pozneje). Če so potrebne informacije pomembne za postopek, npr. za seznam napak v obrazcu, uporabite opozorilno komponentonamesto toasta.
Upoštevajte, da mora biti območje v živo prisotno v oznaki, preden se zdravica ustvari ali posodobi. Če dinamično ustvarite oba hkrati in ju vstavite na stran, ju podporne tehnologije na splošno ne bodo objavile.
Prav tako morate prilagoditi role
in aria-live
raven glede na vsebino. Če gre za pomembno sporočilo, kot je napaka, uporabite role="alert" aria-live="assertive"
, drugače uporabite role="status" aria-live="polite"
atribute.
Ko se vsebina, ki jo prikazujete, spreminja, ne pozabite posodobiti delay
časovne omejitve , da bodo imeli uporabniki dovolj časa za branje zdravice.
<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>
Ko uporabljate autohide: false
, morate dodati gumb za zapiranje, da uporabnikom omogočite opustitev zdravice.
<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>
Čeprav je tehnično mogoče dodati kontrolnike, ki jih je mogoče izostriti/ukrepati (kot so dodatni gumbi ali povezave), v zdravico, se tega izogibajte pri samodejnem skrivanju zdravic. Tudi če zdravici daste dolgo delay
časovno omejitev , bodo uporabniki tipkovnice in podporne tehnologije morda težko dosegli zdravico pravočasno za ukrepanje (ker zdravice ne prejmejo fokusa, ko so prikazane). Če nujno potrebujete dodatne kontrole, priporočamo, da uporabite toast z autohide: false
.
obnašanje JavaScripta
Uporaba
Inicializiraj zdravice prek JavaScripta:
$('.toast').toast(option)
Opcije
Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-
, kot v data-animation=""
.
Ime | Vrsta | Privzeto | Opis |
---|---|---|---|
animacija | logično | prav | Uporabite prehod CSS za bledenje na toast |
samodejno skrij | logično | prav | Samodejno skrij toast |
zamuda | število | 500 |
Zakasnitev skrivanja zdravice (ms) |
Metode
Asinhrone metode in prehodi
Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .
Za več informacij si oglejte našo dokumentacijo JavaScript .
$().toast(options)
Zbirki elementov priloži obravnavo toastov.
.toast('show')
Razkrije toast elementa. Vrne se klicatelju, preden je zdravica dejansko prikazana (tj. preden shown.bs.toast
pride do dogodka). To metodo morate poklicati ročno, namesto tega se vaš toast ne bo prikazal.
$('#element').toast('show')
.toast('hide')
Skrije toast elementa. Vrne se klicatelju, preden je zdravica dejansko skrita (tj. preden hidden.bs.toast
pride do dogodka). To metodo morate poklicati ročno, če ste jo autohide
naredili false
.
$('#element').toast('hide')
.toast('dispose')
Skrije toast elementa. Vaš toast bo ostal v DOM-u, vendar ne bo več prikazan.
$('#element').toast('dispose')
Dogodki
Vrsta dogodka | Opis |
---|---|
show.bs.toast | Ta dogodek se sproži takoj, ko show se pokliče metoda primerka. |
prikazano.bs.toast | Ta dogodek se sproži, ko je zdravica vidna uporabniku. |
hide.bs.toast | Ta dogodek se sproži takoj, ko hide je bila poklicana metoda primerka. |
hidden.bs.toast | Ta dogodek se sproži, ko zdravica ni več skrita pred uporabnikom. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})