Creación de Formularios en Laravel Livewire

Livewire Wizard es un componente de Livewire que facilita la creación de formularios de múltiples pasos, manteniendo el estado entre cada uno.

Utiliza WireUI para el diseño y se apoya en TailwindCSS y Alpine.js para los estilos interactivos.

Uso Rápido

Para empezar a usar este wizard, puedes crear un componente que extienda de WizardComponent:

namespace AppHttpLivewire;

use VildanbinaLivewireWizardWizardComponent;
use AppModelsUser;

class UserWizard extends WizardComponent
{
    public array $steps = [
        General::class,
        // Otros pasos...
    ];

    public $userId;

    public function model()
    {
        return User::findOrNew($this->userId);
    }
}

Propiedades clave

  • $steps: Define los pasos del formulario.
  • model(): Retorna el modelo de la base de datos o un modelo vacío.

Navegación entre pasos

Tienes control total sobre la navegación entre los pasos:

$wizardFormInstance->resetForm();   // Resetear el formulario
$wizardFormInstance->getCurrentStep();  // Obtener el paso actual
$wizardFormInstance->setStep($step);  // Ir a un paso específico
$wizardFormInstance->goToNextStep();  // Ir al siguiente paso
$wizardFormInstance->goToPrevStep();  // Volver al paso anterior

Ejemplo en Blade

Para renderizar el wizard de usuario, solo necesitas esta línea en tu Blade:

<livewire:user-wizard user-id="3"/>

Más información

Para obtener más detalles sobre cómo configurarlo y los hooks disponibles, visita el repositorio en GitHub.


Descubre más desde CIBERED

Suscríbete y recibe las últimas entradas en tu correo electrónico.

Deja un comentario