Laravel 11: when Blade Directive Example

Websolutionstuff | Oct-28-2024 | Categories : Laravel

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

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:

Recommended Post
Featured Post
Laravel 9 Barcode Generator Example
Laravel 9 Barcode Generator Ex...

In this article, we will see laravel 9 barcode generator example. In this example we will use the milon/barcod...

Read More

Mar-26-2022

CRUD Operation In PHP
CRUD Operation In PHP

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

Read More

Jul-20-2020

How to Uninstall Composer on Ubuntu 23.04
How to Uninstall Composer on U...

Hey there! If you've found your way to this guide, chances are you're looking to bid farewell to Composer on you...

Read More

Jan-22-2024

Laravel 9 Where Condition Example
Laravel 9 Where Condition Exam...

In this article, we will see laravel 9 where condition example. Where condition is essential in each and every quer...

Read More

Oct-12-2022