Notifications

If you want to show notification popups

Add this to your main layout file. Near the closing </body> tag, for z-index reasons.

<x-tall-notification />

Usage

In a TallFormComponent

(Already included). Form submit success, and error messages will be automatically displayed. You don't have to add anything to your TallFormComponent markup, just add the blade component to your main layout file and the rest is magic :)

In a Livewire component or Headless forms

Add the Trait

use Livewire\Component;
use Tanthammar\TallForms\Traits\Notify;

class Foo extends Component
{
    use Notify;
}

Dispatch notifications

// Via browser event
$this->notify('success', 'Record updated');
$this->notify('The form was saved successfully')

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

Color options, $type

//parameters
$this->notify($type, $message, $icon, $iconcolor);

//$type => [ $color, $icon, $iconcolor ]
'success', 'green', 'saved', 'check' => ['tf-bg-success', 'check', $iconcolor],
'warning', 'orange',                 => ['tf-bg-warning', 'exclamation', $iconcolor],
'happy', 'positive'                  => ['bg-white', 'happy', 'text-green-600'],
'sad', 'negative'                    => ['bg-white', 'sad', 'text-red-600'],
'danger', 'red'                      => ['tf-bg-danger', 'warning', $iconcolor],
'info', 'blue'                       => ['tf-bg-info', 'info', $iconcolor],

//Example
$this->notify('warning', 'Server error, nothing saved');

Omitting the $type property uses the default color from the config file.

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

Show validation errors

The notifications are show on the second click of the submit button. On the first click, error messages below each field will be shown.

Validation errors are automatically displayed in a standard form component.

If you want to show notification errors in other Livewire components add this to your submit button. For more info about the "tfjs" alias. See the config file.

<form x-data wire:submit.prevent="saveAndStay">

    <button 
        type="submit" 
        x-on:click="$dispatch( 'replace-errors', {{ tfjs::from($errors->all()) }} )">
        Submit
    </button>

</form>

Icons

The notification type selects the icon. To change the design, See Icons page.