Gishiri
Tura sanarwar zuwa ga baƙi tare da abin yabo, saƙon faɗakarwa mai sauƙi kuma mai sauƙin daidaitawa.
Toasts sanarwa ne masu nauyi da aka tsara don kwaikwayi sanarwar turawa waɗanda tsarin aiki na hannu da tebur suka shahara. An gina su da flexbox, don haka suna da sauƙin daidaitawa da matsayi.
Dubawa
Abubuwan da ya kamata ku sani lokacin amfani da toast plugin:
- Idan kuna gina JavaScript ɗin mu daga tushe, yana buƙatar
util.js
. - Toasts suna shiga saboda dalilan aiki, don haka dole ne ka fara su da kanka .
- Lura cewa kai ke da alhakin sanya toasts.
- Toasts zai ɓoye ta atomatik idan ba ku ƙayyade ba
autohide: false
.
prefers-reduced-motion
tambayar kafofin watsa labarai. Dubi
raguwar sashin motsi na takaddun damar mu .
Misalai
Na asali
Don ƙarfafa abubuwan da za a iya faɗi da kuma abin da za a iya faɗi, muna ba da shawarar kai da jiki. Ana amfani da masu kai na toast display: flex
, suna ba da damar daidaita abun ciki cikin sauƙi godiya ga gefen mu da kayan aikin flexbox.
Toasts suna da sassauƙa kamar yadda kuke buƙata kuma suna da ƙarancin alamar da ake buƙata. Aƙalla, muna buƙatar kashi ɗaya don ƙunshe da abun cikin "toasted" da ƙarfafa maɓallin korar.
<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>
Rayuwa
Danna maɓallin da ke ƙasa don nuna abin toast (matsayi tare da kayan aikin mu a cikin ƙananan kusurwar dama) wanda aka ɓoye ta tsohuwa tare da .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>
Translucent
Toasts suna da ɗan haske don haɗuwa tare da abin da ke ƙasa.
<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>
Tari
Lokacin da kuke da toasts masu yawa, muna tsoho don tara su a tsaye ta hanyar da za a iya karantawa.
<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>
Wuri
Sanya gwangwani tare da CSS na al'ada kamar yadda kuke buƙata. Ana amfani da saman dama sau da yawa don sanarwa, kamar yadda babban tsakiya yake. Idan za ku taɓa nuna abin yabo ɗaya a lokaci ɗaya, sanya salon sakawa daidai akan .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>
Don tsarin da ke samar da ƙarin sanarwa, yi la'akari da amfani da abin rufewa don su iya tarawa cikin sauƙi.
<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>
Hakanan zaka iya samun zato tare da kayan aikin flexbox don daidaita toasts a kwance da/ko a tsaye.
<!-- 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>
Dama
Toasts an yi niyya don zama ƙananan katsewa ga baƙi ko masu amfani da ku, don haka don taimakawa waɗanda ke da masu karanta allo da makamantan fasahar taimako, ya kamata ku nannade abubuwan toast ɗinku a cikin aria-live
yanki . Canje-canje ga yankuna masu rai (kamar allura / sabunta kayan toast) ana sanar da su ta atomatik ta masu karanta allo ba tare da buƙatar motsa hankalin mai amfani ba ko kuma katse mai amfani. Bugu da ƙari, haɗa aria-atomic="true"
don tabbatar da cewa ana sanar da duk abin da ake yi wa burodin a matsayin naúrar (atomic), maimakon kawai sanar da abin da aka canza (wanda zai iya haifar da matsala idan kawai kun sabunta wani ɓangare na abun ciki na toast ɗin, ko kuma idan kuna nuna irin abubuwan da kuke so. a wani lokaci na gaba). Idan bayanin da ake buƙata yana da mahimmanci ga tsari, misali don jerin kurakurai a cikin tsari, sannan yi amfani da ɓangaren faɗakarwamaimakon gurasa.
Lura cewa yankin mai rai yana buƙatar kasancewa a cikin alamar kafin a ƙirƙira ko sabunta gurasar. Idan kun samar da duka biyun a lokaci guda kuma ku cusa su cikin shafin, gabaɗaya ba za a sanar da su ta hanyar fasahar taimako ba.
Hakanan kuna buƙatar daidaitawa role
da aria-live
matakin dangane da abun ciki. Idan saƙo ne mai mahimmanci kamar kuskure, yi amfani da role="alert" aria-live="assertive"
, in ba haka ba amfani da role="status" aria-live="polite"
sifofi.
Kamar yadda abun ciki da kuke nunawa ke canzawa, tabbatar da sabunta lokacin delay
ƙarewa domin masu amfani su sami isasshen lokacin karanta abin toast.
<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>
Lokacin amfani da autohide: false
, dole ne ka ƙara maɓallin kusa don ƙyale masu amfani suyi watsi da abin toast.
<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>
Duk da yake a zahiri yana da yuwuwar ƙara sarrafawar mai da hankali/aiki (kamar ƙarin maɓalli ko hanyoyin haɗin gwiwa) a cikin gurasar ku, ya kamata ku guje wa yin wannan don ɓoye abubuwan toast ɗin. Ko da kun ba da burodin dogon delay
lokaci , madannai da masu amfani da fasahar taimako na iya samun wahalar isa ga abin yabo a cikin lokaci don ɗaukar mataki (tun da toasts ba sa samun mai da hankali lokacin da aka nuna su). Idan tabbas dole ne ku sami ƙarin sarrafawa, muna ba da shawarar yin amfani da toast tare da autohide: false
.
Halin JavaScript
Amfani
Fara toasts ta JavaScript:
$('.toast').toast(option)
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-
, kamar a cikin data-animation=""
.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
tashin hankali | boolean | gaskiya | Aiwatar da canjin CSS zuwa ga abin yabo |
autoboye | boolean | gaskiya | Boye toast ta atomatik |
jinkiri | lamba | 500 |
Jinkirin ɓoye gurasar (ms) |
Hanyoyin
Hanyoyi masu daidaitawa da canji
Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .
$().toast(options)
Haɗa mai sarrafa toast zuwa tarin abubuwa.
.toast('show')
Ya bayyana toast ɗin kashi. Komawa ga mai kira kafin a nuna abin toast a zahiri (watau kafin shown.bs.toast
abin ya faru). Dole ne ku kira wannan hanyar da hannu, maimakon abin toast ɗinku ba zai nuna ba.
$('#element').toast('show')
.toast('hide')
Yana ɓoye gurasar wani abu. Komawa ga mai kira kafin abin yabo ya kasance a ɓoye (watau kafin hidden.bs.toast
abin ya faru). Dole ne ku kira wannan hanyar da hannu idan kun autohide
yi false
.
$('#element').toast('hide')
.toast('dispose')
Yana ɓoye gurasar wani abu. Toast ɗin ku zai kasance akan DOM amma ba zai ƙara nunawa ba.
$('#element').toast('dispose')
Abubuwan da suka faru
Nau'in Taron | Bayani |
---|---|
nuna.bs.toast | Wannan taron yana gobara nan da nan lokacin da show aka kira hanyar misali. |
nuna.bs.toast | Ana kora wannan taron lokacin da aka bayyana abin toast ga mai amfani. |
boye.bs.toast | Ana korar wannan taron nan da nan lokacin da hide aka kira hanyar misali. |
boye.bs. toast | Ana kora wannan taron lokacin da abin yabo ya gama ɓoye daga mai amfani. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})