Atributos/bidind style en Alpine JS 8

Vamos a conocer como hacer el bidind de estilo en Alpine.

Siguiendo trabajando con los atributos vamos a conocer cómo puedes trabajar con el atributo de estilo por aquí en alpin aquí ya puedes ver un ejemplo obviamente como siempre te indico la forma de crear el componente viene siendo mediante el x-data y aquí defines tus variables lo que tú quieras cambiar recuerda que son ejemplos sencillos y se supone que en base a ciertas condiciones tú vas cambiando ciertos aspectos por ejemplo el bordeado color etcétera para esto aunque obviamente tienes que sumar todo lo anterior es decir un componente al final está asociado de todos los elementos que vimos anteriormente y los que no hemos visto aún así abstrayendonos aquí definimos para el bloque de data algunas variables que luego son las que nosotros vamos a activar en base a alguna condición más que activarla fíjate que están activadas por defecto las vamos a cambiar entonces a partir de algunos clicks que le des le cambias el color de fondo de negro a rojo vamos a ver esos cambios gracias a la reactividad que tiene en este caso alpin a medida que le peguemos algunos click:

<div x-data="{ border:'1px solid black', bg:'red' }">
   
   <button @click="border='1px solid black'">Border 1</button>
   <button @click="border='2px solid red'">Border 2</button>

   <p x-text="border"></p>

   <button @click="bg='red'">bg 1</button>
   <button @click="bg='blue'">bg 2</button>

   <p x-text="bg"></p>

   <div class="box" :style=" 'border: '+border+'; background:'+bg"></div>
   <div class="box" :style=" `border: ${border}; background:${bg}`"></div>

</div>

Algunos componentes que coloquemos acá y al igual que ocurre con Vue y frameworks similares y por supuesto aquí en el pin y como vimos anteriormente para que evalúe lo que le estamos pasando le colocamos los dos puntos por lo demás lo que hay que respetar es la disposición o el comportamiento que tiene por defecto estos atributos es decir el bloque de estilo obviamente tiene una organización un esquema diferente a por ejemplo el de las clases que veíamos antes ya que se define mediante clave en valor se pudiera decir separado por comas tal cual puedes ver por acá aquí cuando definimos el estilo aquí definimos la clave que viene siendo borde:

<div class="box" :style=" 'border: '+border+'; background:'+bg"></div>

Y aquí el valor que sería sea lo que sea que estemos componiendo a medida que le peguemos click o la definición por defecto por lo demás no hay mucho más que decir así que vamos a hacerlo de una vez por aquí voy con el siguiente componente y vamos a comenzar definimos el div definimos el x-data definimos los valores que va a tener colocamos Border colocamos aquí otra vez comillas simples comillas dobles comillas dobles
por acá coloqué o y aquí coloco las simples o viceversa un px aquí lo que tú quieras realmente yo voy a trabajar con uno de los más complejos se podría decir que sería el de borde:

<div x-data="{ border:'1px solid black'}">

Que tiene estos tres valores el background voy a dejarlo sencillito y voy a colocar aquí para no complicarme con los hexadecimales simplemente le coloco aquí el valor a textos:

<div x-data="{ border:'1px solid black', bg:'red' }">

Entonces ya aquí tenemos el envoltorio del componente qué faltaría bueno hacer sea lo que sea que vayas hacer con ese componente con esta data que estamos empleando bueno de momento voy a dejar aquí el botón ya que quiero ver que esto está haciendo algo voy a colocar aquí un x-text esto lo presentamos antes que es para impr ir el texto de alguno de las variables que tengamos ahí definidas voy a querer imprimir el del border y por aquí voy a duplicar esto y voy a querer imprimir el del bg de momento con esto lo que debería aparecer siempre es buena idea que antes de hacerlo te preguntes o ejecutes en tu cabeza qué es lo que va a hacer pero lo que debería hacer es imprimir simplemente el contenido que tenemos aquí definido y verlo por pantalla en esas etiquetas p y ahorita vamos a cambiarla bueno esto no le hagas caso y aquí lo tenemos justamente lo que nosotros definimos si haes algún error o algo te habrás equivocado en algo en la sintaxis Pero al menos de momento Esto es lo que logramos Entonces qué es el ejercicio básicamente cambiar los bordes y el bg que definimos por acá así que para esto podemos emplear el predilecto que viene siendo el evento click que nos permite en base a la interacción con el usuario poder cambiar alguna propiedad:

<button @click="bg='red'">bg 1</button>
<div class="box" :style=" 'border: '+border+'; background:'+bg"></div>

