This package is adapted from laracasts/flash by Jeffrey Way.
Display alerts in a fancy way. Toasts are a great way of informing users of a server side action.
Begin by pulling in the package through Composer.
composer require queued/toastsThis package is made for Bootstrap 4.2 and higher, be sure to include the css and js files on your page.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>Put the necessary script call somewhere in your project. Either in your Blade file, or in your scripts file
$('.toast').toast('show');Make sure you include the view in your Blade Template
@include('toast::message')Then, within your controllers, before you perform a redirect, make a call to the toast() function.
// example function in your controller
public function create()
{
toast('Your post was created!');
return back();
}The toast method accepts the title and level optional arguments :
/*
* Level can be one of the following:
* 'success'
* 'error'
* 'warning'
* 'info'
*/
toast('message', 'level', 'title');There are a few quick methods to modify the toast:
toast('Message')->success(): Set the toast theme to "success".toast('Message')->normal(): A normal toast. (default)toast('Message')->error(): Set the toast theme to "danger".toast('Message')->warning(): Set the toast theme to "warning".toast('Message')->info(): Set the toast theme to "info".toast('Message')->dark(): Set the toast theme to "dark".toast('Message')->primary(): Set the toast theme to "primary".toast('Message')->important(): Add a close button to the toast.toast('Message')->title('Toast title'): Set the toast title.toast('Message')->time('just now'): Set the toast time in the right side of the headertoast('Message')->error()->important(): Render a "danger" toast message that must be dismissed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@include('toast::message')
<p>Welcome to my website...</p>
</div>
<!-- exactly in this order -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer>
$('.toast').toast('show');
</script>
</body>
</html>toast('Welcome Aboard!');
return home();toast('Sorry! Please try again.')->error();
return home();toast()->overlay('You are now a Laracasts member!', 'Yay');
return home();Need to flash multiple toasts to the session? No problem.
toast('Message 1');
toast('Message 2')->important();
return redirect('somewhere');You can publish this package to change some configuration defaults and the views.
php artisan vendor:publish --provider="Queued\Toasts\ToastServiceProvider"The package view will now be located in the resources/views/vendor/toast/ directory, and the config will be in config/toasts.php.