Dagiti tosta

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

Iti daytoy a panid

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:

Dagiti toast ket opt-in gapu kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
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 kasla 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.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Iti napalabas, dagiti iskripmi ket dinamiko nga innayonda ti .hideklase tapno naan-anay nga ilemmeng ti maysa a toast (nga addaan display:none, imbes a basta addaan opacity:0). Saanen a kasapulan daytoy ita. Nupay kasta, para iti backwards compatibility, ti iskripmi ket agtultuloyto a mang-toggle ti klase (urayno awan ti praktikal a kasapulan para iti daytoy) aginggana ti sumaganad a kangrunaan a bersion.

Agbiag nga ulidan

I-click ti buton iti baba tapno maipakita ti toast (naiposision nga addaan kadagiti utilities-tayo iti baba a kannawan a suli) a nailemmeng babaen ti default.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Usarenmi ti sumaganad a JavaScript tapno mai-trigger ti live toast demo-mi:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Translucent nga

Medio translucent dagiti toast tapno mailaok iti adda iti baba dagitoy.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Panagtumpok

Mabalinmo ti agtumpok kadagiti toast babaen ti panangbalkot kadagita iti pagkargaan iti toast, a bertikal a mangnayon iti sumagmamano nga espasyo.

Kitaen? Kastoy laeng.

Heads up, automatiko nga agtumpok dagiti toast

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Kostumbre a linaon

Ipasayaatmo dagiti toast-mo babaen ti panangikkat kadagiti sub-component, panang-tweak kadagitoy babaen kadagiti utilities , wenno babaen ti pananginayon iti bukodmo a markup. Ditoy ket nangaramidkami ti nasimsimple a toast babaen ti panangikkat ti default .toast-header, pananginayon ti kostumbre nga ikono ti panaglemmeng manipud kadagiti Bootstrap Icons , ken panagusar ti sumagmamano a flexbox a utilidad tapno maitunos ti layout.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Saan laeng a dayta, mabalinmo met ti mangnayon kadagiti kanayonan a kontrol ken paset kadagiti toast.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Dagiti eskema ti kolor

Iti panangibangon iti pagarigan iti ngato, mabalinmo ti mangpartuat kadagiti nadumaduma nga eskema ti kolor ti toast babaen kadagiti utilidadmi iti kolor ken likudan . Ditoy nga innayonmi .bg-primaryken .text-whiteiti .toast, ken kalpasanna innayonmi .btn-close-whiteiti close button-mi. Para iti narangrang nga igid, ikkatenmi ti default a beddeng babaen ti .border-0.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

Kitaen? Kastoy laeng.

Heads up, automatiko nga agtumpok dagiti toast

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 kanayon a maipakaammo ti intero a toast kas maymaysa (atomiko) a yunit, imbes nga ipakaammo laeng no ania ti nabaliwan (a mabalin nga agtungpal kadagiti parikut no i-update laeng ti paset ti linaon ti toast, wenno no mangipakpakita iti isu met laeng a linaon ti toast iti 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 adda umdas a tiempo dagiti agus-usar a mangbasa iti toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-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.

Hello, lubong! Daytoy ket maysa a mensahe ti toast.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Bayat a teknikal ket mabalin a manginayon kadagiti maipamaysa/maaramid a kontrol (kas kadagiti kanayonan a buton wenno silpo) iti toast-mo, rumbeng a liklikam nga aramiden daytoy para kadagiti autohiding a toast. Uray no ikkam ti toast iti napaut a delaytimeout , mabalin a marigatan dagiti agus-usar iti teklado ken makatulong a teknolohia a makadanon iti toast iti umiso a tiempo tapno agtignayda (yantangay dagiti toast ket saan nga umawat iti pokus no maiparang dagitoy). No talaga a masapul nga addaanka iti kanayonan a panangkontrol, irekomendarmi ti panangusar iti toast nga addaan iti autohide: false.

Sass nga

Dagiti Variable

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Panagusar

Irugi dagiti tosta babaen ti JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Dagiti mangtignay

Ti pannakaikkat ket mabalin a maragpat babaen ti dataattribute iti maysa a buton iti uneg ti toast a kas naipakita iti baba:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

wenno iti maysa a buton iti ruar ti toast babaen ti panangusar iti data-bs-targetkas naipakita iti baba:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

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-bs-, a kas iti data-bs-animation="".

Nagan	Tipo	Default	Panangiladawan
`animation`	boolean nga	`true`	Iyaplikar ti CSS fade transition iti toast
`autohide`	boolean nga	`true`	Auto ilemmeng ti toast
`delay`	bilang	`5000`	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 .

ipakita

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.

toast.show()

aglemmeng

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.

toast.hide()

ibelleng

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

toast.dispose()

makaala tiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti toast instansia a nainaig iti maysa nga elemento ti DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

makaalaWennoAgaramid itiInstansia

Estatiko a pamay-an a mangipalubos kenka a makaala ti toast instansia a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Dagiti Pasamak

Kita ti pasamak	Panangiladawan
`show.bs.toast`	Daytoy a pasamak ket agputok a dagus no ti `show`pamay-an ti pagarigan ket maawagan.
`shown.bs.toast`	Daytoy a pasamak ket mapaputok no ti toast ket naaramiden a makita ti agus-usar.
`hide.bs.toast`	Daytoy a pasamak ket dagus a mapaputok no ti `hide`pamay-an ti pagarigan ket naawagan.
`hidden.bs.toast`	Daytoy a pasamak ket mapaputok no ti toast ket nalpas a nailemmeng manipud iti agar-aramat.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})