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

permalink, title, description, handler, data-controller

permalink	title	description	handler	data-controller
/library/notyf/	Notyf	Add lightweight, customizable notification messages to your web projects with Notyf, a popular JavaScript library. With a focus on simplicity and accessibility, Notyf is easy to install and use, making it a great choice for any project that wants to engage and inform users.	notyf	notyf

Laravel

Installation

composer require php-flasher/flasher-notyf-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' => [
        'notyf' => [
            'scripts' => [
                '/vendor/flasher/flasher-notyf.min.js',
            ],
            'styles' => [
                '/vendor/flasher/flasher-notyf.min.css',
            ],
            'options' => [
                // Optional: Add global options here
                'dismissible' => true,
            ],
        ],
    ],
];

Symfony

Installation

composer require php-flasher/flasher-notyf-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:
        notyf:
            scripts:
                - '/vendor/flasher/flasher-notyf.min.js'
            styles:
                - '/vendor/flasher/flasher-notyf.min.css'
            options:
            # Optional: Add global options here
                dismissible: 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 notyf() helper method or obtain an instance of notyf 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\Notyf\Prime\NotyfInterface;

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

        $notyf->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 }}

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

warning

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

{{ id }}

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

error

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

{{ id }}

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

---

For more information on Notyf options and usage, please refer to the original documentation at https://github.com/caroso1222/notyf

---

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

---

position

Viewport location where notifications are rendered

position x ⇒ left, center, right
position y ⇒ top, center, bottom

Default ⇒ x: right, y: bottom

notyf()->position(string $position, string $value);

{% assign id = '#/ notyf position' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"position": {"x": "center", "y":"top"}}' %} {% include example.html %}

{{ id }}

notyf()
    ->position('x', 'center')
    ->position('y', 'top')
    ->{{ type }}('{{ message }}');

---

duration

Number of milliseconds before hiding the notification. Use 0 for infinite duration.

notyf()->duration(int $duration);

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

{{ id }}

notyf()
    ->duration(2000) // 2 seconds
    ->{{ type }}('{{ message }}');

---

ripple

Whether to show the notification with a ripple effect

Default ⇒ true

notyf()->ripple(bool $ripple);

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

{{ id }}

notyf()
    ->ripple(true)
    ->{{ type }}('{{ message }}');

{% assign id = '#/ notyf ripple false' %} {% assign options = '{"ripple": false}' %} {% include example.html %}

{{ id }}

notyf()
    ->ripple(false)
    ->{{ type }}('{{ message }}');

---

dismissible

Whether to allow users to dismiss the notification with a button

Default ⇒ false

notyf()->dismissible(bool $dismissible);

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

{{ id }}

notyf()
    ->dismissible(true)
    ->{{ type }}('{{ message }}');