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 notifications to your web projects with Notyf. This guide shows you how to integrate Notyf with PHPFlasher to engage and inform your users effectively.	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

Note: The configuration settings below are the default ones. You only need to change them if you want to customize the default behavior.

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

Note: The configuration settings below are the default ones. You only need to change them if you want to customize the default behavior.

# 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 }}');