Attributes/bidind style in Alpine JS 8

Continuing working with the attributes we are going to learn how you can work with the style attribute here in alpin here you can see an example obviously as I always tell you the way to create the component is through the x-data and here you define your variables what you want to change remember that they are simple examples and it is assumed that based on certain conditions you change certain aspects for example the border color etcetera for this although obviously you have to add all the above that is to say a component in the end is associated with all the elements that we saw previously and those that we have not seen yet so abstracting ourselves here we define for the data block some variables that then are the ones that we are going to activate based on some condition more than activating it notice that they are activated by default we are going to change them so from some clicks that you give it you change the background color from black to red we are going to see those changes thanks to the reactivity that alpin has in this case as we hit some clicks:

<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>

Some components that we place here and just like it happens with Vue and similar frameworks and of course here in the pin and as we saw previously so that it evaluates what we are passing to it we place the two points for the rest what must be respected is the layout or the behavior that these attributes have by default, that is to say the style block obviously has an organization a different scheme to for example that of the classes that we saw before since it is defined by key in value you could say separated by commas as you can see here here when we define the style here we define the key that is being border:

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

And here the value would be whatever we are composing as we click on it or the default definition for the rest there is not much more to say so let's do it once and for all here I go with the next component and we are going to start we define the div we define the x-data we define the values ​​that it will have we place Border we place here again single quotes double quotes double quotes
over here I placed or and here I place the single or vice versa a px here whatever you want really I am going to work with one of the most complex ones you could say that it would be the border:

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

That has these three values, the background, I'm going to leave it simple and I'm going to place it here so as not to complicate things with the hexadecimals, I'll simply place the value for texts here:

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

So here we have the component wrapper what would be missing well to do whatever you are going to do with that component with this data that we are using well for now I am going to leave the button here since I want to see that this is doing something I am going to place an x-text here this we presented before that is to print the text of one of the variables that we have defined there I am going to want to print the border and here I am going to duplicate this and I am going to want to print the bg for now with this what should always appear it is a good idea that before doing it you ask yourself or execute in your head what it is going to do but what it should do is simply print the content that we have defined here and see it on the screen in those p tags and now we are going to change it well this do not pay attention to it and here we have exactly what we defined if you make any error or something you must have made a mistake in something in the syntax But at least for now this is what we achieved So what is the exercise basically change the borders and the bg that we defined here so for this we can use the preferred, which is the click event that allows us to change some property based on the interaction with the user:

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

Here then here I'm going to put that border is going to be the same a px solid and I'm going to put black which is exactly the same as we have above as who says to rescue the style and here we change it a little and I'm going to define it to be red well here we've finished this part we're going to do a little the same with the bg I'm going to bring this to leave it I'm going to place it down here to make the separation and here it would be with the bg I put bg bg here it would be for Red which is the color that I have defined by default and this would be I don't know for Blue for example which was what I defined there in the example I put Blue let's see again for here here we already have the buttons I should put a V here to make a separation br two brs so that it doesn't appear so stuck to the other here you can see that the value changes thanks to the reactivity that the pin has so there we see that it changes at the moment we are working on it is as if it were simply a value and we are no longer using it yet as if it were an attribute but at this point we are already so as I tell you the The idea behind this is not to simply vary a text, since at the moment this is being used as simply a text by printing it here, but to be able to use it somewhere, and that somewhere will be, for example, a DI into which we can inject those styles that we are making up here. So I'm going to put the class, I'm going to put the class of Box, which is the one I have defined here so that it has width and a hate, that is, it has some dimensions and with this we can visualize it on the screen because if not it will not have any size, and here, as I was saying, we put two points because we want to, as they say, make the style dynamic:

<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>

That evaluates this attribute that we are defining then we put two points just like we did before for example with the classes and here it would simply be to respect the composition of the attribute that we are trying to esmar that we remember that by default it would be something like defining border and we indicate that it has this well if the quotation marks since this would be the final a text that is going to be represented then if you do not go to Here it is if you do not go to as who says evaluate it Then you do not put the quotation marks but in this case if we want to evaluate it by means of the pin then to see it would be something like this it seems to me okay we have an error indicating that a token was eaten here I forgot to treat this this is the String in this case well you could do this there you can see that it works but in this case for us This is the dynamic part Then we substitute because in the end again this is a javascript that is being evaluated so you have to see we have a text and we have another text and we are doing a concatenation and together This is the structure that we have when defining the styles as I was telling you So this part is as who says the part dynamic we inject the border according to the structure that we want here and it works here correctly and now notice that if we change it changes here automatically and we do the same with the background we place background we place bg the same there is no change and we have it and to place both Nothing happens It is simply this I am going to copy it so that you can see that it is exactly the same if the double quote in my case that we have outside we place this we place a semicolon in this case it would be good it would be a plus here I place a space here a semicolon would be missing since the inline styles a semicolon is placed and we have it another way of doing it is using the inverted single quotes that on Mac I do not know how to get them out but in Windows it is 94 or 96 try there and they will show you the inverted single quotes in case you do not see it on the keyboard and this would be the concatenation that we have in javascript it is important to indicate that this is a feature of javascript and we place the variables that we want to evaluate so that it prints it and does not take it as a literal stre like in this case it would be Border you place it with the dollar key the syntax that you can see on the screen and obviously for when you are going to work with many styles, that is to say, those that we did here, many concatenations, this would be the recommended way and this one plus doesn't go here I don't know what it did and there you would have good the other exercise for the rest in all cases it works correctly so nothing just like always a bit of the moral you have to respect the structure that we already have defined by default in order to also use it here in the pin, that is to say You simply have to replicate based on the structure that we already have available in the html apid which in this case is again style property colon value and if you want to place more than one you have to place a semicolon.

26-11-2024 - Andrés Cruz

En español

• Category
• /
• JavaScript
• /
• Attributes/bidind style in Alpine JS 8