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.

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

Nusi me kɔ nyuie

Toastwo hã me kɔ vie, eyata wotsaka ɖe nusianu si dzi woate ŋu adze le dzi. Le web-browser siwo doa alɔ backdrop-filterCSS ƒe nɔnɔme la gome la, míadze agbagba hã be míaɖe nusiwo le toast te la ɖa.

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

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

Bootstrap 11 mins enye sia
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.

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

<!-- 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 (atɔmik) ɖeka, tsɔ wu be nàɖe gbeƒã nusi wotrɔ (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 si va emegbe). 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 nya siwo nèle ɖem fia la le tɔtrɔm la, kpɔ egbɔ be yewɔ ɣeyiɣia ƒe delayɣeyiɣia yeyee be nàkpɔ egbɔ be ɣeyiɣi si sɔ le amewo 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.

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

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ɔ showkpɔɖ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ɔ hideinstance 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...
})