This package provides assistance when using toast notifications. Using the iziTOAST package, which allows us to launch elegant and responsive notifications, having the facility to apply a number of configurations that you will find available on their official site .
Run this command line in console.
composer require tonystore/livewire-notificationAdd the iziTOAST CDN styles and script, and the component containing the script to launch the notifications.
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/iziToast.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
@livewireScripts
...
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/iziToast.min.js">
</script>
...
//INSERT COMPONENT
<x-livewire-notification::toast />
//OR
@component('livewire-notification::components.toast') @endcomponent
</body> php artisan vendor:publish --provider="Tonystore\LivewireNotification\LivewireNotificationProvider" --tag="config"//config/livewire-notification
return [
'toast' => [
'title' => '', //Defaut Title
'position' => 'topRight', //Defaut Position
'timeout' => 3000, //Display Time
'modal' => null, //Very important, it defines if an event is triggered to close a Bootstrap modal.
],Now, in any Livewire component, you can launch notifications. To launch a notification you can choose between the different types available:
- success
- info
- error
- warning
Launch a simple notification with a personalized message.
$this->alert(
'success',
'Example of notification.',
);
Example of notification with modal event.
$this->alert('info','Example of notification with modal event', [
'modal' => '#hideModal'
]
);To use more configurations, you can check the documentation on their official site .