Trɔ yi nya veviwo gbɔ Trɔ yi docs navigation gbɔ
in English

Toast siwo wotsɔna ɖaa nu

Tsɔ toast, si nye nuxlɔ̃ame gbedasi si ƒe kpekpeme le bɔbɔe eye woate ŋu atrɔ asi le eŋu bɔbɔe la ƒo nyatakakawo na wò amedzrowo.

Le axa sia dzi

Toasts nye nyatakaka siwo le bɔbɔe siwo wowɔ be woasrɔ̃ push notifications siwo asitelefon kple kɔmpiuta dɔwɔɖoɖowo va xɔ ŋkɔ la. Wotu wo kple flexbox, eyata wole bɔbɔe be woaɖo wo ɖe ɖoɖo nu ahaɖo wo ɖe teƒe ɖeka.

Kpɔɖeŋunyagbɔgblɔ

Nusiwo wòle be nànya ne èle toast plugin la zãm:

  • Toasts nyea tiatiawɔwɔ le dɔwɔwɔ ƒe susuwo ta, eyata ele be wò ŋutɔ nàdze wo gɔme .
  • Toasts aɣla le eɖokui si ne mègblɔe o autohide: false.
Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .

Kpɔɖeŋuwo

Gɔmedzenu

Be míade toast siwo woate ŋu akeke ɖe enu eye woate ŋu agblɔe ɖi ƒe dzi ƒo la, míeɖo aɖaŋu be woatsɔ ta kple ŋutilã awɔ dɔe. Toast headers use display: flex, si ɖea mɔ be woaɖo nyatakakawo ɖe ɖoɖo nu bɔbɔe akpe ɖe míaƒe margin kple flexbox utilities ta.

Toastwo te ŋu trɔna ɖe nɔnɔmewo ŋu abe alesi nèhiã ene eye dzesidenu ʋɛ aɖewo koe wobia tso wo si. Ne mede ɖeke o la, míebiaa nu ɖeka aɖe si me wò “toasted” me nyawo nanɔ eye míedea dzi ƒo na wò vevie be nàɖe asi le eŋu.

<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>
Tsã la, míaƒe nuŋɔŋlɔwo tsɔa .hideklass la kpena ɖe eŋu le mɔ si trɔna nu be woaɣla toast aɖe keŋkeŋ (kple display:none, ke menye kple ko o opacity:0). Esia megahiã fifia o. Ke hã, le megbenyawo ƒe sɔsɔ ta la, míaƒe nuŋɔŋlɔa ayi edzi atrɔ asi le klass la ŋu (togbɔ be mehiã ŋutɔŋutɔ o hã) vaseɖe esime woawɔ tɔtrɔ gã si kplɔe ɖo.

Kpɔɖeŋu si le agbe

Zi dzesi si le ete dzi be nàkpɔ toast (si woɖo ɖe teƒe si míaƒe dɔwɔnuwo le le ɖusime le ete) si woɣla le gɔmedzedzea me.

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

Míezãa JavaScript si gbɔna tsɔ dzea míaƒe live toast demo la gɔme:

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

    toast.show()
  })
}

Nusi me kɔ nyuie

Toastwo me kɔ vie be woatsaka kple nusiwo le wo te.

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

Nuƒoƒoƒu ɖe wo nɔewo dzi

Àte ŋu aƒo toastwo nu ƒu to wo babla ɖe toast nugoe me, si ana dometsotso aɖewo nanɔ wo nɔewo ŋu le tsitrenu.

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

Nyatakaka siwo wowɔ ɖe ɖoɖo nu

Trɔ asi le wò toasts ŋu to akpa suewo ɖeɖeɖa me, asitɔtrɔ le wo ŋu kple utilities , alo to wò ŋutɔ wò dzesidenu tsɔtsɔ kpee me. Le afisia la, míewɔ toast si le bɔbɔe wu to default la ɖeɖeɖa me .toast-header, tsɔ ɣla dzesi si wowɔ ɖe ɖoɖo nu kpe ɖe Bootstrap Icons ŋu , eye míezã flexbox dɔwɔnu aɖewo tsɔ trɔ asi le ɖoɖoa ŋu.

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

