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

By Hardik Savani November 5, 2023 Category : Laravel

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:

Read Also: Laravel 5.4 New Feature - Add Eloquent WhereKey Method Example
http://localhost:8000/components

I hope it can help you...

Tags :
Previous

Laravel 5.4 New Feature - Add Eloquent WhereKey Method Example
Next

Laravel 5.4 - Send Email using Markdown Mailables Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares