Ejercicios

Ejemplos sencillos en los que se muestra la facilidad de implementar el código.

Cada vez que se hace click, se carga un chiste.

Evento por defecto, no hace falta declararlo:

<div
    class="jokes"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
>
Load Jokes
</div>

Cada vez que se hace click, se carga un chiste.

<div
    class="jokes"
    hx-trigger="click"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
>
Load Jokes
</div>

Al pasar el ratón por encima una única vez

<div
    class="jokes"
    hx-trigger="mouseenter once"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
>
Load Jokes
</div>

Automáticamente cada 3 segundos

<div
    class="jokes"
    hx-trigger="every 3s"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
>
Load Jokes
</div>

Haciendo uso de indicadores (IMG)

<div
  class="jokes"
  hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&lang=es"
  hx-trigger="click"
>
  <button>Load Jokes</button>

  <img class="htmx-indicator" src="/indicator.gif" />
</div>

Estableciendo objetivos/destinos

Se establece en que elemento se va a visualizar el resultado de la petición.

<button
    class="btn"
    hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&lang=es"
    hx-target="#result"
>
     Load Jokes
</button>
      
<div class="jokes" id="result"></div>

Combinación de teclas y ratón

Al hacer CTRL + Click se carga un chiste

<div
  class="jokes"
  hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&lang=es"
  hx-trigger="click[ctrlKey]"
>
  Control Click Me
</div>

Pasando parámetros

Esta vez, vamos a solicitar el formato y el idioma como parámetros

<div id="salida"></div>

<button
  hx-target="#salida"
  hx-get="https://v2.jokeapi.dev/joke/Any"
  hx-vals='{"format": "txt", "lang" : "es"}'
>
Carga el contenido en salida
</button>


Publicado

en

por

Etiquetas: