wire:show

La directiva wire:show de Livewire facilita mostrar y ocultar elementos basándose en el resultado de una expresión.

La directiva wire:show es diferente del uso de @if en Blade, ya que cambia la visibilidad de un elemento utilizando CSS (display: none) en lugar de eliminar el elemento del DOM por completo. Esto significa que el elemento permanece en la página pero está oculto, permitiendo transiciones más suaves sin requerir un viaje de ida y vuelta del servidor.

Uso básico

Este es un ejemplo práctico del uso de wire:show para activar y desactivar un modal “Crear Publicacion”:

use Livewire\Component;
use App\Models\Post;

class CrearPublicacion extends Component
{
    public $showModal = false;

    public $content = '';

    public function save()
    {
        Post::create(['content' => $this->content]);

        $this->reset('content');

        $this->showModal = false;
    }
}

<div>
    <button x-on:click="$wire.showModal = true">Nueva Publicación</button>

    <div wire:show="showModal">
        <form wire:submit="save">
            <textarea wire:model="content"></textarea>

            <button type="submit">Guardar Publicación</button>
        </form>
    </div>
</div>

Cuando se pulsa el botón “Guardar Publicación”, aparece el modal sin necesidad de que el servidor realice un viaje de ida y vuelta. Tras guardar correctamente la entrada, el modal se oculta y el formulario se restablece.

Usando transiciones

Puedes combinar wire:show con transiciones Alpine.js para crear animaciones suaves de mostrar/ocultar. Dado que wire:show sólo activa la propiedad CSS display, las directivas x-transition de Alpine funcionan perfectamente con él:

<div>
    <button x-on:click="$wire.showModal = true">Nueva Publicación</button>

    <div wire:show="showModal" x-transition.duration.500ms>
        <form wire:submit="save">
            <textarea wire:model="content"></textarea>
            <button type="submit">Guardar Publicación</button>
        </form>
    </div>
</div>

Las clases de transición Alpine.js anteriores crearán un efecto de fundido y escalado cuando el modal se muestre y se oculte.

Ver la documentación completa de x-transition →