Source

Toasts

Push notifikaasjes nei jo besikers mei in toast, in lichtgewicht en maklik oanpasber warskôgingsberjocht.

Toasts binne lichtgewicht notifikaasjes ûntworpen om de push-notifikaasjes te mimikjen dy't populêr binne troch mobile en buroblêdbestjoeringssystemen. Se binne boud mei flexbox, sadat se maklik binne te rjochtsjen en te pleatsen.

Oersicht

Dingen om te witten by it brûken fan de toast-plugin:

  • As jo ​​​​ús JavaScript bouwe fanút boarne, fereasketutil.js it .
  • Toasts binne opt-in foar prestaasjes redenen, dus jo moatte se sels inisjalisearje .
  • Tink derom dat jo ferantwurdlik binne foar it pleatsen fan toasts.
  • Toasts sille automatysk ferbergje as jo net spesifisearje autohide: false.

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Foarbylden

Basic

Foar in stimulearjen útwreide en foarsisber toasts, Wy riede in koptekst en lichem. Toast-headers brûke display: flex, wêrtroch maklike ôfstimming fan ynhâld mooglik is troch ús marzje- en flexbox-helpprogramma's.

Toasts binne sa fleksibel as jo nedich binne en hawwe heul lyts fereaske markup. Wy fereaskje op syn minst ien elemint om jo "toasted" ynhâld te befetsjen en in ûntslachknop sterk oan te moedigjen.

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

Trochsichtich

Toasten binne ek in bytsje trochsichtich, sadat se mingde oer wat se miskien ferskine. Foar browsers dy't de backdrop-filterCSS-eigenskip stypje, sille wy ek besykje de eleminten ûnder in toast te blurren.

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

Stacking

As jo ​​​​meardere toasts hawwe, sille wy se standert op in lêsbere manier fertikaal stapelje.

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

Pleatsing

Plak toasts mei oanpaste CSS as jo se nedich hawwe. Rjochts boppe wurdt faak brûkt foar notifikaasjes, lykas de boppeste midden. As jo ​​mar ea sille sjen litte ien toast op in tiid, set de posisjonearring stilen rjocht op 'e .toast.

Bootstrap 11 minuten lyn
Hallo wrâld! Dit is in toast berjocht. 
<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>

Foar systemen dy't mear notifikaasjes generearje, beskôgje it brûken fan in wrappingselemint sadat se maklik kinne stapelje.

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

Jo kinne ek fancy wurde mei flexbox-hulpprogramma's om toasts horizontaal en / of fertikaal út te rjochtsjen.

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

Tagonklikheid

Toasts binne bedoeld om lytse ûnderbrekkings te wêzen foar jo besikers of brûkers, dus om dy te helpen mei skermlêzers en ferlykbere assistinte technologyen, moatte jo jo toasts yn in aria-liveregio ynpakke . Feroarings yn libbensregio's (lykas it ynjeksje/bywurkjen fan in toastkomponint) wurde automatysk oankundige troch skermlêzers sûnder de fokus fan 'e brûker te ferpleatsen of de brûker oars te ûnderbrekken. Dêrneist befetsje aria-atomic="true"om te soargjen dat de hiele toast altyd wurdt oankundige as ien (atomyske) ienheid, ynstee fan oankundigje wat feroare is (wat kin liede ta problemen as jo mar in part fan 'e ynhâld fan' e toast bywurkje, of as deselde toastynhâld werjûn wurdt by letter yn 'e tiid). As de needsaaklike ynformaasje wichtich is foar it proses, bygelyks foar in list mei flaters yn in formulier, brûk dan de warskôgingskomponintynstee fan toast.

Tink derom dat de live regio oanwêzich wêze moat yn 'e markearring foardat de toast wurdt generearre of bywurke. As jo ​​dynamysk generearje beide tagelyk en ynjeksje se yn 'e side, se wurde oer it algemien net oankundige troch assistinte technologyen.

Jo moatte ek oanpasse de roleen aria-livenivo ôfhinklik fan de ynhâld. As it in wichtich berjocht is lykas in flater, brûk dan role="alert" aria-live="assertive", oars brûk role="status" aria-live="polite"attributen.

As de ynhâld dy't jo werjaan feroaret, wês wis dat jo de delaytime -out bywurkje om te soargjen dat minsken genôch tiid hawwe om de toast te lêzen.

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

As jo ​​​​brûke autohide: false, moatte jo in slute knop tafoegje om brûkers de toast te ferlitten.

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

Gebrûk

Inisjalisearje toasts fia JavaScript:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Namme Type Standert Beskriuwing
animaasje boolean wier Tapasse in CSS fade oergong nei de toast
autohide boolean wier Auto ferbergje de toast
fertraging nûmer 500 Fertraging ferbergjen fan de toast (ms)

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

$().toast(options)

Hechtet in toast handler oan in elemint kolleksje.

.toast('show')

Bliuwt in elemint syn toast. Keart werom nei de beller foardat de toast eins is toand (dat wol sizze foardat it shown.bs.toastevenemint bart). Jo moatte dizze metoade manuell neame, ynstee sil jo toast net sjen.

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

.toast('hide')

Ferberget in elemint syn toast. Keart werom nei de beller foardat de toast eins ferburgen is (dus foardat it hidden.bs.toastevenemint bart). Jo moatte dizze metoade manuell neame as jo makke autohidehawwe false.

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

.toast('dispose')

Ferberget in elemint syn toast. Jo toast bliuwt op 'e DOM, mar sil net mear sjen.

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

Eveneminten

Event Type Beskriuwing
show.bs.toast Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
werjûn.bs.toast Dit evenemint wurdt ûntslein as de toast is makke sichtber foar de brûker.
hide.bs.toast Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
hidden.bs.toast Dit evenemint wurdt ûntslein as de toast is klear mei in ferburgen fan de brûker. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})