Toast se usa para crear algo como un cuadro de alerta que se muestra durante un breve período de tiempo, como un par de segundos, cuando sucede algo. Como cuando el usuario hace clic en un botón o envía un formulario y muchas otras acciones.
- .toast: Ayuda a crear un brindis
- .toast-header : Ayuda a crear el encabezado del brindis
- .toast-body : Ayuda a crear cuerpo tostado
Métodos de tostadas:
- .toast(opciones): Ayuda a activar el brindis con un parámetro de opción. En la siguiente implementación, eliminamos el efecto de transición de desvanecimiento del brindis y retrasamos la ocultación del brindis a 8000 milisegundos cuando se muestra. Tiene tres opciones de animación, ocultar automáticamente, retrasar. Consulte este enlace para obtener más información sobre estas opciones.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align: center">
<h1 style="color:green">GeeksforGeeks</h1>
<div class="container mt-3">
<h3>.toast(options)</h3>
<p>
When we click the button below there
would be delay of the toast to 8000
milliseconds.
</p>
<button type="button" class="btn btn-primary"
id="myBtn">Show Toast</button>
<div class="toast mt-3">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#myBtn').click(function () {
$('.toast').toast({
animation: false,
delay: 2000
});
$('.toast').toast('show');
});
});
</script>
</body>
</html>
- Producción:
- .toast(“show”): Muestra el brindis
- .toast(“hide”): Oculta el brindis
- .toast(“dispose”): Elimina la tostada
Eventos Brindis:
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<div class="container mt-3">
<h3>Toast Events</h3>
<strong>show.bs.toast, </strong>
<strong>shown.bs.toast, </strong>
<strong>hide.bs.toast, </strong>
<strong>hidden.bs.toast </strong>
<p>Click on the button below to perform toast.</p>
<button type="button" class="btn btn-primary"
id="myShowBtn">
Show Toast
</button>
<div class="toast mt-3">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#myShowBtn").click(function () {
$('.toast').toast('show');
});
$('.toast').on('show.bs.toast', function () {
alert('The toast is about to be shown.');
});
$('.toast').on('shown.bs.toast', function () {
alert('The toast is now fully shown.');
});
$('.toast').on('hide.bs.toast', function () {
alert('The toast is about to be hidden.');
});
$('.toast').on('hidden.bs.toast', function () {
alert('The toast is now hidden.');
});
});
</script>
</body>
</html>
Producción:
show.bs.toast : Ocurre cuando el brindis está a punto de mostrarse.
showed.bs.toast : Ocurre cuando se muestra el brindis.
hide.bs.toast : Ocurre cuando el brindis está a punto de ocultarse.
hidden.bs.toast: ocurre cuando el brindis está completamente oculto.
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari