Atributos: clases Alpine JS 7

Ahora vamos a conocer un poco lo mismo que hacíamos antes siguiendo el mismo lineamiento vamos a conocer el biding de atributos en este caso de clases por si surge la duda ya que aquí también es un poquito más interesante ya que no es solamente una conducción de verdadero y falso tan lineal como la que teníamos antes que colocamos una expresión sino fíjate que la sintaxis cambia un poquito en este caso lo que estamos haciendo es se va a aplicar esta clase sí y solo s se cumple la siguiente condición el negado de women o mujer como lo quieras llamar:

<div x-data="{ mujer:true }">
    <button x-bind:class="{ 'hidden': !mujer }" x-on:click="mujer=false">Hombre</button>
    <button :class="{ 'hidden': mujer }" @click="mujer=true">Mujer</button>
    <p x-text="mujer"></p>
</div>

Siguiendo un poquito también el ejemplo anterior entonces para esto te voy a pedir que repliques estas clases que que tenemos por aquí al menos la de heiden que es la que vamos a emplear el resto creo que lo empleamos más más adelante lo puedes colocar ahí directamente en el documento html.

x-bind:class

Entonces vamos a presentar el biden de clases en este caso que obviamente una clase viene siendo un atributo pero es como quien dice van cambiando algunas cositas y es importante conocerlas en este caso recordando un poco esto es simplemente una condición de verdadero y falso:

<div x-data="{ mujer:true }">
    <button x-bind:class="{ 'hidden': mujer }" x-on:click="mujer=false">Hombre</button>

Esto también lo podemos colocar así como te comentaba antes simplemente aquí colocamos man y lo va a tomar y aquí podríamos colocar el negado lo mismo que pudiéramos hacer enjavascript:

<div x-data="{ mujer:true }">
    <button x-bind:class="{ 'hidden': !mujer }" x-on:click="mujer=false">Hombre</button>

Primero colocas aquí lo que retornaría:

x-bind:class="{ 'hidden': }"

Y por aquí la expresión en caso que también te choque entonces te lo dejo Ahí Bueno aquí no sé lo que tú quieras en este caso Woman en el ejemplo creo que lo tengo aquí es en negado entonces vamos a seguirlo y aquí Sería más o menos lo mismo en este caso no lo estamos deshabilitando sino directamente lo estamos ocultando en base a la clase que tenemos aquí definida que obviamente puede estar en una hoja de estilo aparte y todo lo demás ya eso es cuestión tuya aplicarle animaciones transiciones da igual y y aquí sería lo contrario y otra vez esto es opcional y puedes colocarle solamente los dos puntos al menos para otra vez la versión que estoy empleando de Visual Studio Code esto no lo interpreta correctamente pero realmente es esto son equivalentes aquí voy a colocarle un espacio venimos acá siempre pendiente que no tengas errores y ahora puedes ver cómo funciona ahora en este caso en vez de deshabilitarlo lo oculta y esto también
lo puedes ver por acá gíjate que aquí está este sería el de man:

<button :class="{ 'hidden': mujer }" @click="mujer=true">Mujer</button>
    <p x-text="mujer"></p>

Esto es lo que está ocurriendo pero a la final también está deshabilitado entonces viene siendo básicamente eso y 1ué pasa si quieres definir múltiples clases en este caso también definimos aquí una para el borde por ejemplo que es bueno un px solid de color negro bellísimo simplemente por aquí le colocas una coma y por aquí colocamos en este caso es Border y colocamos la expresión:

<div x-data="{ border:true, bg:false }">
    <button @click="border=!border">Border</button>
    <button @click="bg=!bg">Fondo</button>
    <div class="box" :class="{ 'border': border == true , 'bg' : bg }"></div>
    <div class="box" :class="{ border, bg  }"></div>
</div>

Que en este caso es la misma así que la definimos acá para ver puede que esté al revés ya que aquí le está ocultando esto no tiene sentido realmente sería para el de abajo aquí voy a colocar esto aquí aquí lo niego sería al contrario y aquí quito la coma de que es un objeto Recuerda que esa es la sintaxis de un objeto aquí fíjate que ahora tiene un borde lo puedes ver si lo inspeccionamos fíjate que se está aplicando la clase de borde y también no más nada obviamente es al revés porque recuerda que esta clase es para ocultarlo y si lo ocultas da igual el estilo que tenga que no vas no se va a mostrar por lo tanto aquí es el negado es decir recuerda que si esto no se cumple Entonces se está mostrando y por lo tanto lo aprovechamos y le colocamos el borde en de lo quece y Bueno aquí puedes ver que funciona sin problema ya a partir de ahí puedes colocarle cualquier otra cosa por ejemplo el bg bg bien bonito ese su chillón poder hacer aquí por ejemplo para que se vea mejor bg caso de que no veas el borde coloco un bg y ahí lo tienes un color precioso en fin otra forma por aquí mismo puedes colocarle también el bg entonces aplicaría tanto el borde que ahí lo puedes ver como el color y aquí también te puedes apoyar en tu insector aquí Este es el que se estaría viendo el que dice wman en mi caso entonces aquí tengo el borde y también el bg aplicado y bueno es básicamente eso así que esto sería yo creo que lo principal tanto para definir una clase de manera individual tanto definir una clase de manera individual o como si quieres definir múltiples clases en base a otras condiciones esto Recuerda que también es una condición completamente independiente que puede ser otra propiedad una variable aquí llamada no sé Main o directamente en base a alguna condición que haya ocurrido por ahí Es decir es complet ente independiente esta expresión a la que tenemos aquí puedes evaluar en base a tus necesidades así que sin más que decir vamos a la siguiente clase

23-11-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Atributos: clases Alpine JS 7