php-flasher/docs/pages/library/toastr.md

permalink, title, description, handler, data-controller

permalink	title	description	handler	data-controller
/library/toastr/	Toastr	Easily add customizable, stylish notification messages to your web projects with Toastr, a popular JavaScript library. With a focus on simplicity and flexibility, Toastr is easy to install and use, making it a great choice for any project that wants to engage and inform users.	toastr	toastr

Laravel

Installation

composer require php-flasher/flasher-toastr-laravel

After installation, you need to run another command to set up the necessary assets for PHPFlasher:

php artisan flasher:install

Configuration

<?php // config/flasher.php

return [
    'plugins' => [
        'toastr' => [
            'scripts' => [
                '/vendor/flasher/jquery.min.js',
                '/vendor/flasher/toastr.min.js',
                '/vendor/flasher/flasher-toastr.min.js',
            ],
            'styles' => [
                '/vendor/flasher/toastr.min.css',
            ],
            'options' => [
                // Optional: Add global options here
                'closeButton' => true
            ],
        ],
    ],
];

Symfony

Installation

composer require php-flasher/flasher-toastr-symfony

After installation, you need to run another command to set up the necessary assets for PHPFlasher:

php bin/console flasher:install

Configuration

# config/packages/flasher.yaml

flasher:
    plugins:
        noty:
            scripts:
                - '/vendor/flasher/jquery.min.js'
                - '/vendor/flasher/toastr.min.js'
                - '/vendor/flasher/flasher-toastr.min.js'
            styles:
                - '/vendor/flasher/toastr.min.css'
            options:
            # Optional: Add global options here
                closeButton: true

---

Usage

---

The methods described in the Usage section can also be used with the notyf adapter.

---

To display a notification message, you can either use the toastr() helper method or obtain an instance of toastr from the service container. Then, before returning a view or redirecting, call the success() method and pass in the desired message to be displayed.

success

