Source

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 chuanutil.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.

He component hian animation effect hi prefers-reduced-motionmedia 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Translucent a ni

Toasts pawh hi a translucent deuh a, chuvang chuan a chunga lang thei tur apiangah a blend vek a ni. CSS property support tu browser tan chuan backdrop-filtertoast hnuaia elements te chu blur kan tum bawk ang.

<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">&times;</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">&times;</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">&times;</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.

Bootstrap a ni 11 mins kal ta khan
Hello, khawvel! Hei hi toast message a ni. 
<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">&times;</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">&times;</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">&times;</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="min-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">&times;</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-liveregion 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, a danglamna chu puan 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 chu at-ah a lan chuan 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 roleleh level pawh i adapt a ngai bawk . aria-liveError 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 tarlan chu a danglam zel ang a, miten toast chhiar hun an neih theih nan delaytimeout chu 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: falsetoast 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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 .

Hriat belh duh chuan kan JavaScript documentation en rawh .

$().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.toastthilthleng 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.toastthilthleng a thlen hma) call tu hnenah a kir leh thin. I siam a nih chuan he method hi manual-in i call a autohidengai a falseni.

$('#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 showHe 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 hideHe 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...
})