No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Alpine JS

27/29
Recursos

Aportes 20

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Con las siguientes etiquetas pueden animar la transici贸n del toggle del navbar.
Estas etiquetas van en donde tienen la propiedad x-show=鈥榦pen鈥 .

x-transition:enter="transition ease-linear duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-4"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-linear duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-4"

En la etiqueta x-transition:enter van todas las propiedades de la duraci贸n de la animaci贸n de entrada
En la etiqueta x-transition:enter-star van todas las propiedades iniciales de estilos de la etiqueta, algo as铆 como como el 鈥渇rame 0鈥% de la entrada
En la etiqueta x-transition:enter-end van todas las propiedades finales de estilos de la etiqueta, algo as铆 como como el 鈥渇rame 100%鈥 de la entrada
.
.
En la etiqueta x-transition:leave van todas las propiedades de la duraci贸n de la animaci贸n de salida
En la etiqueta x-transition:leave-start van todas las propiedades iniciales de estilos de la etiqueta, algo asi como como el 鈥渇rame 0鈥% de la salida
En la etiqueta x-transition:leave-end van todas las propiedades finales de estilos de la etiqueta, algo as铆 como como el 鈥渇rame 100%鈥 de la salida

Un peque帽o aporte, pueden usar 鈥榮ticky鈥 en vez de 鈥榝ixed鈥, logramos el efecto deseado de que se mantenga arriba mientras se hace scroll, pero sin sacarlo del DOM, cosa que si hace 鈥榝ixed鈥. Entonces as铆, solo se posiciona encima del banner cuando se hace scroll, pero no en su posici贸n inicial.

Me encantan las herramientas adicionales que se aprenden en los cursos de Platzi! 馃挌

Es mejor usar sticky que fixed ya que con sticky se respeta el espacio de la imagen del restaurante siempre, estando abierto o cerrado el men煤. Se utilizar铆a as铆:

class="sticky top-0 z-10 w-full ..."

CDN:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

Para este caso es excelente poner

cursor-pointer

Sobre el 铆cono de la hamburguesa para dar a entender que se puede hacer click sobre ella.

Excelente bonus! Lo aplicar茅 de ahora en adelante en todas las Landing Pages que haga para practicar

A los filtros le puedes agregar mas parametros al metodo x-show para que la transicion sea mas suave:

x-show.transition.duration.600ms="open"

Por detr谩s show sin mas parametros anade un toggle con display block y display none, mientras que con mas paremetros agregar algunas transiciones. documentacion de x-show:

As铆 logr茅 qu茅 me funcionar谩 con la versi贸n 3.7.1 de alpine.js:

<nav x-data="{ isOpen: false }" class="fixed z-10 w-full bg-secondary text-gray-100">
    <div class="px-2 bg-secondary text-white flex justify-between items-center">
        <div>
            <img class="h-8 py-1" src="img/logo-w.svg" alt="PlatziFood">
        </div>
        <div class="text-2xl cursor-pointer" x-on:click="isOpen = true">&equiv;</div>
    </div>

    <div x-show="isOpen" @click.outside="isOpen = false">
        <div class="my-1 mx-2">
            <input class="form-control" type="search" placeholder="B煤squeda" />
        </div>

        <div class="py-1 mx-2 md:flex justify-around">
            <div class="flex">
                Precio:
                <div class="ml-2">$</div>
                <div class="ml-2 text-primary">$$</div>
                <div class="ml-2">$$$</div>
                <div class="ml-2">$$$$</div>
            </div>

            <div class="flex">
                <div>
                    Calificaci贸n:
                </div>
                <div class="ml-2 text-primary">&starf;</div>
                <div class="ml-px text-primary">&starf;</div>
                <div class="ml-px text-primary">&starf;</div>
                <div class="ml-px text-primary">&starf;</div>
                <div class="ml-px">&star;</div>
            </div>
            <div>
                <button class="btn btn-primary">Filtrar</button>
            </div>
        </div>
    </div>
</nav>

WOW! Me sorprendi贸 mucho esta clase y la facilidad para hacer un navbar, he estado haciendolos con puro CSS y me confundia mucho y con Alpine JS y Tailwind todo ha sido MUUUUY f谩cil

Para ahorita que ya se actualiz贸 toda la documentaci贸n de Tailwind 2021 solo se pone de la siguiente manera:

x-show="open" x-transition.duration.400ms

@click=鈥渙pen = true鈥

genial alpine JS 馃槃

鈥淓l tailwind de javascript鈥

Bien una herramienta muy 煤til, sin embargo en otros Frameworks esto ya se hace autom谩tico, pero igual son caracter铆sticas de preferencias鈥

馃槷 Genial a practicar con esta libreria

f