Si estás empleando Livewire, te pudieras pregunta cómo podemos mostrar un mensaje por unos pocos segundos para que luego ocultarlo; esto es particularmente útil para cuando hacemos una operación de inserción, actualización, eliminación, el usuario se autenticó, etc; estos mensajes se conocer como mensajes de accion realizada, no son mensajes de confirmación en Livewire como vimos antes ya que, el usuario no podrá cancelar la acción realizada, solamente aparecerá un mensaje para que el usuario sepa que acción se acaba de realizar.
En Livewire se puede implementar este tipo de componentes muy facilmente; pero para lograr algo de inspiración, tenemos un componente que es interesante de ver, y es:
https://github.com/laravel/jetstream/blob/2.x/resources/views/components/action-message.blade.php
El cual con ayuda de Alpine.js, permite determinar el tiempo de vida para visualizar este trozo de HTML:
<div x-data="{ shown: false, timeout: null }"
x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
x-show.transition.out.opacity.duration.1500ms="shown"
x-transition:leave.opacity.duration.1500ms
style="display: none;"
{{ $attributes->merge(['class' => 'text-sm text-gray-600']) }}>
{{ $slot->isEmpty() ? 'Saved.' : $slot }}
</div>En la práctica podemos crear uno basado en el anterior como:
@if (session('status'))
<div x-data="{ shown: false }"
x-init="clearTimeout(2000); shown = true; timeout = setTimeout(() => { shown = false }, 2000);"
x-show.transition.out.opacity.duration.1500ms="shown" x-transition:leave.opacity.duration.1500ms>
<div class="p-1 mt-1 bg-purple-500 rounded-md">
<x-card class="m-0">
<h3 class="text-xl">
{{ session('status') }}
</h3>
</x-card>
</div>
</div>
@endif
Lo importante es emplear Alpine.js para ocultar el contenido mediante la función de setTimeout pasado cierto tiempo, por lo demás, ya conocemos como mostrar un componente de acción relizada que se muestra por pocos segundos.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter