Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

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:

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

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

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

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

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

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

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

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

Bootstrap nga 11 mins ti napalabas
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.

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

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

<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 showpamay-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 hidepamay-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...
})