Laravel 5.4 New Feature - Add New Components & Slots in Blade Template
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 class="container">
<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 class="alert {{ $class }}">
<div class="alert-title"><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...
