Slots | Laravel Blade Components

hi everyone joshua doing well so in this lesson of larval blade components we're going to be learning about slots we're going to start off with the basics to a little bit more advanced as we go along right so let's get started all right so if you've been following this series you will understand this so what we have is we got a button right here with a name attribute called save then we pass this attribute to our button component but we're using a props right here to select the name that mustn't be part of our attributes back all right and then our opening and closing php tags right there and so that we can write php okay so then we've got a classes variable that's assigned to these tailwind classes and then we pass these classes to the attributes class right here so if we put any classes in the button right here so if you add claws like this right so anything in here it will be merged with these slices right there all right and then we put in the name like this now this is the way we've done it because i haven't gotten to the slot part of the the course yet so let's quickly update that so how can we change this button to make use of slots right let me just show you right so we can do an x button like this okay so now we've got our button created right there now we can remove the name like yes all right now in order to pass in anything between these two tags so this is our opening button tag and this is our closing button day all right now in order to receive anything that's passed between these two components we use the keyword called slot like this all right so that means anything between these two tags will be passed to that component right so let's quickly put in the save like this right so we will know it will be received right here so let's check it out all right so as you can see we've got our save right there let's change it to anything else now you're not obviously going to do this with your button so i'm just going to put the paragraph tag with some text in here so let's say a lot i'm 50. now you're obviously not going to do this i just want to prove to you that anything that you write between these two tags will be passed to the slot right there right let me save that right so as you can see we got the save right there with the lorem ipsum all good stuff that way you can create custom buttons for yourselves in your components right there and you can actually style them however you want so in case let's say you have a buttons folder and you have another inside that you have a primary button then you can do it like that okay right so that's the basic use of that so the thing that we're going to do now is we're going to work on a card component so that i can show you a little bit more advanced users of the slot component right so let's do that right so i've got a card right here with an image a title and some text obviously i can add a button if i want to but i'm not going to do that just to kind of keep things simple so let's quickly see what this looks like right so if you use bootstrap or any other css framework then you will understand this right here right so we've got a card with an image with some text right here now we're going to come change this this card basically to a blade component with the different slots i will show you how so that you can learn all the different parts of this right so let's start off with the first step the first thing we're going to do we're going to cut all of this out and put it inside our component right here right and then we're gonna render that component so x and just do it like x card like this all right so that's the first part right here okay so this is done so we've got a component so we're rendering it right here now the next thing that we can do just remember anything passed between these components gets passed to the slot variable right here okay so if you create a variable called slot keyword like this right whatever is between these two tabs will get passed to this slot right here all right but i'm not going to do that in here so let me just show you what i'm going to do the first thing all right so if we want the image to be a little bit more dynamic we don't want it to be hard coded i'm just going to create a variable called image okay so let's copy cut out this part right here the image now in order to pass this image from the current component right here to this image right here we can make use of the slot variable called x slot like this and then what we can do is we're going to give it a name and the name needs to correspond to the name that you're given in your cart so in this case we've got the card name that image that slot name is image okay so let's just quickly add in there so image and then we can pass our image in there all right so let's see if we can actually render this now right so as you can see nothing changes right so let's do that for our title as well so what we can do is we can leave it as an h5 okay like this and just put the title like this all right or what we can do is we can just put the title like this and let the person specify if they want an h5 or whatever but in my case i'm just going to put a title like that okay so let's quickly now in order to pass that to the title we can use the x slot again and we're going to give it a name of title right so this is our image and this is our title okay so let's quickly pass that in there so i'm just going to do a lot of let's say 10 just to kind of give it the title right so let's see if we render this right so everything works as you can see the title there but the title is a bit too long for me so i'll just make it short oh that's a little bit better right so let's quickly do that for the paragraph as well right so now you can decide if you want to do the slot like this okay and just cut out the paragraph like that it's totally fine you can do that but for me like i said i'm not going to do that so i'm just going to leave this and i'm just going to call this one body body just to kind of practice the advanced features of the slot okay so let's quickly go there and let's quickly do the body body like this and we can do an x slot and then we put in the body i'm going to add some lorem ipsum tags let's say lorem 20 and that's it right so now we got our component created we use the xlots in order to get the different things to make it a little bit more dynamic if we want to use the same component we can do that but now there's another problem let's say you don't want to add the title to every component or an image or a body it's totally dependent obviously up to you so what you can do is you can do an if an if statement all right so but if you want them to be there you can do that so if you say the image must be required on all the cards you can so you can leave it so for now is we can do an eset this is set and we can pause in the image like this just put an end if all right and then we can do the same for the title and for the body there's another way we can write this we can do that he said like this all right and then we can just pass in the value for like this instead of an if statement we can do it like this all right so let's quickly see if we just leave out the image we get any errors refresh as you can see no errors but let's say we do going to do the same thing but if we didn't put the eset i'm just going to copy and comment out the if statement as you can see we get the undefined variable image now in order to fix that you could just put an if statement with the eset or you can use the blade helper he said like that right so let's all that now the next thing that you might wonder all right so how can we pass in to this slot let's say if we want to customize our title so let's say we want to add a class like this let's say class font bold okay uppercase and text blue 500 okay let's say you want to pass this to that slot component how would you do that let's start off with the title this one right here so as we put in those classes right there so we go to on h5 and what we can do right here we're going to put the blade notation and then we can put in basically our slot name so in this case it will be the title and then we can add the attributes like this let me just remove that all right the attributes and we can just call on the class if you guys remember if you've been following the attributes which is in the previous lesson this all would make sense now what we can do is we can give it default attributes okay so in this case it says just make some padding of one all right let's quickly see if we can actually view this button right now sorry this title right so as you can see we got our title in there right so what i'm going to do is i'm going to cut down everything in here except the uppercase and make this part of the default styling for the titles okay like that with a font text of let's say small for now okay and now the next thing we can do for the body as well we can do that as well let's go to the paragraph and we can do a paragraph tag with a body and then we're going to do the attributes and then we're going to set that to the class i'm just going to make it something simple so we can just do a text of extra small font that i or let's say i wanted text actually right so now we got our card right there so now what this will allow us to do so in our slots we can just come and add any styling we want so in this case if we don't want to make the text blue let's make it text green or let's say 400 we can easily do that kind of we had all the hard-coded information we kind of made it available for us so that we can use it throughout our application and if we can style it and give us a little bit more freedom and the other thing as well if you want to have default styling for your attributes for the cart itself right for the card itself we can also have its own attributes right here so and we can remove the styling from this one so we can remove it and put it in here and just remove that class right so now this one is a little bit more dynamic okay so there's our image here's our title and here's our body right there just giving us some room in there right so obviously now the card is like this and we can now give it some styling as well so we can do a width of let's say we don't want 60 we want it to be 72 and we want the background to be just something ridiculous and noticeable just believe for now right so that's how we can do it right so if you guys learned something please give this video a like if you have any feedback suggestions or some questions regarding the slots please ask them for me in the comment section and i will gladly help you guys out thank you guys for watching and i'll see you in the next one adios

Channel: AngelJay Academy

Views: 253

Keywords:

Id: D4Y6spYNvnc

Length: 13min 6sec (786 seconds)

Published: Tue Oct 26 2021