Jetstream alpine (uso de las librerías JS de Alpine)

Al final de nuestro resources\views\layouts\app.blade.php antes del cerrar el body:
function dropdownLSG() {
   return {
     mostrar:false,
     mostrarlo() {
     if (this.mostrar) {
         this.mostrar = false;
         // habilitar el scroll
         document.getElementsByTagName('html')[0].style.overflow = 'auto';
     }
     else {
         this.mostrar = true;
         // deshabilitar el scroll
         document.getElementsByTagName('html')[0].style.overflow = 'hidden';
     }
   },
   cerrar() {
     this.mostrar = false;
     // habilitar el scroll
     document.getElementsByTagName('html')[0].style.overflow = 'auto';
   }
}
}

Y ya en la view que estemos llamar a los métodos Alpine llamar a métodos o usar variables:
x-on:click="mostrarlo()
x-data="dropdownLSG()"
x-on:click.away="cerrar()"
x-show="mostrar" <-- esa capa se muestra o no dependiendo si la variable está a true o false -->
Creación de clases dinámicas:
<!-- aplicará solo esas clases cuando el valor de mostrar sea true -->
<a :class="{'bg-opacity-100 text-orange-500': mostrar }"

No hay comentarios:

Publicar un comentario