Alo àte ŋu atsɔ nu bubu siwo dzi woaɖu kple nusiwo le eme hã akpe ɖe toastwo ŋu.

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

Amadedewo ƒe ɖoɖowo

Ne ètu kpɔɖeŋu si le etame la, àte ŋu awɔ toast ƒe amadede vovovowo kple míaƒe amadede kple megbe dɔwɔnuwo. Afisiae míetsɔ .bg-primarykple kpe .text-whiteɖe .toast, eye emegbe míetsɔ kpe .btn-close-whiteɖe míaƒe nutrenu ƒe dzesi ŋu. Ne èdi be yeakpɔ nugbɔ si le ʋuʋu ɖi la, míeɖea liƒo si woɖo ɖi la ɖa kple .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>

Amewo ɖoɖo ɖe teƒe aɖe

De toasts kple CSS si wowɔ ɖe ɖoɖo nu la ɖe teƒe si nèhiã wo. Zi geɖe la, wozãa ɖusime si le etame hena nyatakakawo nana, abe alesi wozãa titina si le etame ene. Ne toast ɖeka koe nàɖe afia gbeɖeka le ɣeyiɣi ɖeka me la, ke da alesi woɖoa nu ɖe ​​teƒea ƒe atsyãwo ɖe .toast.

Bootstrap 11 mins enye sia
Mido gbe nam, xexeame! Esia nye toast gbedasi. 
<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>

Le ɖoɖo siwo wɔa nyatakaka geɖe wu gome la, bu nusi wotsɔ blaa nu zazã ŋu ale be woate ŋu aƒo wo nu ƒu bɔbɔe.

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

Àte ŋu akpɔ fancy hã kple flexbox utilities be nàɖo toasts ɖe ɖoɖo nu le tsia dzi kple/alo le tsia dzi.

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

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Woɖoe be toasts nanye nu suesuesue siwo axe mɔ na wò amedzrowo alo ezãlawo, eyata be nàkpe ɖe amesiwo si screen reader le kple mɔ̃ɖaŋununya mawo tɔgbe siwo kpena ɖe ame ŋu le ŋu la, ele be nàxatsa wò toasts ɖe aria-livenuto aɖe me . Tɔtrɔ siwo wowɔ le nuto siwo me wole me (abe toast ƒe akpa aɖe dodo/wɔ yeyee ene) la, screen readers ɖea gbeƒãe le wo ɖokui si evɔ mehiã be woaʋuʋu ezãla ƒe susu alo atso nya me le ezãla ŋu le mɔ bubu aɖeke nu o. Tsɔ kpe ɖe eŋu la, de eme aria-atomic="true"be nàkpɔ egbɔ be woɖe gbeƒã toast bliboa ɣesiaɣi be enye nu ɖeka (atomik) ɖeka, tsɔ wu be nàɖe gbeƒã nusi wotrɔ ko (si ate ŋu ahe kuxiwo vɛ ne èwɔ toast la me nyawo ƒe akpa aɖe ko yeyee, alo ne èle toast la me nyawo ƒe akpa ma ke ɖem fia le ɣeyiɣi aɖe megbe). Ne nyatakaka siwo hiã la le vevie na dɔa, le kpɔɖeŋu me, na vodadawo ƒe xexlẽdzesi le agbalẽvi aɖe me la, ekema zã nuxlɔ̃ame ƒe akpaaɖe toast teƒe.

De dzesii be ele be nuto si le agbe la nanɔ dzesidenu la me hafi woawɔ toast la alo awɔ yeyee. Ne èwɔ evea siaa le ɣeyiɣi ɖeka me le mɔ si trɔna nu eye nèdo wo ɖe axaa dzi la, zi geɖe la, mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu maɖe gbeƒã wo o.

Ele be nàtrɔ asi le rolekple aria-livedzidzenu hã ŋu le emenyawo nu. Ne enye gbedasi vevi aɖe abe vodada ene la, zã role="alert" aria-live="assertive", ne menye nenema o la, zã role="status" aria-live="polite"nɔnɔmewo.

