Dialog
Dialog component.
Dialog, Personalization Blocks
This content is part of TallStackUI personalization.
Example:
TallStackUi::personalize() ->dialog() ->block('block', 'classes');
The soft personalization should be done in boot
method of service providers.
<html> <body> <x-dialog /> <!--... --> </body></html>
use TallStackUi\Traits\Interactions; class CreateUser extends Component{ use Interactions; // ...}
public function save(): void{ $this->dialog()->success('...')->send(); $this->dialog()->error('...')->send(); $this->dialog()->warning('...')->send(); $this->dialog()->info('...')->send();}
This is an example. You can't dispatch all at the same time.
Interacting with actions.
Starting from version 1.10.0, the Dialog has been improved to allow more flexibility in the format of use:
public function save(): void{ // 1. The methods `confirm()` and `cancel()` are optional. $this->dialog() ->question('Warning!', 'Are you sure?') ->send(); // 2. You can set only `confirm()` or `cancel()`. // If you set only one, the other will be set as default. $this->dialog() ->question('Warning!', 'Are you sure?') ->confirm('Confirm', 'confirmed', 'Confirmed Successfully') ->send(); // 3. You can make `confirm()` and `cancel()` // as static buttons just by defining the text. $this->dialog() ->question('Warning!', 'Are you sure?') ->confirm('Confirm') ->cancel('Cancel') ->send(); // 4. You can set only the method and parameters // to use the original text in the buttons. $this->dialog() ->question('Warning!', 'Are you sure?') ->confirm(method: 'confirmed', params: 'Confirmed Successfully') ->cancel(method: 'cancelled', params: 'Cancelled Successfully') ->send(); // 5. You can ask for a confirmation with other Dialog types $this->dialog() ->success('Success!', 'Process completed successfully.') ->confirm('Undo', 'undo') ->cancel('Ok') ->send();}
An option to listen to events.
We recommend that you use listeners in one place, whether in the base layout or once per component.
# Hooks NEW
Starting from version 1.35.0 you can now use hooks to perform actions:
public function save(): void{ $this->dialog() ->success('...') ->hooks([ // When using `success()`, `error()`, `warning()`, `info()` and pressing the OK button. 'ok' => [ 'method' => 'method', // The parameters can be anything you want: arrays, strings, int. 'params' => ['param1', 'param2'] ], // When close the dialog by clicking on the "x" button. 'close' => [ 'method' => 'method', 'params' => ['param1', 'param2'] ], // When close the dialog by dismiss (clicking out of the dialog). 'dismiss' => [ 'method' => 'method', 'params' => ['param1', 'param2'] ], ]) ->send();}
Optionally, you can also set params
as closure:
public function save(): void{ $this->dialog() ->success('...') ->hooks([ 'ok' => [ 'method' => 'method', 'params' => fn () => ['param1', 'param2'] ], 'dismiss' => [ 'method' => 'method', 'params' => function () { return ['param1', 'param2']; } ], ]) ->send();}
The closure will be resolved using Laravel container and the result will be passed to the hook.
JavaScript API to interact with Dialog.
<div> <x-button color="green" onclick="show()">Success</x-button> <x-button color="red" onclick="error()">Error</x-button> <x-button color="yellow" onclick="warning()">Warning</x-button> <x-button color="info" onclick="info()">Info</x-button> <x-button color="secondary" onclick="confirm()">Confirmation</x-button> <script> show = () => $interaction('dialog') .success('Success', 'This is a success message.') .send(); error = () => $interaction('dialog') .error('Success', 'This is a error message.') .send(); warning = () => $interaction('dialog') .warning('Success', 'This is a warning message.') .send(); info = () => $interaction('dialog') .info('Success', 'This is a info message.') .send(); // To use confirmations the use and interact with methods of // a Livewire component, it is necessary to pass the id of // the component where the method is defined. You need to // do this by interacting with the `wireable()` method. const component = Livewire.find('your-component-id-goes-here').id; confirm = () => $interaction('dialog') .wireable(component) .question('Warning', 'Are you sure?') .confirm('Confirm', 'confirmed', 'Confirmed Successfully') .cancel('Cancel', 'cancelled', 'Cancelled Successfully') .send(); // Alternatively, you can pass the component id as an // empty string to use the FIRST LIVEWIRE COMPONENT OF THE PAGE. confirm = () => $interaction('dialog') .wireable() .question('Warning', 'Are you sure?') .confirm('Confirm', 'confirmed', 'Confirmed Successfully') .cancel('Cancel', 'cancelled', 'Cancelled Successfully') .send(); </script></div>
The dialog hooks are unavailable in the JavaScript API.
Starting from version 1.5.3 you can customize Dialog colors through deep personalization.
Starting from version 1.23.0 you can trigger a dialog that will actually be displayed after a redirect action. Regardless of whether the redirection is to another Livewire component or to basic controllers, you can still display the dialog.
use Illuminate\Contracts\View\View;use Livewire\Component;use TallStackUi\Traits\Interactions; class Payment extends Component{ use Interactions; public function render(): View { return view('livewire.livewire'); } public function save() { $this->dialog() ->success('Done!', 'Your money has been sent!') ->flash() ->send(); return $this->redirect(route('dashboard')); }}
When using flash()
method, the dialog will not be displayed in the current
request, but yes stored temporarily in the session and displayed in the next request.
Starting from version 1.35.0 you can trigger a dialog via controllers.
use Illuminate\Http\Request;use TallStackUi\Traits\Interactions; class PaymentController extends Controller{ use Interactions; public function index() { return view('payment.index', [ // ]); } public function update(Request $request) { // ... $this->dialog() ->success('...') ->send(); }}
Because certain methods were created and designed to be used with Livewire components,
methods like confirm
, cancel
and hooks
will be unavailable and will throw exceptions when you try to use them in controllers.