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

Installation

Laravel:

composer require php-flasher/flasher-notyf-laravel

Then, run:

php artisan flasher:install

Symfony:

composer require php-flasher/flasher-notyf-symfony

Then, run:

php bin/console flasher:install

---

Usage

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

{{ id }}

namespace App\Controller;

class AppController
{
    public function save()
    {        
        notyf()->{{ type }}('{{ message }}');
    }
} 

---

Modifiers

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