Laravel 5.4 New Feature - Add new Components & Slots in Blade Template

By Hardik Savani | January 26, 2017 | | 3983 Viewer | Category : Laravel


Share this post:

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...



We are Recommending you: