Toasts
Brùth sanasan don luchd-tadhail agad le toast, teachdaireachd rabhaidh aotrom agus furasta a ghnàthachadh.
Is e brathan aotrom a th’ ann an toasts a chaidh a dhealbhadh gus atharrais air na fiosan putaidh a tha air a bhith mòr-chòrdte le siostaman obrachaidh gluasadach is deasg. Tha iad air an togail le flexbox, agus mar sin tha iad furasta an co-thaobhadh agus an suidheachadh.
Ro-shealladh
Rudan ri fios nuair a bhios tu a’ cleachdadh am plugan toast:
- Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidh
util.js
e . - Tha toasts nan tarraing a-steach airson adhbharan dèanadais, agus mar sin feumaidh tu iad fhèin a thòiseachadh .
- Thoir an aire gu bheil thu an urra ri bhith a’ suidheachadh toasts.
- Falaichidh toasts gu fèin-ghluasadach mura sònraich thu
autohide: false
.
prefers-reduced-motion
ceist nam meadhanan. Faic an
earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .
Eisimpleirean
Bunaiteach
Gus toasts leudachail agus ro-innseach a bhrosnachadh, tha sinn a’ moladh bann-cinn agus bodhaig. Bidh cinn-cinn toast a’ cleachdadh display: flex
, a’ ceadachadh susbaint a cho-thaobhadh gu furasta le taing dha na goireasan iomaill agus bogsa flex againn.
Tha toasts cho sùbailte ‘s a dh’ fheumas tu agus chan eil ach glè bheag de chomharradh a dhìth orra. Aig a’ char as lugha, feumaidh sinn aon eileamaid gus an t-susbaint “toastte” agad a chumail agus brosnaichidh sinn gu làidir putan cuir às.
<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>
Beò
Cliog air a’ phutan gu h-ìosal gus toast a nochdadh (air a shuidheachadh leis na goireasan againn san oisean gu h-ìosal air an làimh dheis) a chaidh fhalach gu bunaiteach le .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>
Tar-shoilleir
Tha toasts beagan tar-shoilleir airson a bhith a’ measgachadh leis na tha gu h-ìosal.
<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>
A' cruachadh
Nuair a bhios iomadh toast agad, bidh sinn mar as trice gan cruachadh gu dìreach ann an dòigh a ghabhas leughadh.
<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>
Suidheachadh
Cuir toasts le CSS àbhaisteach mar a dh ’fheumas tu iad. Tha an taobh deas gu h-àrd air a chleachdadh gu tric airson fiosan, mar a tha am meadhan gu h-àrd. Mura h-eil thu a’ dol a shealltainn ach aon toast aig an aon àm, cuir na stoidhlichean suidheachaidh ceart air an .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>
Airson siostaman a ghineas barrachd fiosan, smaoinich air a bhith a’ cleachdadh eileamaid còmhdaich gus an urrainn dhaibh cruachadh gu furasta.
<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>
Faodaidh tu cuideachd a bhith sùbailte le goireasan flexbox gus toasts a cho-thaobhadh gu còmhnard agus / no gu dìreach.
<!-- 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>
Ruigsinneachd
Thathas ag amas air toasts a bhith nam briseadh beag air an luchd-tadhail no an luchd-cleachdaidh agad, agus mar sin gus an fheadhainn aig a bheil leughadairean sgrion agus teicneòlasan cuideachaidh coltach ris a chuideachadh, bu chòir dhut do bhiadhan a phasgadh ann an aria-live
sgìre . Bidh atharrachaidhean air roinnean beò (leithid stealladh / ùrachadh pàirt toast) air an ainmeachadh gu fèin-ghluasadach le leughadairean sgrion gun a bhith feumach air fòcas an neach-cleachdaidh a ghluasad no stad a chuir air an neach-cleachdaidh. A bharrachd air an sin, thoir a-steach aria-atomic="true"
dèanamh cinnteach gu bheil an toast gu lèir an-còmhnaidh air ainmeachadh mar aonad singilte (atamach), an àite a bhith dìreach ag ainmeachadh na chaidh atharrachadh (a dh’ fhaodadh duilgheadasan adhbhrachadh mura h-ùraich thu ach pàirt de shusbaint an toast, no ma sheallas tu an aon stuth toast aig àm nas fhaide air adhart). Ma tha am fiosrachadh a tha a dhìth cudromach airson a’ phròiseis, me airson liosta mhearachdan ann an cruth, cleachd am pàirt rabhaidhan àite toast.
Thoir an aire gum feum an roinn bheò a bhith an làthair anns a’ chomharra mus tèid an toast a chruthachadh no ùrachadh. Ma ghineas tu an dà chuid gu dinamach aig an aon àm agus an stealladh a-steach don duilleag, mar as trice cha bhith iad air an ainmeachadh le teicneòlasan taice.
Feumaidh tu cuideachd an ìre role
agus an aria-live
ìre atharrachadh a rèir an t-susbaint. Mas e teachdaireachd chudromach a th’ ann leithid mearachd, cleachd role="alert" aria-live="assertive"
, air neo cleachd role="status" aria-live="polite"
buadhan.
Mar a bhios an susbaint a tha thu a’ taisbeanadh ag atharrachadh, dèan cinnteach gun ùraich thu an delay
ùine a-mach gus am bi ùine gu leòr aig luchd-cleachdaidh an toast a leughadh.
<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>
Nuair a bhios tu a’ cleachdadh autohide: false
, feumaidh tu putan dùin a chuir ris gus leigeil le luchd-cleachdaidh an toast a chuir às.
<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>
Ged a tha e comasach gu teicneòlach smachdan cuimseach/gnìomhach (leithid putanan no ceanglaichean a bharrachd) a chur ris a’ bhiadh agad, bu chòir dhut seo a sheachnadh airson a bhith a’ falach toasts gu fèin-ghluasadach. Eadhon ged a bheir thu delay
ùine fhada don toast , dh’ fhaodadh gum bi e duilich do luchd-cleachdaidh meur-chlàr agus teicneòlas cuideachaidh an toast a ruighinn ann an àm airson a dhol an gnìomh (leis nach faigh toasts fòcas nuair a thèid an taisbeanadh). Ma dh’ fheumas tuilleadh smachdan a bhith agad, tha sinn a’ moladh gun cleachd thu toast le autohide: false
.
Giùlan JavaScript
Cleachdadh
Tòisich toasts tro JavaScript:
$('.toast').toast(option)
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-animation=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
beothachadh | boolean | fìor | Cuir a-steach eadar-ghluasad caol CSS chun toast |
fèin-fhalach | boolean | fìor | Falaich an toast gu fèin-ghluasadach |
dàil | àireamh | 500 |
Moill a’ falach an toast (ms) |
Dòighean-obrach
Modhan asyncronach agus eadar-ghluasadan
Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .
Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .
$().toast(options)
A’ ceangal inneal-làimhseachaidh toast ri cruinneachadh eileamaidean.
.toast('show')
A’ nochdadh toast eileamaid. Tilleadh chun neach-fios mus deach an toast a shealltainn (ie mus tachair an shown.bs.toast
tachartas). Feumaidh tu an dòigh seo a ghairm le làimh, an àite sin cha nochd an toast agad.
$('#element').toast('show')
.toast('hide')
A’ falach toast eileamaid. Tilleadh chun neach-fios mus bi an toast falaichte (ie mus tachair an hidden.bs.toast
tachartas). Feumaidh tu an dòigh seo a ghairm le làimh ma rinn autohide
thu false
.
$('#element').toast('hide')
.toast('dispose')
A’ falach toast eileamaid. Fuirichidh an toast agad air an DOM ach cha nochd e tuilleadh.
$('#element').toast('dispose')
Tachartasan
Seòrsa Tachartas | Tuairisgeul |
---|---|
seall.bs.toast | Bidh an tachartas seo a’ losgadh sa bhad nuair show a chanar ris an dòigh eisimpleir. |
air a shealltainn.bs.toast | Thèid an tachartas seo a losgadh nuair a bhios an toast ri fhaicinn don neach-cleachdaidh. |
seiche.bs.toast | Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hide dòigh eisimpleir a ghairm. |
falaichte.bs.toast | Thèid an tachartas seo a losgadh nuair a tha an toast deiseil airson a bhith falaichte bhon chleachdaiche. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})