Bootstrap JS Toasts
Roosterbrood CSS-klasse
Die Toast-komponent is soos 'n waarskuwingskassie wat net vir 'n paar sekondes gewys word wanneer iets gebeur (dws wanneer die gebruiker op 'n knoppie klik, 'n vorm indien, ens.).
Vir 'n handleiding oor Toasts, lees ons Bootstrap Toast Tutoriaal .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Aktiveer via JavaScript
Toasts moet geïnisialiseer word met jQuery: kies die gespesifiseerde element en roep die toast()metode.
Voorbeeld
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Roosterbrood Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in 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. |
Roosterbroodmetodes
Die volgende tabel lys alle beskikbare roosterbroodmetodes.
| 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 |
Toast Events
Die volgende tabel lys alle beskikbare roosterbrood-geleenthede.
| 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) |