AlpineJS: El TailwindCSS para JavaScript

4 minutos de lectura

¿Qué es AlpineJS?

A rugged, minimal framework for composing JavaScript behavior in your markup.

Básicamente cuando necesitamos hacer una aplicación interactiva y React o Vue es mucho para nosotros (no a nivel de desarrollo si no de tiempo) fácilmente podemos utilizar AlpineJS que usa todas las características de Vue el para comportamiento en el HTML.

Podemos pensar en AlpineJS como el TailwindCSS para el JavaScript

¿Qué puede hacer AlpineJS? 🧐

  1. Dropdown:
  1. Tabs:

Estos son ejemplos básicos, pero ilustran muy bien el poder que tiene Alpine para añadir interactividad en nuestros sitios web. Ahora bien, ¿cómo podemos añadir animaciones? Muy fácil, añadimos TailwindCSS a nuestro proyecto y podemos hacer algo como esto 👇

¿Raro y fácil verdad? Bueno vamos a explicar la magia detrás de esto

  1. Tenemos nuestro HTML básico:

    <div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>
    <ul x-show="open" @click.away="open = false">
    Dropdown Body
    </ul>
    </div>

    x-data sería nuestro estado, puede ser cualquier cosa, un array, un objeto, un string, números; cualquier tipo de valor. @click sería nuestra acción y que es lo que hará x-show es una propiedad que va a mostrar el elemento cuando su estado sea igual a true, pero por defecto el elemento tendrá como propiedad display: none; @click.away es un bind en el cual si hacemos click por fuera del elemento este se va a cerrar

  2. Ahora, las animaciones las podemos añadir a través de la propiedad x-transition de esta manera:

    <ul
    x-show="open"
    @click.away="open = false"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform scale-90"
    x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-90"
    >
    Dropdown Body
    </ul>

    Cómo podemos ver paso a paso le estamos diciendo con clases de TailwindCSS que va a hacer al entrar y al salir en sus diferentes estados, y AlpineJS sabrá cuando aplicar estas clases de x-transition basado en la propiedad de x-show

Ahora, cómo haríamos una animación para una tab 🧐👇


Gracias a las propiedades de AlpineJS podemos manipular el JavaScript y la interactividad a través del HTML.

Lo he estado usando desde hace unos dos meses y me gustaría enseñarles a todos lo que he aprendido en este tiempo, así que si les gustaría que haya más contenido de cómo hacer más cosas complejas con AlpineJS suscríbanse al boletín de noticias abajo de este blog y quédense atentos a las nuevas actualizaciones que habrá 😎

Los veo en el código 🤓

Daniel Esteves © - Todos los derechos reservados