Source

Mga toast

Push notification sa iyong mga bisita gamit ang isang toast, isang magaan at madaling nako-customize na mensahe ng alerto.

Ang mga toast ay mga magaan na notification na idinisenyo upang gayahin ang mga push notification na pinasikat ng mga operating system ng mobile at desktop. Binuo ang mga ito gamit ang flexbox, kaya madaling ihanay at iposisyon ang mga ito.

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag gumagamit ng toast plugin:

  • Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js ito ng .
  • Ang mga toast ay nag-opt-in para sa mga kadahilanan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
  • Pakitandaan na responsable ka sa pagpoposisyon ng mga toast.
  • Awtomatikong itatago ang mga toast kung hindi mo tinukoy autohide: false.

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Mga halimbawa

Basic

Para hikayatin ang mga extensible at predictable toast, inirerekomenda namin ang isang header at body. Gumagamit ang mga header ng toast display: flex, na nagbibigay-daan sa madaling pag-align ng nilalaman salamat sa aming mga margin at flexbox utilities.

Ang mga toast ay nababaluktot gaya ng kailangan mo at may napakakaunting kinakailangang markup. Hindi bababa sa, kailangan namin ng isang elemento upang maglaman ng iyong "toasted" na nilalaman at mahigpit na hinihikayat ang isang pindutan na i-dismiss.

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

Translucent

Ang mga toast ay bahagyang translucent din, kaya pinaghahalo nila ang anumang maaaring lumitaw sa ibabaw nito. Para sa mga browser na sumusuporta sa backdrop-filterCSS property, susubukan din naming i-blur ang mga elemento sa ilalim ng isang toast.

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

Nakasalansan

Kapag mayroon kang maramihang mga toast, ang default namin ay patayong pagsasalansan ng mga ito sa isang nababasang paraan.

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

Paglalagay

Maglagay ng mga toast gamit ang custom na CSS kung kailangan mo ang mga ito. Ang kanang itaas ay kadalasang ginagamit para sa mga notification, gayundin ang itaas na gitna. Kung magpapakita ka lang ng isang toast sa isang pagkakataon, ilagay ang mga istilo ng pagpoposisyon sa kanan .toast.

Bootstrap 11 mins ang nakalipas
Hello, mundo! Ito ay isang toast na mensahe. 
<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>

Para sa mga system na bumubuo ng higit pang mga notification, isaalang-alang ang paggamit ng isang elemento ng pambalot upang madali silang mag-stack.

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

Maaari ka ring magpahanga sa mga utility ng flexbox upang ihanay ang mga toast nang pahalang at/o patayo.

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

Accessibility

Ang mga toast ay nilayon na maging maliliit na abala sa iyong mga bisita o user, kaya para matulungan ang mga may screen reader at katulad na mga pantulong na teknolohiya, dapat mong ibalot ang iyong mga toast sa isang aria-liverehiyon . Ang mga pagbabago sa mga live na rehiyon (tulad ng pag-iniksyon/pag-update ng bahagi ng toast) ay awtomatikong inanunsyo ng mga screen reader nang hindi kailangang ilipat ang focus ng user o kung hindi man ay matakpan ang user. Bukod pa rito, isama aria-atomic="true"upang matiyak na ang buong toast ay palaging inaanunsyo bilang isang unit (atomic), sa halip na ipahayag kung ano ang nabago (na maaaring humantong sa mga problema kung i-update mo lamang ang bahagi ng nilalaman ng toast, o kung ipinapakita ang parehong nilalaman ng toast sa sa ibang pagkakataon). Kung ang impormasyong kailangan ay mahalaga para sa proseso, hal para sa isang listahan ng mga error sa isang form, pagkatapos ay gamitin ang alertong bahagisa halip na toast.

Tandaan na ang live na rehiyon ay kailangang naroroon sa markup bago mabuo o ma-update ang toast. Kung dynamic mong bubuo ang pareho sa parehong oras at i-inject ang mga ito sa page, sa pangkalahatan ay hindi ito iaanunsyo ng mga pantulong na teknolohiya.

Kailangan mo ring iakma ang roleat aria-liveantas depende sa nilalaman. Kung ito ay isang mahalagang mensahe tulad ng isang error, gamitin ang role="alert" aria-live="assertive", kung hindi man ay gumamit ng mga role="status" aria-live="polite"katangian.

Habang nagbabago ang content na ipinapakita mo, tiyaking i-update ang delaytimeout para matiyak na may sapat na oras ang mga tao para basahin ang toast.

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

Kapag ginagamit autohide: falseang , dapat kang magdagdag ng close button upang payagan ang mga user na i-dismiss ang toast.

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

Pag-uugali ng JavaScript

Paggamit

Magsimula ng mga toast sa pamamagitan ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Pangalan Uri Default Paglalarawan
animation boolean totoo Maglapat ng CSS fade transition sa toast
autohide boolean totoo Awtomatikong itago ang toast
pagkaantala numero 500 Antalahin ang pagtatago ng toast (ms)

Paraan

Mga asynchronous na pamamaraan at paglipat

Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .

Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .

$().toast(options)

Naglalagay ng toast handler sa isang koleksyon ng elemento.

.toast('show')

Nagpapakita ng toast ng isang elemento. Bumabalik sa tumatawag bago naipakita ang toast (ibig sabihin, bago shown.bs.toastmangyari ang kaganapan). Kailangan mong manual na tawagan ang paraang ito, sa halip ay hindi lalabas ang iyong toast.

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

.toast('hide')

Itinatago ang toast ng isang elemento. Bumabalik sa tumatawag bago pa talaga naitago ang toast (ibig sabihin, bago hidden.bs.toastmangyari ang kaganapan). Kailangan mong manu-manong tawagan ang paraang ito kung ginawa autohidemong false.

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

.toast('dispose')

Itinatago ang toast ng isang elemento. Ang iyong toast ay mananatili sa DOM ngunit hindi na lalabas.

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

Mga kaganapan

Uri ng kaganapan Paglalarawan
show.bs.toast Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance.
ipinakita.bs.toast Ang kaganapang ito ay gagana kapag ang toast ay ginawang nakikita ng user.
itago.bs.toast Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
hidden.bs.toast Ang kaganapang ito ay gagana kapag ang toast ay tapos nang itago mula sa user. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})