(138) Slots in Laravel | How to use Slots in Laravel | Benefits of Slot
8Learn to Create a Blade Components and Slots in Laravel
With Laravel 5.4 and above, you can add components and slots to your blade views using the @component and @slot directive. If you’re already familiar with using blade, the concept of components and slots is very similar to section and layouts. Using blade components and slots allows you to easily build and implement reusable HTML elements in your view.
Getting Started
We will have a master layout with an alert component that needs to be reusable. Head over to the resources/views directory and create an alert.blade.php file. Edit the file with the following code:
div class="alert alert-danger"
div class="alert-title" Error div
{{$slot}}
div
The {{$slot}} variable contains the content we plan on injecting into our component. Create a master.blade.php file in the resources/views directory and add the following code to it:
Using the @component directive, we inject the alert component we created earlier and append it to the master view.
Making Components Reusable
At the moment our component isn’t really reusable. Take for instance, what if I want to display a success and danger alert using the same component? Or I need my alert to have custom titles?
Let’s fix that. Initially , I need the alert’s class and title to be reusable. So we’ll define a class and title variable in the alert component we created earlier. Edit the alert.blade.php to look like this now:
Now, we have been able to define multiple slots for a class and title variable in our component. We can now reference those slots in our alert component. Edit the master.blade.php with the following code:
Now we have two alert components – a success and error component. Using @slot(‘class’) and @slot(‘title), we parsed in values to the class and title variables we defined earlier in our components allowing us to achieve reusability.
Routes
We have only a single route. Edit the web/routes.php file with the following code:
You can start your local server and navigate to the /component route in your browser to see everything in action.
Learn web development
Learn App development
Learn full stack development
If you are facing any problem during development, you can post your queries free of cost at https://solutions.cdlcell.com so our team will respond to you within 24 hours.
If you need paid help from us, please visit https://solutions.cdlcell.com/user/instant-help to process a contract with us.
* Contact us: contact@cdlcell.com
* Our website: https://cdlcell.com
* My Twitter: https://twitter.com/HadayatNiazi3
* My FB: http://facebook.com/hadayatniaziofficial
Follow us on LinkedIn: https://linkedin.com/in/cdlcell
Follow us on Tiktok: https://tiktok.com/@cdlcell
Join us on Instagram: https://instagram.com/cdlcell
Follow us on Facebook: https://facebook.com/cdlcellpk
Join our Laravel Developers whatsapp group: https://chat.whatsapp.com/JSA8qZZGVbPIv9NdHeIwyi
#php
#phplaravel
#laravel
#webdevelopment
#cdl
#career_development_lab
#hadayatniazi
#coding
#technology