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:
- Toast diikutsertakan karena alasan kinerja, jadi Anda harus menginisialisasinya sendiri .
- Toasts secara otomatis akan disembunyikan jika Anda tidak menentukan
autohide: false
.
prefers-reduced-motion
kueri 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 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>
Hidup
Klik tombol di bawah untuk menampilkan toast (diposisikan dengan utilitas kami di sudut kanan bawah) yang telah disembunyikan secara default dengan .hide
.
<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 hide" 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>
Tembus cahaya
Roti panggang sedikit tembus pandang untuk berbaur dengan apa yang ada di bawahnya.
<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.
<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.
<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.
<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-primary
dan .text-white
ke .toast
, dan kemudian menambahkan .btn-close-white
tombol tutup kami. Untuk tepi yang tajam, kami menghapus batas default dengan .border-0
.
<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
.
<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.
<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.
<!-- 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-live
wilayah . 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 role
dan aria-live
tergantung 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 delay
batas 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.
<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 delay
tunggu 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(0, 0, 0, .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(0, 0, 0, .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)
})
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.toast
event 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.toast
event terjadi). Anda harus memanggil metode ini secara manual jika Anda autohide
membuatnya 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 scrollspy 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 scrollspy 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...
})