Download the PHP package loubal70/livewire-wizard without Composer
On this page you can find all versions of the php package loubal70/livewire-wizard. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download loubal70/livewire-wizard
More information about loubal70/livewire-wizard
Files in loubal70/livewire-wizard
Package livewire-wizard
Short Description Laravel Livewire Wizard (Multi-Step Form) component
License MIT
Homepage https://github.com/loubal70/livewire-wizard
Informations about the package livewire-wizard
This package is a fork of vildanbina/livewire-wizard
A dynamic Laravel Livewire component for multi steps form.
Installation
You can install the package via composer:
For UI design this package require WireUI package for details.
Alpine
Livewire Wizard requires Alpine. You can use the official CDN to quickly include Alpine:
TailwindCSS
The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.
Usage
Creating a wizard form
You can create livewire component php artisan make:livewire UserWizard
to make the initial Livewire component. Open your component class and make sure it extends the WizardComponent
class:
When you need to display wizard form, based on above example we need to pass $userId
value and to display wizard form:
Or when you want to create new user, let blank user-id
attribute, or don't put that.
When you want to reset form, ex. To reset to the first step, and clear filled fields. You can use:
When you want to have current step instance. You can use:
When you want to go to specific step. You can use:
Or, you want to go in the next step:
Or, you want to go in the prev step:
Creating a wizard step
You can create wizard form step. Open or create your step class (at App\Steps
folder) and make sure it extends the Step
class:
Note: Remember to use the prefix state.
in the wire:model
attribute in views, for example: wire:model="state.name"
In Step class, you can use livewire hooks example:
Each step need to have view, you can pass view path in $view
property.
After create step class, you need to put that step to wizard form:
Building Tailwind CSS for production
Because some classes are dynamically build and to compile js you should add some classes to the purge safelist so your tailwind.config.js
should look something like this:
If you haven't installed tailwindcss/forms
plugin, install it: npm install -D @tailwindcss/forms
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please e-mail [email protected] to report any security vulnerabilities instead of the issue tracker.
Credits
- Vildan Bina
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of livewire-wizard with dependencies
livewire/livewire Version ^2.0
spatie/laravel-package-tools Version ^1.9