Tostadak
Bidali jakinarazpenak zure bisitariei brindis batekin, arin eta erraz pertsonaliza daitekeen alerta-mezu batekin.
Tostadak mugikor eta mahaigaineko sistema eragileek ezagun egin dituzten push jakinarazpenak imitatzeko diseinatutako jakinarazpen arinak dira. Flexbox-ekin eraikita daude, erraz lerrokatzeko eta kokatzeko.
Ikuspegi orokorra
Toast plugina erabiltzean jakin beharrekoak:
- Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoa
util.js
da . - Tostadak errendimendu arrazoiengatik aukeratzen dira, beraz, zuk zeuk hasieratu behar dituzu .
- Kontuan izan tostadak kokatzeko ardura zarela.
- Tostadak automatikoki ezkutatuko dira zehazten ez baduzu
autohide: false
.
prefers-reduced-motion
multimedia kontsultaren menpe dago. Ikusi
gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .
Adibideak
Oinarrizkoa
Topa zabalgarriak eta aurreikusgarriak bultzatzeko, goiburua eta gorputza gomendatzen ditugu. Toast goiburuek erabiltzen dute display: flex
, edukia erraz lerrokatzea ahalbidetuz gure marjina eta flexbox utilitateei esker.
Tostadak behar bezain malguak dira eta behar den markatze gutxi dute. Gutxienez, elementu bakar bat eskatzen dugu zure edukia "txigortua" edukitzeko eta baztertzeko botoia gogor sustatu.
<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>
Zuzenean
Egin klik beheko botoian lehenespenez ezkutatu den tostada bat erakusteko (gure utilitateekin kokatuta beheko eskuineko izkinan) .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>
zeharrargitsuak
Tostadak zertxobait zeharrargitsuak dira azpian dagoenarekin nahasteko.
<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>
Pilatzea
Tostada bat baino gehiago dituzunean, bertikalean pilatzen ditugu modu irakurgarrian.
<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>
Kokapen
Jarri tostadak CSS pertsonalizatuarekin behar dituzun moduan. Goiko eskuineko aldea jakinarazpenetarako erabili ohi da, goiko erdikoa bezala. Inoiz brindis bat bakarrik erakutsiko baduzu, jarri kokapen-estiloak .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>
Jakinarazpen gehiago sortzen dituzten sistemetarako, kontuan hartu biltzeko elementu bat erabiltzea erraz pilatu ahal izateko.
<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>
Flexbox utilitateekin ere lor dezakezu tostadak horizontalean eta/edo bertikalean lerrokatzeko.
<!-- 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>
Irisgarritasuna
Tostadak zure bisitari edo erabiltzaileentzako eten txikiak izan nahi ditu; beraz, pantaila-irakurgailuak eta antzeko laguntza-teknologiak dituztenei laguntzeko, tostadak aria-live
eskualde batean bildu behar dituzu . Zuzeneko eskualdeen aldaketak (adibidez, tostadaren osagai bat injektatzea/eguneratzea) automatikoki iragartzen dituzte pantaila-irakurleek erabiltzailearen fokua mugitu beharrik gabe edo erabiltzailea eten beharrik gabe. Gainera, sartu aria-atomic="true"
tostada osoa unitate (atomiko) bakar gisa iragartzen dela ziurtatzea, aldatutakoa iragartzea baino (horrek arazoak sor ditzake tostadaren edukiaren zati bat soilik eguneratzen baduzu edo tostadako eduki bera bistaratzen baduzu). geroagoko une batean). Beharrezko informazioa prozesurako garrantzitsua bada, adibidez inprimaki bateko akatsen zerrendarako, erabili alerta-osagaiatopa egin beharrean.
Kontuan izan zuzeneko eskualdea markazioan egon behar dela brindisa sortu edo eguneratu aurretik . Biak aldi berean dinamikoki sortzen badituzu eta orrialdean sartzen badituzu, orokorrean ez dira teknologia laguntzaileek iragarriko.
role
Gainera, edukiaren arabera eta aria-live
maila egokitu behar duzu . Errore bat bezalako mezu garrantzitsu bat bada, erabili role="alert" aria-live="assertive"
, bestela erabili role="status" aria-live="polite"
atributuak.
Bistaratzen ari zaren edukia aldatzen doan heinean, ziurtatu denbora- delay
muga eguneratzen duzula, erabiltzaileek brindisa irakurtzeko adina denbora izan dezaten.
<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>
Erabiltzen duzunean autohide: false
, ixteko botoia gehitu behar duzu erabiltzaileek topa baztertu dezaten.
<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>
Teknikoki, toastetan foka daitezkeen/ekintza daitezkeen kontrolak gehitzea posible den arren (adibidez, botoi edo estekak gehigarriak), saihestu beharko zenuke hori egitea tostadak automatikoki ezkutatzeko. delay
Tostadari denbora- muga luzea ematen badiozu ere, baliteke teklatuaren eta laguntza-teknologiaren erabiltzaileei zaila izatea toastera neurriak hartzeko garaiz iristea (toastek ez baitute fokurik jasotzen bistaratzen direnean). Kontrol gehiago izan behar badituzu, tostada bat erabiltzea gomendatzen dugu autohide: false
.
JavaScript portaera
Erabilera
Hasieratu tostadak JavaScript bidez:
$('.toast').toast(option)
Aukerak
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-animation=""
.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
animazioa | boolearra | egia | Aplikatu CSS desagertzeko trantsizioa toastean |
autoezkutatu | boolearra | egia | Ezkutatu tostada automatikoki |
atzerapena | zenbakia | 500 |
Topa ezkutatzen atzeratu (ms) |
Metodoak
Metodo asinkronoak eta trantsizioak
API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .
Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .
$().toast(options)
Elementu bilduma bati tosta-kudeatzailea eransten dio.
.toast('show')
Elementu baten topa erakusten du. Topa benetan erakutsi aurretik (hau da, shown.bs.toast
gertaera gertatu baino lehen) itzultzen da deitzen duenari. Metodo honi eskuz deitu behar diozu, zure topa ez da agertuko.
$('#element').toast('show')
.toast('hide')
Elementu baten tostadak ezkutatzen ditu. Topa benetan ezkutatu aurretik (hau da, gertaera gertatu baino lehen) itzultzen da deitzen duenari . Metodo honi eskuz deitu behar hidden.bs.toast
diozu .autohide
false
$('#element').toast('hide')
.toast('dispose')
Elementu baten tostadak ezkutatzen ditu. Zure brindisa DOM-en geratuko da, baina ez da gehiago erakutsiko.
$('#element').toast('dispose')
Gertaerak
Gertaera mota | Deskribapena |
---|---|
erakutsi.bs.tostada | Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. |
erakusten.bs.tostada | Gertaera hau tostada erabiltzailearentzat ikusgai jartzen denean abiarazten da. |
ezkutatu.bs.tostada | Gertaera hau berehala abiarazten da hide instantzia-metodoa deitzen denean. |
ezkutuan.bs.tostada | Gertaera hau tostada erabiltzaileari ezkutatzen amaitzen denean abiarazten da. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})