Amathosti
Phusha izaziso kubavakashi bakho ngethosti, umlayezo ongasindi futhi owenzeka ngokwezifiso isixwayiso.
Amathosta ayizaziso ezilula eziklanyelwe ukulingisa izaziso eziye zaduma amasistimu okusebenza eselula nawedeskithophu. Akhiwe nge-flexbox, ngakho kulula ukuwaqondanisa nokuma.
Uhlolojikelele
Izinto okufanele uzazi uma usebenzisa i-plugin ye-toast:
- Uma wakha i-JavaScript yethu ngomthombo, idinga
util.js
. - Amathosti angena ngenxa yezizathu zokusebenza, ngakho-ke kuzomele uwaqalise ngokwakho .
- Sicela uqaphele ukuthi unesibopho sokubeka amathosti.
- Amathosti azofihla ngokuzenzakalelayo uma ungacacisi
autohide: false
.
prefers-reduced-motion
embuzweni wemidiya. Bona ingxenye
yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .
Izibonelo
Okuyisisekelo
Ukuze ukhuthaze amathosi anwebekayo futhi abikezelwe, sincoma unhlokweni nomzimba. Kusetshenziswa izihloko ze -toast display: flex
, ezivumela ukuqondanisa kalula kokuqukethwe ngenxa yezinsiza zethu zemajini kanye ne-flexbox.
Amathosti avumelana nezimo ngendlela oyidingayo futhi anemakhaphu amancane kakhulu adingekayo. Okungenani, sidinga into eyodwa ukuthi iqukathe okuqukethwe kwakho "okuthosiwe" futhi ikhuthaze ngokuqinile inkinobho yokucashisa.
<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>
Phila
Chofoza inkinobho engezansi ukuze ubonise ithosi (ebekwe nezinsiza zethu ekhoneni elingezansi kwesokudla) esifihlwe ngokuzenzakalelayo ngokuthi .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>
I-Translucent
Amathosti ashintshashintsha kancane ukuze ahlangane nalokho okungaphansi kwawo.
<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>
Ukupakisha
Uma unamathosti amaningi, sizenzakalela ukuwapakisha ngokuma ngendlela efundekayo.
<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>
Ukubekwa
Beka amathosti nge-CSS yangokwezifiso njengoba uwadinga. Ingaphezulu kwesokudla livame ukusetshenziselwa izaziso, njengoba kunjalo nendawo ephakathi ephezulu. Uma uzobonisa ithosi eyodwa ngesikhathi, beka izitayela zokuma khona kanye ku- .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>
Kumasistimu akhiqiza izaziso eziningi, cabanga ukusebenzisa i-elementi yokugoqa ukuze akwazi ukunqwabelanisa kalula.
<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>
Ungakwazi futhi ukunethezeka ngezinsiza ze-flexbox ukuze uqondanise amathosta ngokuvundlile kanye/noma ngokuqondile.
<!-- 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>
Ukufinyeleleka
Amathosi enzelwe ukuthi abe yiziphazamiso ezincane kubavakashi bakho noma abasebenzisi, ngakho-ke ukuze usize labo abanezifundi zesikrini nobuchwepheshe obufanayo bokusiza, kufanele usonge amathosi akho aria-live
endaweni . Izinguquko ezifundeni ezibukhoma (njengokujova/ukubuyekeza ingxenye ye-toast) zimenyezelwa ngokuzenzakalelayo izifundi zesikrini ngaphandle kokudinga ukuhambisa ukugxila komsebenzisi noma ukuphazamisa umsebenzisi. Ukwengeza, faka aria-atomic="true"
ukuqinisekisa ukuthi yonke ithosti ihlale imenyezelwa njengeyunithi eyodwa (ye-athomu), kunokuba nje umemezele lokho okushintshiwe (okungaholela ezinkingeni uma ubuyekeza kuphela ingxenye yokuqukethwe kwethosti, noma uma ubonisa okuqukethwe kwethosti efanayo. ngokuhamba kwesikhathi). Uma ulwazi oludingekayo lubalulekile kunqubo, isb ngohlu lwamaphutha efomini, sebenzisa ingxenye yesixwayiso .esikhundleni se-toast.
Qaphela ukuthi indawo ebukhoma idinga ukuba khona kumakhaphu ngaphambi kokuthi i-toast yenziwe noma ibuyekezwe. Uma ukukhiqiza kokubili ngesikhathi esisodwa futhi ukujove ekhasini, ngokuvamile ngeke kumenyezelwe ngobuchwepheshe obusizayo.
Udinga futhi ukuzivumelanisa role
nezinga aria-live
ngokuya ngokuqukethwe. Uma kungumlayezo obalulekile njengephutha, sebenzisa role="alert" aria-live="assertive"
, uma kungenjalo sebenzisa role="status" aria-live="polite"
izibaluli.
Njengoba okuqukethwe okubonisayo kushintsha, qiniseka ukuthi ubuyekeza delay
ukuphela kwesikhathi ukuze abasebenzisi babe nesikhathi esanele sokufunda ithosti.
<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>
Uma usebenzisa autohide: false
i-, kufanele wengeze inkinobho yokuvala ukuze uvumele abasebenzisi ukuthi bachithe ithosti.
<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>
Nakuba ngokobuchwepheshe kungenzeka ukwengeza izilawuli ezigxilisa ingqondo/ezingenziwa (njengezinkinobho ezengeziwe noma izixhumanisi) kuthosti yakho, kufanele ugweme ukwenza lokhu ukuze ufihle amathosi ngokuzenzakalela. Ngisho noma unikeza i-toast isikhathi eside delay
, abasebenzisi bekhibhodi nobuchwepheshe bokusiza bangase bakuthole kunzima ukufinyelela i-toast ngesikhathi ukuze bathathe isinyathelo (njengoba amathosti awakutholi ukugxila lapho eboniswa). Uma kufanele ube nezilawuli ezengeziwe, sincoma ukuthi usebenzise ithosti ene- autohide: false
.
Ukuziphatha kweJavaScript
Ukusetshenziswa
Qalisa ama-toast nge-JavaScript:
$('.toast').toast(option)
Izinketho
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-
, njengaku data-animation=""
.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
izithombe | boolean | iqiniso | Faka inguquko ye-CSS fade ku-toast |
fihla ngokuzenzakalelayo | boolean | iqiniso | Fihla ngokuzenzakalelayo ithosi |
ukubambezela | inombolo | 500 |
Libazisa ukufihla ithosti (ms) |
Izindlela
Izindlela ze-Asynchronous kanye noshintsho
Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .
Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .
$().toast(options)
Inamathisela isibambi se-toast eqoqweni lesici.
.toast('show')
Iveza ithosi yento. Ibuyela kofonayo ngaphambi kokuthi kuboniswe ithosi (okungukuthi ngaphambi kokuba shown.bs.toast
umcimbi wenzeke). Kufanele ushayele le ndlela mathupha, kunalokho ithosi lakho ngeke livele.
$('#element').toast('show')
.toast('hide')
Ifihla ithosi yento. Ibuyela kofonayo ngaphambi kokuthi ithosi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.toast
kwenzeke umcimbi). Kufanele ushayele le ndlela mathupha uma wenze autohide
ku- false
.
$('#element').toast('hide')
.toast('dispose')
Ifihla ithosi yento. Ithosi lakho lizohlala ku-DOM kodwa ngeke lisavela.
$('#element').toast('dispose')
Imicimbi
Uhlobo Lomcimbi | Incazelo |
---|---|
show.bs.toast | Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. |
kubonisiwe.bs.toast | Lo mcimbi uxoshwa lapho i-toast yenziwe yabonakala kumsebenzisi. |
fihla.bs.toast | Lo mcimbi uxoshwa ngokushesha lapho hide indlela yesibonelo ibizwa. |
kufihliwe.bs.toast | Lo mcimbi uxoshwa lapho ithosti isiqedile ukufihlwa kumsebenzisi. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})