PHPackages larawire-garage/larawire-modals - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. larawire-garage/larawire-modals ActiveLibrary[Utility & Helpers](/categories/utility) larawire-garage/larawire-modals =============================== Modal window with Livewire v0.1.3(1y ago)143MITPHP Since Jul 30Pushed 1y ago1 watchersCompare [ Source](https://github.com/LarawireGarage/larawire-modals)[ Packagist](https://packagist.org/packages/larawire-garage/larawire-modals)[ RSS](/packages/larawire-garage-larawire-modals/feed)WikiDiscussions master Synced 3w ago READMEChangelog (10)DependenciesVersions (12)Used By (0) Modal Dialogs with Livewire 3 ============================= [](#modal-dialogs-with-livewire-3) 👉 For Backend Coding Enjoyers 😉 Create modal dialog easily with laravel project with livewire 3 + Alpinejs & manage modal dialog as livewire component. > Still on beta version - [Installation](#installation) - [Setup](#setup) - [Publish Configurations](#publish-configurations) - [Themes](#themes) - [Bootstrap Installation](#bootstrap-installation) - [Tailwind Installation](#tailwind-installation) - [Change Theme](#change-theme) - [Usage](#usage) - [Create Modal](#usage) - [Show Modal](#to-show-the-modal-dialog) - [Hide Modal](#to-close-the-modal-dialog) - [Options](#options) - [Available Options](#available-options) - [Methods](#methods) - [Add Form](#add-form) - [Customizaion](#customizaion) - [Animation](#animation) - [Not Working ?](#not-working-correctly) Installation ============ [](#installation) ``` composer require larawire-garage/larawire-modals ``` Setup ===== [](#setup) #### publish configurations [](#publish-configurations) ``` php artisan vendor:publish --tag=larawire-modals-configs ``` Themes ------ [](#themes) Currently supports 2 themes. - Bootstrap - Tailwind ### Bootstrap Installation [](#bootstrap-installation) You can use CDN Link to apply bootstrap. If you are using package managers like `npm` use [Bootstrap Documentation](https://getbootstrap.com/docs/5.3/getting-started/download/#npm) to install. When [Importing Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/vite/#import-bootstrap) add below code to `app.js` file. ``` // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap' window.bootstrap = bootstrap; // 👈 required ``` ### Tailwind Installation [](#tailwind-installation) You can use CDN Link to apply Tailwindcss. If you are using package managers like `npm` use [Tailwindcss Documentation](https://tailwindcss.com/docs/installation) to install. Then Add below code to `tailwind.config.js` file. ``` /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", "./vendor/larawire-garage/larawire-modals/**/*.blade.php", // 👈 Add this line ], //... } ``` If not working correctly? [Check Here](#not-working-correctly) ### Change Theme [](#change-theme) You can add theme your proejct used in `larawire-modals` config file. ``` // configs/larawire-modals.php return [ 'theme' => 'bootstrap', // OR 'theme' => 'tailwind', // .... ]; ``` Also you can change theme in your modal variable inside the modal component. ``` // app/Livewire/MODAL_PATH/MYMODAL.php class MYMODAL extends ModalComponent{ public array $modal = [ 'theme' => 'bootstrap', // OR 'theme' => 'tailwind', //... ]; } ``` Usage ===== [](#usage) create modal component using below command. ``` php artisan make:modal MyModal ``` Now you can use modal component like regular livewire component. By default this command create component: - `Class` : app/Livewire/Modals - `View` : resources/views/livewire/modals directories. You can change it in the `larawire-modals` config file. ``` // configs/larawire-modals.php return [ 'class_namespace' => 'App\\Livewire\\Modals', 'view_path' => resource_path('views/livewire/modals'), // .... ]; ``` > ModalComponent is a regular Livewire component. You can do everything normal Livewire component can do. > > - Fire or listen events with parameters > - Parse parameters to component > - Call functions etc... > > --- > By Default ModalComponent listen 2 events > > - **show** \[parameters parse to beforeShow function\] > - hook : **beforeShow(...$args)** > - **close** \[parameters not supported yet\] > - hook : **beforeClose()** > > --- ### To show the modal dialog [](#to-show-the-modal-dialog) dispatch `show` event to "your-modal-component". ``` $this->dispatch('show',id:$post->id)->to(MyModal::class); ``` ``` Show Modal ``` ### To close the modal dialog [](#to-close-the-modal-dialog) - From other component: ``` $this->dispatch('close')->to(MyModal::class); ``` ``` Close Modal ``` - From modal component: ``` $this->dispatch('close')->self(); //or $this->closeModal(); ``` Options ------- [](#options) Modal component has `$modal` public variable containing modal options. ``` public array $modal = [ 'id' => 'my-modal', 'title' => 'My Modal', //... ]; ``` ### Available Options [](#available-options) - `id` - Modal ID - `title` - Modal title text on the header - `theme` - Theme using in the project (bootstrap or tailwind). Can be defind in the larawire-modals config file - `resetBeforeShow` - if this is true, public variables in the modal component automatically reset before show the modal. Can be defind in the larawire-modals config file - `resetValidationBeforeShow` - if this is true, Reset the validation error bag of modal component automatically before show the modal. Can be defind in the larawire-modals config file Methods ------- [](#methods) - `showModal()` - Show the modal dialog - `closeModal()` - Close the modal dialog You can define: - `beforeShow()` - Runs before show the modal dialog - `beforeClose()` - Runs before close the modal dialog Add Form -------- [](#add-form) If your modal contains form, add formSubmit attribute to modal component. When `formSubmit` attribute defined, modal `body` and `footer` slots automatically covered by form tag with `wire:submit="[form-submit-value]"` attribute. ``` Create Creating... ``` Customizaion ============ [](#customizaion) In the larawire-modals config file you can change classes of the containers of the modal. Also can change in the modal variable of the modal component. ``` // configs/larawire-modals.php return [ // ... 'theme-classes' => [ 'bootstrap' => [ 'backdropClasses' => '', 'containerClasses' => '', 'windowClasses' => '', 'headerClasses' => '', 'headerCloseBtnClasses' => '', 'bodyClasses' => '', 'footerClasses' => '', 'footerCloseBtnClasses' => '', ], 'tailwind' => [ 'backdropClasses' => '', 'containerClasses' => '', 'windowClasses' => '', 'headerClasses' => '', 'headerCloseBtnClasses' => '', 'bodyClasses' => '', 'footerClasses' => '', 'footerCloseBtnClasses' => '', ], ], ]; ``` ``` // app/Livewire/MODAL_PATH/MYMODAL.php class MYMODAL extends ModalComponent{ public array $modal = [ /** available if needs to customize */ 'backdropClasses' => '', 'containerClasses' => '', 'windowClasses' => '', 'headerClasses' => '', 'headerCloseBtnClasses' => '', 'bodyClasses' => '', 'footerClasses' => '', 'footerCloseBtnClasses' => '', //... ]; } ``` Changing classes still not working for you ? To customize appearance of the modal, you can publish the views and edit it. ``` php artisan vendor:publish --tag=larawire-modals-views ``` Animation ========= [](#animation) Also you can change animation of the modal. `Bootstrap Theme` : In bootstrap, follow bootstrap documentation to change the modal animation. `Tailwind Theme` : In tailwind theme under `animation` key in them larawire-modals config file. Also you can change it in the modal variable in the modal component. ``` // app/Livewire/MODAL_PATH/MYMODAL.php class MYMODAL extends ModalComponent{ public array $modal = [ /** Only for tailwind */ 'animation' => 'slide-down', //