Laravel 5.4 New Feature – Add new Components & Slots in Blade Template
In this post we will give you information about Laravel 5.4 New Feature – Add new Components & Slots in Blade Template. Hear we will give you detail about Laravel 5.4 New Feature – Add new Components & Slots in Blade TemplateAnd how to use it also give you demo for it if it is necessary.
Some days ago release Laravel 5.4 new version with new features and many upgrade. Laravel also provide documentation for Laravel 5.4 on their website. There are several update in Laravel 5.4 like in collections, mail, factory helper, Bootstrappers etc.
In this article we are going to explain laravel 5.4 new feature Components and Slots in blade template engine with example. Components and slots provide us very similar benefits to sections and layouts. however, it is better way to use Components and Components for reusable template layout like for alert.
So in this post, we are going to see how to use Components & Slots with our blade template. So let’s see bellow example from scratch.
Create Route
First we require to make route for testing. so open your routes/web.php file and add following route.
routes/web.php
Route::get('components', function () {
return view('components');
});
Create Blade Files
we require two blade files one for layout and another blade file for components. so let’s create both files as like bellow:
components.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.4 Components & Slots Example</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div >
<h3>Homepage</h3>
<!-- Alert with error -->
@component('alert')
@slot('class')
alert-danger
@endslot
@slot('title')
Something is wrong
@endslot
My components with errors
@endcomponent
<!-- Alert with success -->
@component('alert')
@slot('class')
alert-success
@endslot
@slot('title')
Success
@endslot
My components with successful response
@endcomponent
</div>
</body>
</html>
alert.blade.php
<div >
<div ><strong>{{ $title }}</strong></div>
{{ $slot }}
</div>
Now we are ready to run our example so run bellow command ro quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/components
I hope it can help you…
Hope this code and post will helped you for implement Laravel 5.4 New Feature – Add new Components & Slots in Blade Template. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs