Source

Toasts

Push kabar menyang pengunjung kanthi roti panggang, pesen tandha sing entheng lan gampang disesuaikan.

Toasts minangka kabar entheng sing dirancang kanggo niru kabar push sing wis dipopulerkan dening sistem operasi seluler lan desktop. Lagi dibangun karo flexbox, supaya padha gampang kanggo kempal lan posisi.

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin roti panggang:

  • Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js .
  • Toasts dipilih amarga alasan kinerja, mula sampeyan kudu miwiti dhewe .
  • Wigati dimangerteni manawa sampeyan tanggung jawab kanggo nggawe roti panggang.
  • Toasts bakal kanthi otomatis ndhelikake yen sampeyan ora nemtokake autohide: false.

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Tuladha

dhasar

Kanggo kasurung roti panggang extensible lan katebak, disaranake header lan awak. Header roti panggang digunakake display: flex, supaya gampang nyelarasake isi amarga utilitas margin lan flexbox.

Toasts minangka fleksibel sing dibutuhake lan duwe markup sing dibutuhake. Paling ora, kita mbutuhake unsur siji kanggo ngemot isi "panggang" lan banget nyengkuyung tombol ngilangi.

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

Tembus

Roti panggang uga rada tembus, saengga bisa nyampur apa wae sing katon. Kanggo browser sing ndhukung backdrop-filterproperti CSS, kita uga bakal nyoba kanggo burem unsur ing roti panggang.

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

Numpuk

Yen sampeyan duwe macem-macem roti panggang, kita standar kanggo numpuk vertikal kanthi cara sing bisa diwaca.

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

Panggonan

Selehake roti panggang nganggo CSS khusus sing dibutuhake. Ing sisih tengen ndhuwur asring digunakake kanggo kabar, kaya ing tengah ndhuwur. Yen sampeyan mung arep nuduhake roti panggang siji-sijine, pasang gaya posisi ing sisih tengen .toast.

Bootstrap 11 menit kepungkur
Hello, donya! Iki pesen roti panggang. 
<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>

Kanggo sistem sing ngasilake luwih akeh kabar, coba gunakake unsur bungkus supaya bisa tumpukan kanthi gampang.

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

Sampeyan uga bisa seneng karo keperluan flexbox kanggo nyelarasake roti panggang kanthi horisontal lan / utawa vertikal.

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

Aksesibilitas

Toasts dimaksudake minangka gangguan cilik kanggo pengunjung utawa pangguna, mula kanggo mbantu wong sing maca layar lan teknologi bantuan sing padha, sampeyan kudu mbungkus roti panggang ing aria-livewilayah . Owah-owahan ing wilayah urip (kayata nyuntikake/nganyarake komponen roti panggang) diumumake kanthi otomatis dening pembaca layar tanpa perlu mindhah fokus pangguna utawa ngganggu pangguna. Kajaba iku, kalebu aria-atomic="true"kanggo mesthekake yen kabeh roti panggang tansah diumumake minangka unit tunggal (atom), tinimbang ngumumake apa sing diganti (sing bisa nyebabake masalah yen sampeyan mung nganyari bagean saka isi roti panggang, utawa yen nampilake isi roti panggang sing padha ing titik mengko ing wektu). Yen informasi sing dibutuhake penting kanggo proses kasebut, contone kanggo dhaptar kesalahan ing wangun, banjur gunakake komponen tandhatinimbang roti panggang.

Elinga yen wilayah urip kudu ana ing markup sadurunge roti panggang digawe utawa dianyari. Yen sampeyan ngasilake kanthi dinamis ing wektu sing padha lan nyuntikake menyang kaca, umume ora bakal diumumake dening teknologi bantu.

Sampeyan uga kudu ngganti rolelan aria-livetingkat gumantung isi. Yen pesen penting kaya kesalahan, gunakake role="alert" aria-live="assertive", utawa gunakake role="status" aria-live="polite"atribut.

Minangka isi sing sampeyan nuduhake owah-owahan, dadi manawa kanggo nganyari delaywektu entek kanggo mesthekake wong duwe cukup wektu kanggo maca roti panggang.

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

Nalika nggunakake autohide: false, sampeyan kudu nambah tombol cedhak kanggo ngidini pangguna ngilangi roti panggang.

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

Prilaku JavaScript

Panggunaan

Miwiti roti panggang liwat JavaScript:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

jeneng Jinis Default Katrangan
animasi boolean bener Aplikasi transisi fade CSS menyang roti panggang
ndhelikake otomatis boolean bener Otomatis ndhelikake roti panggang
tundha nomer 500 Tundha ndhelikake roti panggang (ms)

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

$().toast(options)

Nempelake pawang roti panggang menyang koleksi unsur.

.toast('show')

Nuduhake roti panggang unsur. Bali menyang panelpon sadurunge roti panggang wis bener ditampilake (yaiku sadurunge shown.bs.toastacara dumadi). Sampeyan kudu nelpon cara iki kanthi manual, tinimbang roti panggang sampeyan ora bakal ditampilake.

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

.toast('hide')

Ndhelikake roti panggang unsur. Bali menyang panelpon sadurunge roti panggang bener-bener didhelikake (yaiku sadurunge hidden.bs.toastacara kasebut kedadeyan). Sampeyan kudu nelpon cara iki kanthi manual yen sampeyan nggawe autohide.false

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

.toast('dispose')

Ndhelikake roti panggang unsur. Roti panggang sampeyan bakal tetep ana ing DOM nanging ora bakal ditampilake maneh.

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

Acara

Jinis Acara Katrangan
show.bs.toast Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.toast Acara iki dipecat nalika roti panggang wis katon kanggo pangguna.
hide.bs.toast Acara iki langsung dipecat nalika hidemetode conto wis diarani.
didhelikake.bs.toast Acara iki dipecat nalika roti panggang wis rampung didhelikake saka pangguna. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})