Por acá entonces por aquí voy a colocar que borde va a ser igual un px solid y vo a colocarle black que es exactamente lo mismo que tenemos arriba como quien dice para rescatar el estilo y aquí lo cambiamos un poco y lo voy a definir que sea de color rojo bien por aquí ya terminamos esta parte vamos a hacer un poco lo mismo con lo del bg voy a traerme esto para ya dejarlo voy a colocarlo aquí abajo para hacer la separación y aquí sería con el bg coloco bg bg aquí sería para Red que es el color que le tengo definido por defecto y este sería no sé para Blue por ejemplo que fue lo que definí ahí en el ejemplo coloco Blue vamos otra vez a ver para acá aquí ya tenemos los botones debería colocarle aquí un V para hacer una separación br dos brs para que no aparezca tan pegado con el otro aquí puedes ver que cambia el valor gracias a la reactividad que tiene el pin entonces ahí vemos que cambia de momento la estamos trabajando es como si fuera simplemente un valor y ya no lo estamos empleando todavía como si fuera un atributo pero en este punto ya estamos entonces como te digo la idea de esto no es simplemente variar un texto ya 1ue de momento esto se está utilizando como simplemente un texto imprimiéndolos por acá sino poder emplearlo en alguna parte y esa alguna parte va a ser por ejemplo un di en el cual le podemos inyectar esos estilos que estamos haciendo por aquí arriba Entonces voy a colocarle la clase voy a colocarle la clase de Box que es la que yo tengo aquí definida para que tenga width y un hate es decir tenga algunas dimensiones y con esto la podamos visualizar en pantalla porque si no no va a tener ningún tamaño y por aquí como te indicaba colocamos dos puntos porque vamos a querer como quien dice haer el estilo dinámico:

<div x-data="{ border:'1px solid black', bg:'red' }">
   
   <button @click="border='1px solid black'">Border 1</button>
   <button @click="border='2px solid red'">Border 2</button>

   <p x-text="border"></p>

   <button @click="bg='red'">bg 1</button>
   <button @click="bg='blue'">bg 2</button>

   <p x-text="bg"></p>

   <div class="box" :style=" 'border: '+border+'; background:'+bg"></div>
   <div class="box" :style=" `border: ${border}; background:${bg}`"></div>

</div>

Que evalúe esta este atributo que estamos definiendo entonces colocamos dos puntos al igual que hacíamos antes por ejemplo con las clases ya aquí sería simplemente respetar la composición del atributo que estamos intentando esmar que recordemos que por defecto sería algo así como definirle border y le indicamos que tenga esto bueno si las comillas ya que esto sería la final un texto que se va a representar entonces si no vas a Aquí está si no vas a como quien dice evaluarlo Entonces no le coloca las comillas pero en este caso si lo queremos evaluar mediante el pin entonces para ver quedaría algo así me parece okay tenemos un error indica que se comió un token aquí me faltó tratar esto esto es el String en este caso bueno pudieras hacer esto ahí puedes ver que funciona pero en este caso para nosotros Esta es la parte
dinámica Entonces sustituimos porque a la final otra vez esto es un javascript que se está evaluando así es que lo tienes que ver tenemos un texto y tenemos otro texto y estamos haciendo una concatenación y en conjunto Esta es la estructura que tenemos al definir los estilos como te comentaba Entonces esta parte es la como quien dice la parte dinámica inyectamos el borde según la estructura que nosotros queramos por acá y funciona aquí correctamente y ahora fíjate que si cambiamos cambia aquí automáticamente y hacemos lo mismo con el de background colocamos background colocamos bg lo mismo no hay ningún cambio y lo tenemos y para colocar ambos No pasa nada Simplemente es esto voy a copiarlo para que veas que es exactamente lo mismo si la comilla doble en mi caso que tenemos afuera colocamos esto colocamos punto y coma en este caso sería bueno sería un más aquí coloco un espacio aquí faltaría un punto y coma ya que los estilos en línea se coloca un punto y coma y lo tenemos otra forma de hacerlo es empleando las comillas simples invertidas que en Mac no sé cómo sacarlas pero en Windows es al 94 o al 96 prueba por ahí y te sacan las comillas simples invertidas en caso de que no la veas en el teclado y esta sería ya la concatenación que tenemos en javascript es importante indicar que esto es una característica de javascript y colocamos las variables que queramos evaluar para que lo imprime y no lo tome como un stre literal como en este caso sería Border lo colocas con llave dólar las sintaxis que puedes ver en pantalla y obviamente para cuando vas a trabajar con muchos estilos es decir los que hicimos acá muchas concatenaciones esta sería la forma recomendada y este más no va aquí no sé qué hizo y ahí tuvieras bueno el otro ejercicio por lo demás en todos casos funciona correctamente así que pues nada al igual que siempre un poco la moraleja tienes que respetar la estructura que ya tenemos definida por defecto para poder utilizarla también por aquí en al pin es decir Simplemente tienes que replicar en base a la estructura que ya tenemos disponible en el apid html que en este caso es otra vez estilo propiedad dos puntos valor y si quieres colocar más de una tienes que colocar un punto y coma.

26-11-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Atributos/bidind style en Alpine JS 8