Ne nyatakaka siwo nèle ɖem fia la le tɔtrɔm la, kpɔ egbɔ be yewɔ ɣeyiɣia ƒe delayɣeyiɣia yeyee ale be ɣeyiɣi si sɔ nasu ezãlawo si be woaxlẽ toast la.

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

Ne èle , zãm autohide: falsela, ele be nàtsɔ nutrenu aɖe akpe ɖe eŋu be wòana ezãlawo naɖe asi le toast la ŋu.

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

Togbɔ be le mɔ̃ɖaŋununya gome la, anya wɔ be nàtsɔ nusiwo dzi woate ŋu aɖo ŋkui/awɔ dɔ le (abe abɔta alo kadodo bubuwo ene) akpe ɖe wò toast ŋu hã la, ele be nàƒo asa na esia wɔwɔ na autohiding toasts. Even if you give the toast a long delaytimeout , keyboard kple kpekpeɖeŋu mɔ̃ɖaŋununya zãlawo ate ŋu asesẽ be woaɖo toast la gbɔ le ɣeyiɣi nyuitɔ dzi be woawɔ nane (esi toasts mexɔa susu ne woɖe wo fia o ta). Ne ele be nàgakpɔ ŋusẽ ɖe nu bubuwo dzi keŋkeŋ la, míele aɖaŋu ɖom be nàzã toast si me autohide: false.

Sass ƒe nyawo

Nusiwo trɔna

$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);

Zãzã

Dze toastwo gɔme to JavaScript dzi:

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

Nusiwo ʋãa ame

Woateŋu awɔ asiɖeɖe le dɔ ŋu kple datanɔnɔme si le abɔta aɖe dzi le toast la me abe alesi woɖee fia le ete ene:

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

alo le abɔta aɖe si le toast la godo dzi to data-bs-targetalesi woɖee fia le ete la zazã me:

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

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-bs-, abe alesi wòle le data-bs-animation="".

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
animation boolean ƒe ƒuƒoƒo true Zã CSS fade ƒe tɔtrɔ ɖe toast la ŋu
autohide boolean ƒe ƒuƒoƒo true Auto ɣla toast la
delay xexlẽdzesi 5000 He toast la ɣla ɖe megbe (ms) .

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo .

ɖe fia

Eɖea element aɖe ƒe toast fiana. Trɔna yia ame si yɔe gbɔ hafi woɖe toast la fia ŋutɔŋutɔ (si nye hafi shown.bs.toastnudzɔdzɔa nadzɔ). Ele be nàtsɔ asi ayɔ mɔnu sia, ke boŋ wò toast la maɖee afia o.

toast.show()

be

Eɣlaa element aɖe ƒe toast. Trɔna yia ame si yɔe gbɔ hafi woɣla toast la ŋutɔŋutɔ (si nye hafi hidden.bs.toastnudzɔdzɔa nadzɔ). Ele be nàtsɔ asi ayɔ mɔnu sia ne èwɔe autohidebe false.

toast.hide()

tsɔe ƒu gbe

Eɣlaa element aɖe ƒe toast. Wò toast la anɔ DOM la dzi gake magaɖee afia o.

toast.dispose()

getInstance ƒe kpɔɖeŋu

Static mɔnu si ɖea mɔ na wò be nàxɔ toast ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe

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

xɔAloWɔwɔKpɔɖeŋu

Static mɔnu si ɖea mɔ na wò be nàxɔ toast ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe, alo awɔ yeye nenye be womedze egɔme o

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

Nudzɔdzɔwo

Nudzɔdzɔ ƒomevi Nuɖᴐɖᴐ
show.bs.toast Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
shown.bs.toast Wodoa wɔna sia ne wowɔ toast la wòdze na ezãla.
hide.bs.toast Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
hidden.bs.toast Wodoa nudzɔdzɔ sia ne toast la ɣla ɖe ezãla vɔ. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})