Bootstrap JS Toast
Kelas CSS roti panggang
Komponen Toast seperti kotak peringatan yang hanya ditampilkan selama beberapa detik ketika sesuatu terjadi (yaitu ketika pengguna mengklik tombol, mengirimkan formulir, dll.).
Untuk tutorial tentang Toast, baca Tutorial Bootstrap Toast kami .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Aktifkan Melalui JavaScript
Toast harus diinisialisasi dengan jQuery: pilih elemen yang ditentukan dan panggil toast()metodenya.
Contoh
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Pilihan Roti Bakar
Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the toast.
|
|
| autohide | boolean | true | Specifies whether to hide the toast by default | |
| delay | number | 500 | Specifies the number of milliseconds it will take to hide the toast once it is shown. |
Metode roti panggang
Tabel berikut mencantumkan semua metode roti panggang yang tersedia.
| Method | Description | Try it |
|---|---|---|
| .toast(options) | Activates the toast with an option. See options above for valid values | |
| .toast("show") | Shows the toast | |
| .toast("hide") | Hides the toast | |
| .toast("dispose") | Hides and destroys the toast |
Acara bersulang
Tabel berikut mencantumkan semua acara roti panggang yang tersedia.
| Event | Description | Try it |
|---|---|---|
| show.bs.toast | Occurs when the toast is about to be shown | |
| shown.bs.toast | Occurs when the toast is fully shown (after CSS transitions have completed) | |
| hide.bs.toast | Occurs when the toast is about to be hidden | |
| hidden.bs.toast | Occurs when the toast is fully hidden (after CSS transitions have completed) |