Source

bersulang

Pemberitahuan push kepada pengunjung Anda dengan bersulang, pesan peringatan yang ringan dan mudah disesuaikan.

Toast adalah notifikasi ringan yang dirancang untuk meniru notifikasi push yang telah dipopulerkan oleh sistem operasi seluler dan desktop. Mereka dibuat dengan flexbox, sehingga mudah untuk disejajarkan dan diposisikan.

Ringkasan

Hal-hal yang perlu diketahui saat menggunakan plugin toast:

  • Jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.js .
  • Toast diikutsertakan karena alasan kinerja, jadi Anda harus menginisialisasinya sendiri .
  • Harap dicatat bahwa Anda bertanggung jawab untuk memposisikan roti panggang.
  • Toasts secara otomatis akan disembunyikan jika Anda tidak menentukan autohide: false.

Efek animasi komponen ini bergantung pada prefers-reduced-motionkueri media. Lihat bagian pengurangan gerakan pada dokumentasi aksesibilitas kami .

Contoh

Dasar

Untuk mendorong roti panggang yang dapat diperluas dan diprediksi, kami merekomendasikan header dan body. Penggunaan tajuk roti panggang display: flex, memungkinkan penyelarasan konten dengan mudah berkat utilitas margin dan flexbox kami.

Roti panggang sefleksibel yang Anda butuhkan dan memiliki sedikit markup yang dibutuhkan. Minimal, kami memerlukan satu elemen untuk memuat konten "panggang" Anda dan sangat menganjurkan tombol tutup.

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

Roti panggang juga sedikit tembus cahaya, jadi mereka menyatu dengan apa pun yang tampak. Untuk browser yang mendukung backdrop-filterproperti CSS, kami juga akan mencoba mengaburkan elemen di bawah 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>

Penumpukan

Saat Anda memiliki beberapa roti panggang, kami secara default menumpuknya secara vertikal dengan cara yang mudah dibaca.

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

Penempatan

Tempatkan roti panggang dengan CSS khusus sesuai kebutuhan Anda. Kanan atas sering digunakan untuk notifikasi, seperti juga bagian tengah atas. Jika Anda hanya akan menunjukkan satu roti panggang pada satu waktu, letakkan gaya pemosisian tepat di .toast.

Bootstrap 11 menit yang lalu
Halo Dunia! Ini adalah pesan bersulang. 
<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>

Untuk sistem yang menghasilkan lebih banyak notifikasi, pertimbangkan untuk menggunakan elemen pembungkus agar dapat ditumpuk dengan mudah.

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

Anda juga dapat menggunakan utilitas flexbox untuk menyelaraskan roti panggang secara horizontal dan/atau 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

Toast dimaksudkan untuk menjadi gangguan kecil bagi pengunjung atau pengguna Anda, jadi untuk membantu mereka yang memiliki pembaca layar dan teknologi bantu serupa, Anda harus membungkus toast Anda di suatu aria-livewilayah . Perubahan pada wilayah langsung (seperti menyuntikkan/memperbarui komponen toast) secara otomatis diumumkan oleh pembaca layar tanpa perlu memindahkan fokus pengguna atau mengganggu pengguna. Selain itu, sertakan aria-atomic="true"untuk memastikan bahwa seluruh roti panggang selalu diumumkan sebagai satu unit (atom), daripada mengumumkan apa yang diubah (yang dapat menyebabkan masalah jika Anda hanya memperbarui sebagian dari konten roti panggang, atau jika menampilkan konten roti panggang yang sama di suatu saat nanti). Jika informasi yang dibutuhkan penting untuk proses, misalnya untuk daftar kesalahan dalam formulir, maka gunakan komponen peringatanbukannya roti panggang.

Perhatikan bahwa wilayah langsung harus ada di markup sebelum roti panggang dibuat atau diperbarui. Jika Anda secara dinamis menghasilkan keduanya pada saat yang sama dan memasukkannya ke dalam halaman, mereka umumnya tidak akan diumumkan oleh teknologi bantu.

Anda juga perlu menyesuaikan level roledan aria-livetergantung pada konten. Jika itu adalah pesan penting seperti kesalahan, gunakan role="alert" aria-live="assertive", jika tidak gunakan role="status" aria-live="polite"atribut.

Saat konten yang Anda tampilkan berubah, pastikan untuk memperbarui delaybatas waktu untuk memastikan orang memiliki cukup waktu untuk membaca 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>

Saat menggunakan autohide: false, Anda harus menambahkan tombol tutup untuk memungkinkan pengguna mengabaikan 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>

Perilaku JavaScript

Penggunaan

Inisialisasi toasts melalui JavaScript:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".

Nama Jenis Bawaan Keterangan
animasi boolean BENAR Terapkan transisi fade CSS ke roti panggang
sembunyi otomatis boolean BENAR Sembunyikan roti panggang secara otomatis
menunda nomor 500 Penundaan menyembunyikan roti panggang (ms)

Metode

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .

$().toast(options)

Melampirkan handler toast ke koleksi elemen.

.toast('show')

Mengungkapkan roti panggang elemen. Kembali ke pemanggil sebelum toast benar-benar ditampilkan (yaitu sebelum shown.bs.toastevent terjadi). Anda harus memanggil metode ini secara manual, sebagai gantinya roti panggang Anda tidak akan muncul.

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

.toast('hide')

Menyembunyikan roti elemen. Mengembalikan ke pemanggil sebelum toast sebenarnya disembunyikan (yaitu sebelum hidden.bs.toastevent terjadi). Anda harus memanggil metode ini secara manual jika Anda autohidemembuatnya false.

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

.toast('dispose')

Menyembunyikan roti elemen. Roti panggang Anda akan tetap ada di DOM tetapi tidak akan ditampilkan lagi.

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

Acara

Jenis Acara Keterangan
show.bs.toast Acara ini langsung aktif ketika showmetode instance dipanggil.
ditampilkan.bs.toast Acara ini dipicu ketika roti panggang telah dibuat terlihat oleh pengguna.
hide.bs.toast Acara ini dipecat segera ketika hidemetode instance telah dipanggil.
hidden.bs.toast Acara ini dipicu ketika roti panggang telah selesai disembunyikan dari pengguna. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})