Bootstrap JS Tosty
Toastowe klasy CSS
Komponent Toast jest jak okienko ostrzegawcze, które jest wyświetlane tylko przez kilka sekund, gdy coś się wydarzy (np. gdy użytkownik kliknie przycisk, prześle formularz itp.).
Aby zapoznać się z samouczkiem dotyczącym tostów, przeczytaj nasz samouczek Bootstrap Toast .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Aktywuj przez JavaScript
Tosty należy inicjować za pomocą jQuery: wybierz określony element i wywołaj toast()metodę.
Przykład
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Opcje tostów
Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w 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. |
Metody tostowe
W poniższej tabeli wymieniono wszystkie dostępne metody tostowania.
| 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 |
Wydarzenia tostowe
W poniższej tabeli wymieniono wszystkie dostępne wydarzenia toastowe.
| 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) |