Notification trait

You don't have to do anything!

This package includes a Livewire notification trait that you can use in anywhere in your project. (Without making a form). By default the form component shows a Saved! message next to the Save and stay button on the form save() method. The following instructions are for extended use in the rest of your project. (Please observe that you can only use the notification trait from within a Livewire component.)

If you want to show notification popups in your project:

If you also want to show a notification when a form is saved OR if you want to show notifications anywhere in your project you have to add the included Laravel 7 blade component to your layout file and call the notify() method in a livewire component. You can also call this method in AlpineJS.

Add this to your main blade layout file.

<x-tall-notification />

Add this to any Livewire component.

Don't add this to a form component (Already applied)

use Tanthammar\TallForms\Traits\Notify;

//call this in any Livewire component method
$this->notify($type, $message, $icon, $iconcolor);

// Via browser event
$this->notify('success', 'Record updated');

// To session
$this->withSession()->notify('success', 'Record updated');

$message string

$color Notification background colors

Background colors are defined in config file. Also see Tailwind setup

Available options:

• positive
• negative
• info
• warning
• null Omitting the property uses the default color from the config file.

Theme

    /* Notification */
    .tf-notify-bg-default {
        @apply bg-teal-400;
    }

AlpineJS

You can use this trait in both php or in frontend js. You can either set a LiveWire property that calls the notify method or you can call the notify method directly.

First add the trait to a livewire component.

Don't add this to a form component (Already applied)

use Tanthammar\TallForms\Traits\Notify;

Example js to update the property

@this.set('alert', {
    type: 'negative',
    message: "Your notification message"
});

Example js to call the notify method directly

@this.call('notify', 'negative', 'Oh No!');