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)