Alpine.js es una librería JavaScript liviana y poderosa que permite agregar interactividad a nuestras páginas web de manera simple y efectiva.
En este artículo, vamos a utilizar Alpine.js para mostrar y ocultar elementos.
Ejemplo:
A continuación veremos un ejemplo que demuestra cómo usar Alpine.js para mostrar y ocultar un elemento:
<!DOCTYPE html> <html lang="en"> <head> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div x-data="{ isOpen: true }"> <button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button> <h1 x-show="isOpen">Página de Inicio</h1> </div> </body> </html> Explicación del código:
x-data:
La directiva x-data inicializa un objeto Reactivo en Alpine.js. En este caso, declaramos isOpen con un valor inicial de true.
<div x-data="{ isOpen: true }"> Botón con x-on:click:
La directiva x-on:click escucha el evento de clic en el botón y alterna el valor de isOpen entre true y false.
<button x-on:click="isOpen = !isOpen">Mostrar/Dejar de Mostrar</button> Elemento con x-show:
La directiva x-show controla la visión del elemento según el valor de isOpen. Si es true, el elemento se muestra; si es false, el elemento se oculta.
<h1 x-show="isOpen">Página de Inicio</h1> Resultado:
Al cargar la página en el navegador, debe verse lo siguiente:
Al dar clic en el botón, se dejará de ver el elemento con el texto Página de Inicio, así:
Top comments (0)