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.

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:

Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js .
Toasts nyea tiatiawɔwɔ le dɔwɔwɔ ƒe susuwo ta, eyata ele be wò ŋutɔ nàdze wo gɔme .
Taflatse de dzesii be wò agbanɔamedzie wònye be nàɖo toastwo ɖe teƒe ɖeka.
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.

Mido gbe nam, xexeame! Esia nye toast gbedasi.

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

Nɔ agbe

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

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Nusi me kɔ nyuie

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

Mido gbe nam, xexeame! Esia nye toast gbedasi.

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

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

Ne toast geɖe le asiwò la, míeɖoa wo ɖe wo nɔewo dzi le tsitrenu le mɔ si woate ŋu axlẽ nu.

Kpɔ? Abe ale si ko.

Tawo yi dzi la, toastwo aƒo ƒu ɖe wo ɖokui si

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

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.

Mido gbe nam, xexeame! Esia nye toast gbedasi.

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

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.

Kpɔ? Abe ale si ko.

Tawo yi dzi la, toastwo aƒo ƒu ɖe wo ɖokui si

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

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

Mido gbe nam, xexeame! Esia nye toast gbedasi.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

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

Mido gbe nam, xexeame! Esia nye toast gbedasi.

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

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.

JavaScript ƒe nuwɔna

Zãzã

Dze toastwo gɔme to JavaScript dzi:

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

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-, abe alesi wòle le data-animation="".

Ŋkɔ	Ƒomevi	Gᴐmedzeƒe	Nuɖᴐɖᴐ
nɔnɔmetata si me woɖea nɔnɔmetatawo le	boolean ƒe ƒuƒoƒo	nyateƒe	Zã CSS fade ƒe tɔtrɔ ɖe toast la ŋu
autohide	boolean ƒe ƒuƒoƒo	nyateƒe	Auto ɣla toast la
hehe ɖe megbe	xexlẽdzesi	`500`	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 .

`$().toast(options)`

Tsɔa toast handler kpena ɖe element nuƒoƒoƒu ŋu.

`.toast('show')`

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.

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

`.toast('hide')`

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.

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

`.toast('dispose')`

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

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

Nudzɔdzɔwo

Nudzɔdzɔ Ƒomevi	Nuɖᴐɖᴐ
ɖee fia.bs.toast	Nudzɔdzɔ sia doa dzo enumake ne woyɔ `show`kpɔɖeŋu mɔnu la.
woɖe fia.bs.toast	Wodoa wɔna sia ne wowɔ toast la wòdze na ezãla.
ɣla.bs.toast	Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ `hide`instance mɔnu la.
ɣaɣla.bs.toast	Wodoa nudzɔdzɔ sia ne toast la ɣla ɖe ezãla vɔ.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})