In this tutorial, I’ll show you how to use the @when
directive in Laravel 11 to conditionally render content in your Blade templates. The @when
directive is a convenient way to display content based on specific conditions without having to use traditional if statements, making your Blade files cleaner and more readable.
Blade is the simple, yet powerful templating engine that is included with Laravel. Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates.
Laravel 11: when Blade Directive Example
Syntax:
<div @when($condition, 'active', false)>
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 11: when Blade Directive Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="card mt-5">
<div class="card-header"><h4>Laravel 11: when Blade Directive Example</h4></div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link {{ @when(!request()->tab, 'active') }}" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link {{ @when(request()->tab == 'profile', 'active') }}" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link {{ @when(request()->tab == 'contact', 'active') }}" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade {{ @when(!request()->tab, 'show active') }}" id="home" role="tabpanel" aria-labelledby="home-tab"><br/>
This is Home Tab
</div>
<div class="tab-pane fade {{ @when(request()->tab == 'profile', 'show active') }}" id="profile" role="tabpanel" aria-labelledby="profile-tab"><br/>
This is Profile Tab
</div>
<div class="tab-pane fade {{ @when(request()->tab == 'contact', 'show active') }}" id="contact" role="tabpanel" aria-labelledby="contact-tab"><br/>
This is Contact Tab
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You might also like:
In this article, we will see laravel 9 barcode generator example. In this example we will use the milon/barcod...
Mar-26-2022
In this tutorial, I will show you how to create a CRUD operation with login-logout in PHP. So, if you are a newcomer in...
Jul-20-2020
Hey there! If you've found your way to this guide, chances are you're looking to bid farewell to Composer on you...
Jan-22-2024
In this article, we will see laravel 9 where condition example. Where condition is essential in each and every quer...
Oct-12-2022