when Blade Directive Example

New in Laravel 11: @when Blade Directive Example

In this post, I will show you how to use when() helper in laravel 11 application.

A few days ago laravel 11 added new feature @when blade directive. It helps to write ternary condition in laravel blade file. you can see the below syntax.

New in Laravel 11: @when Blade Directive Example

Lets Start New in Laravel 11: @when Blade Directive Example

<div @when($condition, 'active', false)>

I will give you simple example here. we will create one tab with “Home”, “Profile” and “Contact”. we will run the following urls:

http://localhost:8001/test

http://localhost:8001/test?tab=profile

http://localhost:8001/test?tab=contact

When there will be pass tab equal to profile then it should active “Profile” tab. Some thing will work when we will be pass table equal to contact then it should be active “Contact” tab. You Can Learn More Laravel 11 Image Validation Rules – Complete Example and Guide

You can see the code and output as well.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
    <div class="card mt-5">
        <div class="card-header"><h4>Laravel 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 can see the below output as well:

Leave a Reply