Röstsaid
Lükake oma külastajatele märguandeid röstsaiaga, kerge ja hõlpsasti kohandatava hoiatussõnumiga.
Röstsaad on kerged märguanded, mis on loodud mobiiltelefonide ja lauaarvutite operatsioonisüsteemide poolt populaarseks muutunud push-teavituste jäljendamiseks. Need on ehitatud flexboxiga, nii et neid on lihtne joondada ja positsioneerida.
Ülevaade
Asjad, mida röstsaia pistikprogrammi kasutamisel teada saada:
- Kui loote meie JavaScripti allikast, nõuab
util.js
see . - Röstsaid on tulemuslikkuse huvides lubatud, seega peate need ise lähtestama .
- Pange tähele, et röstsaiade paigutamise eest vastutate teie.
- Kui te seda ei määra, peidetakse röstsaiad automaatselt
autohide: false
.
prefers-reduced-motion
meediumipäringust. Vaadake
meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .
Näited
Põhiline
Laiendatavate ja prognoositavate röstsaitide julgustamiseks soovitame kasutada päist ja keha. Röstsaa päised kasutavad display: flex
, mis võimaldab tänu meie veerise ja flexboxi utiliitidele sisu hõlpsat joondamist.
Röstsaid on nii paindlikud kui vaja ja neil on väga vähe nõutavat juurdehindlust. Nõuame teie röstitud sisu sisaldama vähemalt ühte elementi ja soovitame tungivalt loobumisnupu kasutamist.
<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>
Otse
Klõpsake alloleval nupul, et kuvada röstsai (asub paremas alanurgas meie utiliitidega), mis on vaikimisi peidetud .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>
Läbipaistev
Röstsaivad on kergelt läbipaistvad, et sulanduda nende all olevaga.
<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>
Virnastamine
Kui teil on mitu röstsaia, virnastame need vaikimisi vertikaalselt loetaval viisil.
<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>
Paigutus
Asetage röstsaiad kohandatud CSS-iga vastavalt vajadusele. Ülemist paremat ülaosa kasutatakse sageli märguannete jaoks, nagu ka ülemist keskmist osa. Kui kavatsete näidata ainult ühte toosti korraga, asetage positsioneerimisstiilid otse .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>
Süsteemide puhul, mis genereerivad rohkem teatisi, kaaluge ümbriselemendi kasutamist, et neid saaks hõlpsalt virnastada.
<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>
Flexboxi utiliitide abil saate röstsaiad horisontaalselt ja/või vertikaalselt joondada.
<!-- 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>
Juurdepääsetavus
Röstsaad on mõeldud külastajatele või kasutajatele väikesteks katkestusteks, nii et ekraanilugejate ja sarnaste abitehnoloogiatega inimeste abistamiseks peaksite oma toostid pakkima aria-live
piirkonnas . Ekraanilugejad teatavad reaalajas piirkondade muudatustest (nt röstsaia komponendi süstimine/värskendamine) automaatselt, ilma et oleks vaja kasutaja fookust liigutada või muul viisil kasutajat katkestada. Lisaks lisage aria-atomic="true"
see tagamaks, et kogu röstsaia kuulutatakse alati välja ühe (aatomi) ühikuna, mitte ainult muudatustest teavitamise asemel (mis võib põhjustada probleeme, kui värskendate ainult osa röstsaia sisust või kui kuvatakse sama röstsaia sisu hilisemal ajahetkel). Kui vajalik teave on protsessi jaoks oluline, nt vormi vigade loendi jaoks, kasutage hoiatuskomponentiröstsaia asemel.
Pange tähele, et reaalajas piirkond peab märgistuses olema enne röstsaia loomist või värskendamist. Kui genereerite mõlemad korraga dünaamiliselt ja sisestate need lehele, siis abitehnoloogiad neid üldjuhul ei teavita.
Samuti peate kohandama role
ja aria-live
taset olenevalt sisust. Kui see on oluline teade, näiteks tõrge, kasutage role="alert" aria-live="assertive"
, muul juhul kasutage role="status" aria-live="polite"
atribuute.
Kuna kuvatav sisu muutub, värskendage kindlasti delay
ajalõppu , et kasutajatel oleks piisavalt aega röstsaia lugemiseks.
<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>
Kui kasutate autohide: false
, peate lisama sulgemisnupu, et kasutajad saaksid röstsaiast loobuda.
<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>
Kuigi tehniliselt on röstsaiale võimalik lisada fokuseeritavaid/toimivaid juhtnuppe (nt täiendavaid nuppe või linke), peaksite vältima seda röstsaiade automaatse peitmise korral. Isegi kui annate röstsaiale pika delay
ajalõpu , võib klaviatuuri ja abitehnoloogia kasutajatel olla raske röstsaiale õigel ajal jõuda, et midagi ette võtta (kuna röstsaiad ei keskendu kuvamisel). Kui teil on kindlasti vaja täiendavaid juhtnuppe, soovitame kasutada röstsaia koos autohide: false
.
JavaScripti käitumine
Kasutamine
Toostide lähtestamine JavaScripti kaudu:
$('.toast').toast(option)
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-animation=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
animatsioon | tõeväärtus | tõsi | Rakendage röstsaiale CSS-i tuhmumise üleminek |
automaatselt peita | tõeväärtus | tõsi | Peida röstsai automaatselt |
viivitus | number | 500 |
Viivitus röstsaia peitmisel (ms) |
meetodid
Asünkroonsed meetodid ja üleminekud
Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .
Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .
$().toast(options)
Kinnitab röstsaia käitleja elemendikogu külge.
.toast('show')
Paljastab elemendi röstsaia. Naaseb helistaja juurde enne, kui toosti on tegelikult näidatud (st enne shown.bs.toast
sündmuse toimumist). Peate seda meetodit käsitsi kutsuma, selle asemel ei kuvata teie röstsaia.
$('#element').toast('show')
.toast('hide')
Peidab elemendi röstsaia. Naaseb helistaja juurde enne, kui toost on tegelikult peidetud (st enne hidden.bs.toast
sündmuse toimumist). Kui tegite selle meetodi, peate selle meetodi käsitsi autohide
kutsuma false
.
$('#element').toast('hide')
.toast('dispose')
Peidab elemendi röstsaia. Teie röstsai jääb DOM-i, kuid seda enam ei kuvata.
$('#element').toast('dispose')
Sündmused
Sündmuse tüüp | Kirjeldus |
---|---|
näita.bs.toost | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. |
näidatud.bs.röstsai | See sündmus käivitatakse, kui toost on kasutajale nähtavaks tehtud. |
peida.bs.röstsai | See sündmus käivitatakse kohe, kui hide eksemplari meetod on välja kutsutud. |
peidetud.bs.röstsai | See sündmus käivitatakse, kui röstsai on kasutaja eest varjatud. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})