Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

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.

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

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

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

    toast.show()
  })
}

Tembus cahaya

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

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

html 
<div class="toast-container position-static">
  <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.

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

html 
<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 .text-bg-primaryke .toast, dan kemudian menambahkan .btn-close-whiteke tombol tutup kami. Untuk tepi yang tajam, kami menghapus batas default dengan .border-0.

html 
<div class="toast align-items-center text-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.

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

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

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

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

CSS

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, toast sekarang menggunakan variabel CSS lokal .toastuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Variabel Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Karena opsi dapat diteruskan melalui atribut data atau JavaScript, Anda dapat menambahkan nama opsi ke data-bs-, seperti pada data-bs-animation="{value}". Pastikan untuk mengubah jenis huruf dari nama opsi dari “ camelCase ” menjadi “ kebab-case ” saat meneruskan opsi melalui atribut data. Misalnya, gunakan data-bs-custom-class="beautifier"alih-alih data-bs-customClass="beautifier".

Pada Bootstrap 5.2.0, semua komponen mendukung atribut data cadangan eksperimentaldata-bs-config yang dapat menampung konfigurasi komponen sederhana sebagai string JSON. Ketika suatu elemen memiliki data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang terpisah akan menimpa nilai yang diberikan pada data-bs-config. Selain itu, atribut data yang ada dapat menampung nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Nama Jenis Bawaan Keterangan
animation boolean true Terapkan transisi fade CSS ke roti panggang.
autohide boolean true Sembunyikan roti panggang secara otomatis setelah penundaan.
delay nomor 5000 Tunda dalam milidetik sebelum menyembunyikan roti panggang.

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 .

metode Keterangan
dispose Menyembunyikan roti elemen. Roti panggang Anda akan tetap ada di DOM tetapi tidak akan ditampilkan lagi.
getInstance Metode statis yang memungkinkan Anda mendapatkan instance toast yang terkait dengan elemen DOM.
Misalnya: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Mengembalikan instance roti panggang Bootstrap.
getOrCreateInstance Metode statis yang memungkinkan Anda mendapatkan instance toast yang terkait dengan elemen DOM, atau membuat yang baru, jika tidak diinisialisasi.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Mengembalikan instance roti panggang Bootstrap.
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.
isShown Mengembalikan boolean sesuai dengan status visibilitas 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.

Acara

Peristiwa Keterangan
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.
show.bs.toast Acara ini langsung aktif ketika showmetode instance dipanggil.
shown.bs.toast Acara ini dipicu ketika roti panggang telah dibuat terlihat oleh pengguna. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})