bersulang

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

Di halaman ini

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:

Toast diikutsertakan karena alasan kinerja, jadi Anda harus menginisialisasinya sendiri .
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.

Halo Dunia! Ini adalah pesan bersulang.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Sebelumnya, skrip kami secara dinamis menambahkan .hidekelas untuk sepenuhnya menyembunyikan toast (dengan display:none, bukan hanya dengan opacity:0). Ini sekarang tidak perlu lagi. Namun, untuk kompatibilitas mundur, skrip kami akan terus beralih kelas (meskipun tidak perlu praktis untuk itu) hingga versi utama berikutnya.

Contoh langsung

Klik tombol di bawah untuk menampilkan toast (diposisikan dengan utilitas kami di sudut kanan bawah) yang telah disembunyikan secara default.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Kami menggunakan JavaScript berikut untuk memicu demo roti panggang langsung kami:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Tembus cahaya

Roti panggang sedikit tembus pandang untuk berbaur dengan apa yang ada di bawahnya.

Halo Dunia! Ini adalah pesan bersulang.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Penumpukan

Anda dapat menumpuk roti panggang dengan membungkusnya dalam wadah roti panggang, yang secara vertikal akan menambah jarak.

Melihat? Seperti ini.

Perhatian, roti panggang akan ditumpuk secara otomatis

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Konten khusus

Sesuaikan roti panggang Anda dengan menghapus sub-komponen, mengubahnya dengan utilitas , atau dengan menambahkan markup Anda sendiri. Di sini kami telah membuat roti panggang yang lebih sederhana dengan menghapus default .toast-header, menambahkan ikon sembunyikan kustom dari Bootstrap Icons , dan menggunakan beberapa utilitas flexbox untuk menyesuaikan tata letak.

Halo Dunia! Ini adalah pesan bersulang.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Atau, Anda juga dapat menambahkan kontrol dan komponen tambahan ke toasts.

Halo Dunia! Ini adalah pesan bersulang.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Skema warna

Berdasarkan contoh di atas, Anda dapat membuat skema warna roti panggang yang berbeda dengan utilitas warna dan latar belakang kami. Di sini kami telah menambahkan .bg-primarydan .text-whiteke .toast, dan kemudian menambahkan .btn-close-whitetombol tutup kami. Untuk tepi yang tajam, kami menghapus batas default dengan .border-0.

Halo Dunia! Ini adalah pesan bersulang.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </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.

Halo Dunia! Ini adalah pesan bersulang.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

Melihat? Seperti ini.

Perhatian, roti panggang akan ditumpuk secara otomatis

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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.

Halo Dunia! Ini adalah pesan bersulang.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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), bukan hanya 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 kemudian hari). 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 sehingga pengguna memiliki cukup waktu untuk membaca roti panggang.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-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.

Halo Dunia! Ini adalah pesan bersulang.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Meskipun secara teknis dimungkinkan untuk menambahkan kontrol yang dapat difokuskan/dapat ditindaklanjuti (seperti tombol atau tautan tambahan) di roti panggang Anda, Anda harus menghindari melakukan ini untuk menyembunyikan roti panggang secara otomatis. Bahkan jika Anda memberikan waktu delaytunggu yang lama , pengguna keyboard dan teknologi bantu mungkin merasa sulit untuk mencapai roti panggang tepat waktu untuk mengambil tindakan (karena roti panggang tidak menerima fokus saat ditampilkan). Jika Anda benar-benar harus memiliki kontrol lebih lanjut, sebaiknya gunakan toast dengan autohide: false.

Kelancangan

Variabel

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Penggunaan

Inisialisasi toasts melalui JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Pemicu

Pemberhentian dapat dicapai dengan dataatribut pada tombol di dalam roti panggang seperti yang ditunjukkan di bawah ini:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

atau pada tombol di luar roti panggang menggunakan data-bs-targetseperti yang ditunjukkan di bawah ini:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Pilihan

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

Nama	Jenis	Bawaan	Keterangan
`animation`	boolean	`true`	Terapkan transisi fade CSS ke roti panggang
`autohide`	boolean	`true`	Sembunyikan roti panggang secara otomatis
`delay`	nomor	`5000`	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 .

menunjukkan

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.

toast.show()

bersembunyi

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.

toast.hide()

membuang

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

toast.dispose()

dapatkan Instance

Metode statis yang memungkinkan Anda mendapatkan instance toast yang terkait dengan elemen DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Metode statis yang memungkinkan Anda mendapatkan instance toast yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Acara

Jenis acara	Keterangan
`show.bs.toast`	Acara ini langsung aktif ketika `show`metode instance dipanggil.
`shown.bs.toast`	Acara ini dipicu ketika roti panggang telah dibuat terlihat oleh pengguna.
`hide.bs.toast`	Acara ini dipecat segera ketika `hide`metode instance telah dipanggil.
`hidden.bs.toast`	Acara ini dipicu ketika roti panggang telah selesai disembunyikan dari pengguna.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})