Creating Laravel Blade Component: Step-By-Step

hello guys this video will be about blade components in laravel so in laravel Breeze and in laravel gesturing the default registration and login forms use blade components and they provide a lot of resources views components these ones so for example there's input error input label which are used in the registration form but what if you want to add another field which is not among the components for example a drop down so Breeze doesn't provide input select or input drop down they do have drop down but it's for another place for the menu That's not the same so in this lesson let's actually create X input select with an example of time zones your example could be like choosing the language choosing the country choosing user role whatever any drop down in my case it will be time zones and the goal of that component is to have the same styling so for example if we copy and paste name into like this place after the password and change that for example to time zone and just provide here General select with options for example like this and delete the X text input look at how it looks if we refresh the page we have the time zone drop down but we want that to have the same look and the same feel as other fields so full length same borders same padding and stuff like that and probably we would want to use the same input styling in other Pages too that's where components become handy so you create the styling once for that component and then could reuse it throughout all the project in the future so that's the reason why now let's get to the how to create a simple blade component you just need to create in resources views components a file with blade PHP at the end and then you could use that as X within the same file name so input label is the file name and X is how you use it so let's do exactly that and create a new file called input select blade PHP as a proof that it actually works let's just copy or in fact Cut From Here paste here option works and let's use it as X input select like this without any parameters for now and let's just refresh and we have works here so we already have blade component which we're using in other blade file now let's make it actually more useful with parameters and styling but first some cleanup so let's do the label for time zone field and let's change the common to time zone here and also messages will be for time zone in this video we won't cover any validation that comes from the validation but just for the sake of consistency let it be here now let's work on the select itself if we take a look at the X text input for example here what do we see here we see the HTML the same input with variables that could be passed as properties and also their attributes so let's actually copy paste from this here into our input select and we need the same styling of border of Shadow so we will leave it as it is disabled we don't have any functionality and let's do it like this select and then the class will be by default with these values and then we close the select and then we have options for now again let's hard code it works with Styles so we'll do it step by step it will be a bit longer video but I wanted to show you the reason why behind each step so like this and now if we refresh we have works with Styles and as you can see the border is already the same as these ones and to make the final styling we need to add extra attributes so as you can see for the X text input there's also class here so what happens here in the input select in your blade opponent you have attributes merge default attribute value is this but it would be merged with any additional values that you pass when using the component so in our case we need to pass the same class block margin top 1 and width full and finally to make it fully consistent in the registration form each component each input has margin top for the div this is kind of outside of Blade component but just for the sake of consistency and now we refresh and now we have absolutely identical styling for the drop down as well as inputs looks much better doesn't it finally how to pass the parameters to our select the list of time zones as you can see in other components there's this syntax so column value or for example colon messages here this is exactly the syntax which we would use here and let's call the select options exactly like this options and here we can use p HP variables for example in this case let's call it time zones and those time zones are passed from the controller in case of laravel Breeze we have registered user controller where we Define this and then pass that to the register so by default larval Breeze looks like this without any parameters but you can pass additional parameters if you wish to so this is exactly what we will do and then we pass those as options and then inside of our component those options will be here and we can do for each of the options options as option we Define this and let's change that to key value and we will show the value as text here value and the key would be value here like this and our controller passes the time zone identifiers list this is by the way PHP function it's not a laravel thing and if we DD time zone so you would see what's inside we refresh and this is the list so we have strings of time zones with their array item number which would be the key in our case so we passed those time zones into register blade which in itself uses time zones as options the final thing is to define the options as a thing inside of Blade component as a property you've seen that already in text input props disabled with the default value of false exactly I will copy and paste and our property would be called options with default parameter of mtra for example and now for refresh our page we have the list of time zones as you can see below in this video I will not cover the submitting of the form validation and stuff like that the topic is just blade components so this is how you can easily create a blade component and how to add attributes for styling for example and how to pass properties for any values and this example actually the full example comes from our course about time zones so I've chosen time zones deliberately because would you have that example we have a full course about time zones where my colleague modestas implemented this drop down in Breeze with actually saving the data with database value with validation and everything related to that and also there are more examples you can see on the right side the full content of the course and I will link that in the description below that's it for this time and see you guys in other videos

Channel: Laravel Daily

Views: 22,591

Keywords:

Id: kfvLppwhmgQ

Length: 7min 39sec (459 seconds)

Published: Sun Jun 25 2023