Toasts te pawh a awm
I tlawhtute hnena hriattirna chu toast hmangin push la, alert message rit lo leh awlsam taka siam theih a ni.
Toasts hi mobile leh desktop operating system-a an lo lar tawh push notification ang deuha siam, notification rit lo tak tak a ni. Flexbox hmanga siam an nih avangin align leh position a awlsam hle.
A tlangpuiin
Toast plugin hman huna hriat tur awmte:
- Kan JavaScript hi source atanga i siam a nih chuan
util.js
. - Toasts hi performance avanga opt-in a nih avangin nangmah ngeiin i initialize tur a ni .
- Toasts positioning hi nangmahin mawhphurhna a ni tih hre reng ang che.
- Toasts chu i tarlan loh chuan a inthup nghal vek ang
autohide: false
.
prefers-reduced-motion
media query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la
.
Entirna te
Bulthut
Extensible leh predictable toasts fuih nan header leh body kan rawt a ni. Toast headers hmang display: flex
, kan margin leh flexbox utilities vangin content awlsam taka alignment theih a ni.
Toasts hi i mamawh ang zela flexible a ni a, markup mamawh pawh a tlem hle. A tlem berah chuan i “toasted” content awmna tur element pakhat kan mamawh a, dismiss button pawh nasa takin kan fuih bawk.
<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>
Nung
A hnuaia button hi click la, toast (kan utilities awmna dinglam sir hnuai lama dah) default-a thup tawh chu .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 a ni
Toasts hi a hnuaia thil awm nen a inmil theih nan a translucent deuh a ni.
<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>
Stacking tih a ni
Toast tam tak i neih chuan chhiar awlsam takin vertically stacking kan default thin.
<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>
Hmun dahna tur
Toasts chu i mamawh angin custom CSS hmangin dah rawh. A chung dinglam hi notification atan hman a ni fo a, chung lam middle pawh a ni. Toast pakhat chauh i entir dawn a nih chuan positioning styles te chu .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>
Notification tam zawk siamtu system tan chuan awlsam taka an stack theih nan wrapping element hman tum ang che.
<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>
Toasts horizontal leh/or vertically align turin flexbox utilities hmangin fancy i hmu thei bawk.
<!-- 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>
A thlen theihna tur
Toasts hi i tlawhtute emaw, i hmangtute emaw tana tihbuai tenau tak ni tura ruahman a ni a, chuvangin screen reader leh a ang chi assistive technology nei te tanpui nan, i toasts te chu aria-live
region pakhatah i wrap tur a ni Live region-a inthlak danglamna (toast component inject/update ang chi) chu screen reader-te chuan user-te focus sawn emaw, thil dangin user-te tihtawp emaw ngai lovin automatic-in an puang chhuak ṭhin. Chu bâkah, toast pumpui chu unit pakhat (atomic) anga puan chhuah reng a nih theih nân telh bawk aria-atomic="true"
ang che, thil tihdanglam tih puan mai ai chuan (chu chuan toast-a thu awm ṭhenkhat chauh i update chuan harsatna a thlen thei a, a nih loh leh toast thu awm ang chiah a lan chuan harsatna a thlen thei bawk). hun hnuhnung zawkah). Information mamawh chu process atana pawimawh a nih chuan, eg form-a tihsual list atan chuan alert component hmang rawhtoast ai chuan.
Toast siam emaw update emaw hmain markup-ah live region a awm a ngai tih hre reng ang che . A pahnih hian a ruala dynamically generate a, page chhungah inject a nih chuan, a tlangpuiin assistive technology hmangin an puang dawn lo.
Tin , a content a zirin role
leh level pawh i adapt a ngai bawk . aria-live
Error ang chi message pawimawh tak a nih chuan , hmang la role="alert" aria-live="assertive"
, chutiang a nih loh chuan role="status" aria-live="polite"
attribute hmang rawh.
I thil hmuh tur a inthlak ang zelin, a hmangtute’n toast chhiar hun an neih theih nan delay
timeout kha update ngei ang che.
<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>
, i hman hunah chuan autohide: false
toast chu a dismiss theih nan close button i dah tel tur a ni.
<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>
Technically chuan i toast-ah hian focusable/actionable controls (additional buttons emaw links ang chi) dah theih a nih laiin, autohiding toasts atan chuan hetiang hi tih loh tur a ni. Even if you give the toast a long delay
timeout , keyboard leh assistive technology hmangtute chuan hmalak tumin toast chu a hun taka thlen harsa an ti mai thei (toast-te an lan hunah focus an dawng lo a nih avangin). Control dang i neih ngei ngei tur a nih chuan, toast with autohide: false
.
JavaScript tih dan tur
Hman dan tur
JavaScript hmangin toast te chu initialize theih a ni:
$('.toast').toast(option)
Thil thlan theih a ni
Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-
, data-animation=""
.
Hming | Lampang | Hlawhchhamna | Hrilhfiahna |
---|---|---|---|
animation tih a ni | boolean a ni | dik | Toast ah hian CSS fade transition hmangin apply rawh |
autohide tih a ni | boolean a ni | dik | Auto hide la, toast chu a ni |
titlai | a zat | 500 |
Toast thup hun sawn hlat (ms) . |
Thiltih dan tur
Asynchronous method leh inthlak danglamna te
API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .
$().toast(options)
Element collection pakhatah toast handler a dah tel bawk.
.toast('show')
Element pakhat toast a pholang. Toast a lan tak tak hmain (chu chu shown.bs.toast
thilthleng a thlen hma) call tu hnenah a kir leh thin. Hetiang method hi manual-in i call a ngai a, chu ai chuan i toast chu a lang lo vang.
$('#element').toast('show')
.toast('hide')
Element pakhat toast a thup thin. Toast thup tak tak a nih hmain (chu chu hidden.bs.toast
thilthleng a thlen hma) call tu hnenah a kir leh thin. I siam a nih chuan he method hi manual-in i call a autohide
ngai a false
ni.
$('#element').toast('hide')
.toast('dispose')
Element pakhat toast a thup thin. I toast chu DOM-ah a awm reng ang a, mahse a lang tawh lo vang.
$('#element').toast('dispose')
Thil thlengte
Thil thleng chi hrang hrang | Hrilhfiahna |
---|---|
show.bs.toast a ni | show He event hi instance method kan koh chuan a fire nghal vek a ni. |
tih a ni.bs.toast | He event hi toast chu a hmangtu hmuh theiha siam a nih chuan a kap thin. |
thup.bs.toast a ni | hide He event hi instance method koh a nih chuan a fire nghal a ni. |
thup.bs.toast a ni | He event hi toast chu user hnen atanga thup a nih zawh chuan a fire thin. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})