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.
Artículos Relacionados
Descubre más desde CIBERED
Suscríbete y recibe las últimas entradas en tu correo electrónico.
