Bootstrap JS Toast
Toast CSS-klassen
De Toast-component is als een waarschuwingsvenster dat slechts een paar seconden wordt weergegeven als er iets gebeurt (dwz wanneer de gebruiker op een knop klikt, een formulier indient, enz.).
Voor een tutorial over Toasts, lees onze Bootstrap Toast Tutorial .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Activeren via JavaScript
Toasts moeten worden geïnitialiseerd met jQuery: selecteer het opgegeven element en roep de toast()methode aan.
Voorbeeld
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Toast-opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals 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. |
Toastmethoden
De volgende tabel bevat alle beschikbare toastmethoden.
| 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-evenementen
De volgende tabel bevat alle beschikbare toastgebeurtenissen.
| 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) |