Bootstrap JS Toasts
Toast CSS třídy
Komponenta Toast je jako varovné pole, které se zobrazí pouze na několik sekund, když se něco stane (tj. když uživatel klikne na tlačítko, odešle formulář atd.).
Chcete-li získat výukový program o toastech, přečtěte si náš výukový program Bootstrap Toast .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Aktivujte přes JavaScript
Toasty musí být inicializovány pomocí jQuery: vyberte zadaný prvek a zavolejte toast()metodu.
Příklad
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Možnosti toastu
Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v 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. |
Toastové metody
V následující tabulce jsou uvedeny všechny dostupné způsoby toastu.
| 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 |
Akce na přípitek
V následující tabulce jsou uvedeny všechny dostupné události přípitku.
| 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) |