{% assign id = '#/ noty' %} {% assign type = 'success' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

use Flasher\Toastr\Prime\ToastrInterface;

class BookController
{
    public function saveBook()
    {        
        toastr()->success('{{ message }}');
        
        // or simply 
        
        toastr('{{ message }}');
    }
    
    /**
     * if you prefer to use dependency injection 
     */
    public function register(ToastrInterface $toastr)
    {
        // ...

        $toastr->success('{{ site.data.messages["success"] | sample }}');

        // ... redirect or render the view
    }
}

info

{% assign id = '#/ usage info' %} {% assign type = 'info' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

toastr()->{{ type }}('{{ message }}');

warning

{% assign id = '#/ usage warning' %} {% assign type = 'warning' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

toastr()->{{ type }}('{{ message }}');

error

{% assign id = '#/ usage error' %} {% assign type = 'error' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

toastr()->{{ type }}('{{ message }}');

---

For more information on Toastr options and usage, please refer to the original documentation at https://github.com/CodeSeven/toastr

---

The methods described in the Usage section can also be used with the notyf adapter.

---

persistent

Prevent from Auto Hiding.

toastr()->persistent();

{% assign id = '#/ toastr persistent' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"timeOut": 0, "extendedTimeOut": 0, "closeButton": true}' %} {% include example.html %}

{{ id }}

toastr()
    ->persistent()
    ->closeButton()
    ->{{ type }}('{{ message }}');

---

closeButton

When set to true, a close button is displayed in the toast notification.

toastr()->closeButton(bool $closeButton = true);

{% assign id = '#/ toastr closeButton' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"closeButton": true}' %} {% include example.html %}

{{ id }}

toastr()
    ->closeButton(true)
    ->{{ type }}('{{ message }}');

---

closeHtml

The HTML content of the close button.

Default ⇒ <button type="button">&times;</button>

toastr()->closeHtml(string $closeHtml);

{% assign id = '#/ toastr closeHtml' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"closeButton": true, "closeHtml":"⛑"}' %} {% include example.html %}

{{ id }}

toastr()
    ->closeButton(true)
    ->closeHtml('⛑')
    ->{{ type }}('{{ message }}');

---

closeOnHover

When set to true, the toast will close when the user hovers over it.

Default ⇒ false

toastr()->closeOnHover(bool $closeOnHover = true);

{% assign id = '#/ toastr closeOnHover' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"closeOnHover": true, "closeDuration": 10}' %} {% include example.html %}

{{ id }}

toastr()
    ->closeOnHover(true)
    ->closeDuration(10)
    ->{{ type }}('{{ message }}');

---

escapeHtml

When set to true, HTML in the toast message will be escaped.

Default ⇒ false

toastr()->escapeHtml(bool $escapeHtml = true);

{% assign id = '#/ toastr escapeHtml false' %} {% assign type = 'error' %} {% assign message = 'We’re sorry, but an error occurred.' %} {% assign options = '{"escapeHtml": false}' %} {% include example.html %}

{{ id }}

toastr()
    ->escapeHtml(false)
    ->{{ type }}('{{ message }}');

{% assign id = '#/ toastr escapeHtml true' %} {% assign options = '{"escapeHtml": true}' %} {% include example.html %}

{{ id }}

toastr()
    ->escapeHtml(true)
    ->{{ type }}('{{ message }}');

---

newestOnTop

When set to true, new toast notifications are displayed above older ones.

Default ⇒ true

toastr()->newestOnTop(bool $newestOnTop = true);

{% assign id = '#/ toastr newestOnTop' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"newestOnTop": true}' %} {% include example.html %}

{{ id }}

toastr()
    ->newestOnTop(true)
    ->{{ type }}('{{ message }}');

---

positionClass

The class applied to the toast container that determines the position of the toast on the screen (e.g. toast-top-right, toast-bottom-left).

Default ⇒ toast-top-right

toastr()->positionClass(string $positionClass);

{% assign id = '#/ toastr positionClass' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"positionClass": "toast-top-center"}' %} {% include example.html %}

{{ id }}

toastr()
    ->positionClass('toast-top-center')
    ->{{ type }}('{{ message }}');

---

preventDuplicates

When set to true, prevents the display of multiple toast notifications with the same message.

Default ⇒ false

toastr()->preventDuplicates(bool $preventDuplicates = true);

{% assign id = '#/ toastr preventDuplicates' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"preventDuplicates": true}' %} {% include example.html %}

{{ id }}

toastr()
    ->preventDuplicates(true)
    ->{{ type }}('{{ message }}');

---

progressBar

When set to true, displays a progress bar in the toast.

Default ⇒ true

toastr()->progressBar(bool $progressBar = true);

{% assign id = '#/ toastr progressBar' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"progressBar": false}' %} {% include example.html %}

{{ id }}

toastr()
    ->progressBar(false)
    ->{{ type }}('{{ message }}');

---

rtl

When set to true, displays the toast notifications in right-to-left mode.

Default ⇒ false

toastr()->rtl(bool $rtl = true);

{% assign id = '#/ toastr rtl' %} {% assign type = 'info' %} {% assign message = 'تم قفل حسابك وتم إرسال رسالة تأكيد إلكترونية.' %} {% assign options = '{"rtl": true}' %} {% include example.html %}

{{ id }}

toastr()
    ->rtl(true)
    ->{{ type }}('{{ message }}');

---

tapToDismiss

When set to true, the toast can be dismissed by tapping on it.

toastr()->tapToDismiss(bool $tapToDismiss = true);

{% assign id = '#/ toastr tapToDismiss' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"tapToDismiss": true}' %} {% include example.html %}

{{ id }}

toastr()
    ->tapToDismiss(true)
    ->{{ type }}('{{ message }}');

---

target

The element that should contain the toast notifications.

Default ⇒ body

toastr()->target(string $target);

{% assign id = '#/ toastr target' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"target": "body"}' %} {% include example.html %}

{{ id }}

toastr()
    ->target('body')
    ->{{ type }}('{{ message }}');

---

timeOut

The time in milliseconds to keep the toast visible before it is automatically closed.
Set timeOut and extendedTimeOut to 0 to make it sticky

Default ⇒ 5000 milliseconds

toastr()->timeOut(int $timeOut, bool $extendedTimeOut = null);

{% assign id = '#/ toastr timeOut' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"timeOut": 1000}' %} {% include example.html %}

{{ id }}

toastr()
    ->timeOut(1000) // 1 second
    ->{{ type }}('{{ message }}');