README

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.

Installation

Begin by pulling in the package through Composer.

composer require queued/toasts

This 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>

Usage

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 header
toast('Message')->error()->important(): Render a "danger" toast message that must be dismissed.

Example

<!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();

Multiple Toasts

Need to flash multiple toasts to the session? No problem.

toast('Message 1');
toast('Message 2')->important();

return redirect('somewhere');

Configuration & personalization

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.

queued / toasts

Maintainers

Details