Source

Dagiti tosta

Iduron dagiti pakaammo kadagiti bisitam babaen ti toast, nalag-an ken nalaka a ma-customize a mensahe ti alerto.

Dagiti toast ket nalag-an a pakaammo a nadisenio a mangtulad kadagiti push notification a pinalatak dagiti mobile ken desktop operating system. Naaramid dagitoy nga addaan iti flexbox, isu a nalaka nga i-align ken iposision dagitoy.

Panangkita iti pakabuklan

Dagiti banag nga ammuen no agusar iti toast plugin:

  • No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .
  • Dagiti toast ket opt-in gapu kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
  • Pangngaasiyo ta laglagipenyo a dakayo ti responsable iti panangiposision kadagiti toast.
  • Automatiko nga aglemmeng dagiti toast no saanmo nga ikeddeng ti autohide: false.

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Dagiti pagarigan

Kadawyan

Tapno maparegta dagiti maipalawa ken maipadto a toast, irekomendarmi ti header ken bagi. Dagiti toast headers ket agusar display: flex, a mangipalubos ti nalaka a panagtunos ti linaon gapu kadagiti margin ken flexbox a utilidadmi.

Dagiti toast ket nalaka a maibagay a kas iti kasapulam ken bassit unay ti kasapulan a markup-da. Iti kabassitan, kasapulanmi ti maymaysa nga elemento a naglaon iti “natoast” a linaonmo ken sibibileg nga iparegtami ti buton ti panangikkat.

<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 nga

Medio translucent met dagiti toast, isu a mailaokda iti rabaw ti aniaman a mabalin nga agparangda iti rabaw. Para kadagiti browser a mangsuporta ti backdrop-filtertagikua ti CSS, padasenmi pay a blur dagiti elemento iti sirok ti toast.

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

Panagtumpok

No addaanka iti adu a toast, default-mi ti bertikal a panangitumpok kadagitoy iti mabasa a pamay-an.

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

Panagplastar

Ikabil dagiti toast nga addaan iti custom CSS kas kasapulam dagitoy. Masansan a mausar ti ngato a kannawan para kadagiti pakaammo, kasta met ti makinngato a tengnga. No maysa laeng a toast ti ipakitam iti tunggal gundaway, ikabilmo a mismo dagiti estilo ti panangiposision iti .toast.

Bootstrap nga 11 mins ti napalabas
Hello, lubong! Daytoy ket maysa a mensahe ti 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">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Para kadagiti sistema a mangpataud kadagiti ad-adu a pakaammo, ibilang ti panagusar ti elemento ti panagbalkot tapno nalakada a maitumpok.

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

Mabalinmo pay ti makagun-od iti magarbo kadagiti flexbox utilities tapno maitunos dagiti toast iti horizontal ken/wenno bertikal.

<!-- 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>

Ti pannakagun-od

Nairanta dagiti toast a babassit a pannakasinga dagiti bisita wenno agus-usar kenka, isu a tapno matulongam dagidiay addaan kadagiti screen reader ken umasping a makatulong a teknolohia, rumbeng a balutem dagiti toast-mo iti maysa a aria-liverehion . Dagiti panagbalbaliw kadagiti sibibiag a rehion (kas ti panangi-inject/panagpabaro ti maysa a paset ti toast) ket automatiko a maipakaammo babaen dagiti agbasbasa ti iskrin a saan a kasapulan a mangyakar ti pokus ti agar-aramat wenno iti sabali a wagas ket mangsinga ti agar-aramat. Mainayon pay, iraman aria-atomic="true"tapno masigurado a ti intero a toast ket kanayon a maipakaammo a kas maymaysa (atomiko) a yunit, imbes nga ipakaammo no ania ti nabaliwan (a mabalin nga agtungpal kadagiti parikut no i-update laeng ti paset ti linaon ti toast, wenno no mangiparang ti isu met laeng a linaon ti toast iti maysa a naud-udi a punto ti panawen). No ti impormasion a kasapulan ket napateg para iti proseso, kas pagarigan para iti listaan ​​dagiti biddut iti maysa a porma, kalpasanna usaren ti paset ti alertoimbes a toast.

Imutektekanyo a kasapulan nga adda ti live region iti markup sakbay a mapataud wenno ma-update ti toast. No dinamiko a mangpataudka nga agpada iti aggigiddan ken mangi-inject kadagitoy iti panid, dagitoy ket sapasap a saan a maipakaammo babaen dagiti makatulong a teknolohia.

Masapul met nga ibagaymo ti roleken aria-livelevel depende iti linaonna. No daytoy ket napateg a mensahe a kas ti biddut, usaren ti role="alert" aria-live="assertive", no saan ket agusar kadagiti role="status" aria-live="polite"attribute.

Bayat nga agbaliwbaliw ti linaon nga ipakpakitam, siguraduem nga i-update ti delaytimeout tapno masigurado nga addaan dagiti tattao iti umdas a tiempo a mangbasa iti 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>

No usarem ti autohide: false, masapul nga inayonmo ti close button tapno mapalubosan dagiti agus-usar a mangilaksid iti 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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Kababalin ti JavaScript

Panagusar

Irugi dagiti tosta babaen ti JavaScript:

$('.toast').toast(option)

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-animation="".

Nagan Tipo Default Panangiladawan
animasion nga boolean nga agpayso Iyaplikar ti CSS fade transition iti toast
autohide nga boolean nga agpayso Auto ilemmeng ti toast
itantan bilang 500 Itantan ti panangilemmeng iti tosta (ms) .

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

$().toast(options)

Ikapet ti toast handler iti koleksion ti elemento.

.toast('show')

Ipalgakna ti toast ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a naipakita ti toast (kayatna a sawen sakbay a shown.bs.toastmapasamak ti pasamak). Masapul a manual nga awagam daytoy a pamay-an, imbes ketdi saan nga agparang ti toast-mo.

$('#element').toast('show')

.toast('hide')

Ilemmengna ti toast ti maysa nga elemento. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti toast (kayatna a sawen sakbay a hidden.bs.toastmapasamak ti pasamak). Masapul a manual nga awagan daytoy a pamay-an no inaramidmo autohideiti false.

$('#element').toast('hide')

.toast('dispose')

Ilemmengna ti toast ti maysa nga elemento. Agtalinaed ti toast mo iti DOM ngem saanen nga agparang.

$('#element').toast('dispose')

Dagiti Pasamak

Kita ti Pasamak Panangiladawan
ipakita.bs.toast Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita.bs.toast Daytoy a pasamak ket mapaputok no ti toast ket naaramiden a makita ti agus-usar.
ilemmeng.bs.toast Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ti pagarigan ket naawagan.
nailemmeng.bs.toast Daytoy a pasamak ket mapaputok no ti toast ket nalpas a nailemmeng manipud iti agar-aramat. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})