Understanding how to reuse Laravel Livewire components, Keys
The next step or what we are going to work on here in this section is about the style that we have here at the moment in our application in the previous section we focused on developing the functional part but also the visual part is important and is part of what the stap is So this is the next thing we are going to work on then If we review any form for example this one here we can analyze it a little faster we see here that we have a set of classes with which we have the following style I really dont like it very much I am always bothered by this dead space that is here next to it and we can remove it without problem just like we do here we eliminate it we can finish adapting it but due to the focus of the course I do not want to put my style or my vision on the one that these people from the lw team or J stram already have therefore I am going to work with the same but it is important that you also understand that you can customize this to your liking and what is the focus of the course we are simply going to follow the guidelines that is to say the structure that we already have here defined by default it is also important to mention that this is telwin basically a lot of dif with TailwindCSS and by So it is the same style that we also use in other statistics such as inertia because in the end that part of the client is again the same as if we present it with Vue or we present it with Blade it is indifferent if we are working with telwin So if you have already seen the one from inertia or you have to know that in the end it is the same style Of course again here we are going to work is with the Blade part and TailwindCSS would be So already here for example we can see a form with which we are going to work and with which we are going to start to adapt all this that we have here and it is simply replicating what we already have once this is explained what I would recommend is that as we go along we advance in each class you do these implementations that is to say here what we have to do is grab that structure that you had before I gave it with the col of size six and go here your content to the end and also this that we had here this ugly block taking up space here and you go making those adaptations here in your development therefore it would be a challenge for you practically this entire section Of course I am also going to to implement them because if not it doesnt make sense and so that you have the implementation there too in case you have any doubts But it is important that you understand that this is or I highly recommend that you start implementing it yourself since in this way you will also as who says know a little more about what The Stack offers us As who says hand in hand then without further ado I am going to start here with the implementation here again we go that part duplicate the content that we already have So simply Search here Well these are the components what we already have right now we dont have to take out any in particular since we are reusing an existing structure we are going to look here for some that are lets see if I find them here We have one to log in I would like to know where this one is for profile here is profile we have show we have This I dont know which one it is to see this It would be good another way is to copy this cont control shi F it should be around here and I didnt find anything what a pity something they must find There it is what happens is that this has status Slash by Ah for the com here we have it And this is the structure that I am telling you that we are going to know So what do we have here here we have a form section here Notice that it changes a little This would be a change that we have to make since here we have a typical form that is how lare works in this case as who says excluding everything that we already have but again the idea is to use this existing structure and What is this structure simply is components components of the Livewire in this case we already have one called Here it is in which notice what it does it receives the prot the one called sumi Remember that the prod is to pass attributes externally in this case it is to indicate which method it has to call since well if you review the source code you will find that what is the controller class understand the controller what is not the blade we will have there a method called update profile information which is the one that would be called when we click on the send button of this form then instead of placing this which as it says would be the classic approach that we would have to follow if we reuse this component we have to change this Wi send prevent for the send simply for the rest are slot which is to place here what is the title and others that are the rest of the components that we have here and since we have this one open here you can search for it without any problem here you will see the good section This other component that another time section with a style and here we have the slots that Remember that they are simply parts where we place the content just like it works in Vue and similar clientside frameworks here we have this section to place some content that we want to change for example here you could place an image plus text what happens is that I dont have an image at hand and here you can see what will appear then it is to place as who says a predefined content in a certain line of our page what else do we have here Well through the slot for the form that would be this block that is defined here you can see how easy it is to change this because if you dont like any of this you can just delete it and here I also changed the spacing in this case it would no longer be a column of two or TR which is what we have here you see that you can see well what it is doing it would not be necessary to use a grid since everything would be used in the same block but again I am not going to change it to respect a little the style of the Livewire team well for the rest here we do not have much more to do here it is asking for a conditional that is in a class and thats what the form is the X Label which is not what we are using Here it is here we are using html fields and this if we review again If you look for Label here What you have to do start searching you will see that it is simply the normal html element but with some added classes Remember that merch what it does is that you can supply more classes and it will mix it with what we already have here which is the default predefined style but of course here you have to keep in mind that if for example you pass text md then it will collide with this and only one or the other will be shown It may be the sm or the md depending on Where in the style sheet it is located since Remember that the style oj is in cascade that is to say the ccs will show the Well it has several definitions but to put it in clear or simple terms I am going to look for one here Well here I have nothing Of course here to see No I have nothing if for example here we had the dmd and here the one of The one of sm in this one the D smm something like that no matter what we have here the class that would have priority would be this one Im going to place here for example blot on this one because this one is defined afterwards there are others like who says conditions that are placed for example the level of the rule that is to say if you have many many elements nested here but as it is Talwind it does not apply much in this because in the end they are single level classes So thats good its that basically again I would recommend that you go here analyzing little by little all this what we have here in the good little by little in this for example in this one we arrive from here we are evaluating This component here we follow the navigation a little I recommend that you do that and in the end you will arrive that it is a normal html element with a lot of terwin classes So Im going to start doing the implementation in this video but the introduction has already gotten too long well better leave it for the next one So lets go there.
Laravel Livewire Course Using the components in our own developments
Now that weve clarified the operation a bit lets start working with all this here Im going to close all this At this point I consider that youve already done some navigation to see how your elements are formed So lets simply use them So here were going to adapt the design a bit Im going to duplicate this one At least right now this is already in the previous section But right now Im going to duplicate it in case something changed and I want to check it Then Ill delete it If everything goes well then Well here we have these the action messages Lets go to what would be the form So here we put this Im going to see if I can select the one below Well its a little complicated Well here we can put an x on it because its a form component Section Here we have it Remember that we only pass it a prop So we remove this and put it directly Submit In this case submit and submit which is the name of the method in the class For the rest a bit the same Im going to select all this with control d Well command if youre on a Mac And here we put an x Go ahead Sorry an x and a with the similar input we select the input with the Def fill I dont know what style its going to grab but here I do the same and now with this we have to see I left Well here we already have a nice error it must be that I ate something for Music there Ah its that I didnt close it of course this has to be closed too since Im here I think its Here there is that its giving problems and it seems that Okay title is not defined of course here you can already see that its another type of error it would be that of the form Here its important that you close it well That would be a small difference there because its a component all the components have to have either the opening and closing tag or the closing here at the local level of the same definition Then its already asking us here for the rest of the little things Its going to allow me to copy and paste this as I save myself the work and we place it here inside it would be if here inside Im going to paste a moment here now well another error that of the form its a matter of going seeing and and changing here we can put category here to see if I get the one from Loren Im going to remove this Loren There it is good fill text there put whatever you want like I tell you it seems a little useless but there we go then this form that is asking us here Ah sure the missing thing is the form slot that would be all this the important thing I am going to cut this This goes in the action but I am going to cut it anyway and here we place a slot to see if prop appears and its name is form which is the one that is screaming at us there and we place it we cut the button that also has to be an x Button we go down here I am going to indent there we have it So this has to be in the form slot as you can see and here we place what would be another slot and this one is called actions this again you can see it here control F actions which would be for the actions part we even have some defined there to see this is the message and this is the other this is another way This is already as who says Native Laravel And is that if you leave a value there a default structure then that is the one that would be maintained and if we do not use our actions and here I place a command an x lets see now look at that already Well it is not that it is pretty but at least we have something relatively elegant It still needs to be fixed a bit but there we go well here the next problem that is the most annoying is the part here of the column and how all this is ordered since we channel this it is found here ordered by grids here you can select it and you can see how it is defined And this is something from Talwind But well what he is doing is using the grid system that we have natively in ccs its name tells us well the structure tells us quite a bit he has a grid of se columns I think it can have up to 12 and the Gap which is the padding of the columns for example if you want to place one you will see that you have a little bit more space So what do we have to do here define that each one of our elements has the space that we consider And that is what you can see just to see if I find something around here This is not a form form information to see here Ok Im going to look for this Music of finding control F Here it is here is the Conan of size 6 what does this size 6 do I think we have 12 we will see it but it is to indicate that occupy I think it is occupying more than six but it is going to occupy six lanes because here it has less space then there are 10 now we review then we can use this structure again So lets go back here and for each of our elements Im going to cut it I write here a div point I put call spam de6 point sm and right now Ill tell you what the sm is which is from Win lets see if it comes out with spam de4 in the same way right now we see it in the practice ctica if we put this at least one looks good this one is still lost Im going to put 10 here because Im not sure how many it has I think up to 10 it would be I dont think it even has 10 Here it is I dont know if it has 10 I put 12 what happens is that the rest is taking up space Well right now we see that and what we have to do is exactly the same as we have here Here I close the div Im going to paste it here first and here I close the di This would be for the image we could also place it Although Im going to place it as part of the one above I have it and you can see that it has a better style now why does it appear so small to me Here I leave it look that I left the 10 No lie its fine what happens is that this is not occupying the entire width that they will have defined here with full this I think they placed it here manually control F with full Here it is here what I was telling you happens in the same way Im going to comment on it again here it is using an x input that if we look for it input Blade would be just this one she has some predefined classes but among them is not the one that is full this is Wi again full that Wi 100 if you have questions about any class you can or or Look here for the official Twin ccs documentation since there are many This is not lost on some day geted around here you look for the part of W 100 Sorry full and it will indicate that 100 there it is I killed it Sorry er zo that I wanted to give it here and that is it or you can also see it here in the over here right click you select here it has the classes sometimes they get a little lost because it has a lot of nesting there you will find it There it is and well you can activate or activate to see what it does in case you still have doubts with the definition but what it is doing is making the merch that I mentioned before this class is going to add it Of course yes but you can also pass additional classes to it to customize the style that is what it is doing So Well since it works like this Or you can modify this also remember that you can modify this one I do not do it for course reasons because I do not want that as who says to touch the structure of the Livewire a lot and I prefer to make the changes here but if it is a real project you could modify these attributes of your components perfectly everything that is outside the vendor folder you can touch without problem Although again as who says The small problem that we could have Is that in the future they update Livewire and change some things here then you would have to make that change manually too In order not to lose your work then here I am going to take this well again a little the same select here control d control d and we are going to place the classes Class with full also because I want it to take up the entire width and there you can see it and no this is not mine Sorry there you can see it now this has a size of 10 and it is taking up 100 what you can see here is the input over here Now here No notice that we have two more grids 1 2 3 only has Ah sure because the grid is six the Grill is six here to see her here the column is six So it is taking up here I left it was the spam at 10 here we have is the spam of se Okay it is already here analyzing a little bit I say Here we have There are six columns or Well better said six grids You can see this easily since here it says gr col six if we position ourselves here here you can see what the browser does on the top one the one that says gr call 6 and you can see 1 2 3 4 5 6 which are the spacing that we have there as I told you This is the spacing you can place it to test one you will see that now everything appears closer together and the ones that are the little things in pink the lines are the padding between quotes of those of the grids so here I am indicating that of the six it occupies 10 of course as there is no more eh Nothing happens but it does not even reach there because the one that is being shown is the one of the spam of cu this Remember that the sm means that it is the media query in this case here you can see that this is the one that is being used by the minimum size defined that is to say that by default it would be size four here so that you can see it more clearly you could if you want it to occupy the 100 of the space you could take this that I also dont know why it doesnt take up 100 well no I dont know why they didnt put it like that in the default style I suppose so that it doesnt appear so stretched and youll see that it takes up 100 of the space of course you can put more but since theres no more space its not going to be much Notice that it stays there its a matter of working with the space that you had defined there if you want to put for example three then they would appear one next to the other which also looks pretty good you can play with that a little bit and play here with the one above you cant because this one is defined here then you would have to change this one And if you change this one you can break a style there but well you can do it but I nor Im going to do it and the one of 10 in case youre wondering when it appears is when the media query is not fulfilled the mediaquery will be executed Until the screen size is at least 640 pixels So if we come here and shrink it for example here it has 375 pixels you can already see that the one that does not have elsm is being applied since the smm is not defined And if we grow here a little bit Im going to put the responsive mode here its over here youll see that when it goes over 620 I think its because I had 640 defined there it is there the medium aquar is applied and thats how this works and thats the sm in case you have any doubts there then well thats it basically I think with this we complete what is the style for this component and this part of the spacing And I think that I didnt define it here either that well see a little bit later which is to place some containers and margins there But well I dont want to mix things up since as I indicated here the idea is to reuse a little bit the structure that we already have it currently and for the moment we wont change it much so that this is understood a little better and in summary remember that here we have the labels the title and description which is for this block there you can place a good useless text the actions which is to place the button there the form which is for the form and the submit for the rest we use are components here x input and little more to say and the structure that we already have there based on grids so nothing now with this we go to the next class
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter