web-dev-qa-db-fra.com

Définition de la classe active Bootstrap navbar dans Laravel 5

Je m'interrogeais autour de la recherche de solutions, mais je ne peux pas vraiment comprendre, surtout lorsque je crée des aides. Je suis nouveau à Laravel et je veux une instruction simple ou sinon détaillée sur la façon de définir la classe active pour ma barre de navigation bootstrap.

Voici ce que j'ai fait jusqu'à présent, mais je ne peux pas le faire:

<div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li class=""><a href="{{ url('/') }}">Home</a>
            </li>
            <li {{ Request::is('about*') ? ' class="active"' : null }}><a href="{{ url('about') }}">About Us</a>
            </li>
            <li><a href="{{ url('auth/login') }}">Login</a>
            </li>
        </ul>
    </nav>
    <h2 class="">Tobacco Prevention and Control Program</h2>
</div>

MODIFIER

Régler class="active" rendra toutes les pilules de navigation actives. L'effet recherché est que seule la li de la page en cours ait la classe active.

MODIFIER

Pour ceux qui visitent ce post. J'ai réussi à trouver une solution, mais je ne suis pas sûr que ce soit bien. Eh bien, ça marche et ça me va.

<ul class="nav nav-second-level">
                    <li class="{{ Request::segment(1) === 'programs' ? 'active' : null }}">
                        <a href="{{ url('programs' )}}" ></i> Programs</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
                        <a href="{{url('beneficiaries')}}"> Beneficiaries</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
                        <a href="{{url('indicators')}}"> Indicators</a>
                    </li>                     
                </ul>
phplaravellaravel-5
30
Ikong
<ul class="nav nav-second-level">
                    <li class="{{ Request::segment(1) === 'programs' ? 'active' : null }}">
                        <a href="{{ url('programs' )}}" ></i> Programs</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
                        <a href="{{url('beneficiaries')}}"> Beneficiaries</a>
                    </li>
                    <li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
                        <a href="{{url('indicators')}}"> Indicators</a>
                    </li>                     
                </ul>
18
Ikong

Votre code fonctionne bien, mais vous devez l'utiliser pour chaque lien pouvant être actif. Il est préférable de ne renvoyer que le nom de la classe, et non le class="...", afin que vous puissiez ajouter d'autres classes.

Soyez prudent lorsque vous utilisez * à la fin (about*). Si vous utilisez /* pour la page d'accueil, elle sera toujours marquée comme active (car toutes les autres pages commencent par /).

<ul class="nav nav-pills pull-right">
    <li class="{{ Request::is('/') ? 'active' : '' }}">
        <a href="{{ url('/') }}">Home</a>
    </li>
    <li class="{{ Request::is('about') ? 'active' : '' }}">
        <a href="{{ url('about') }}">About Us</a>
    </li>
    <li class="{{ Request::is('auth/login') ? 'active' : '' }}">
        <a href="{{ url('auth/login') }}">Login</a>
    </li>
</ul>

Vous pouvez également déplacer {{ Request::is('/') ? 'active' : '' }} vers une fonction/méthode d'assistance.

43
Daniel Antos

Si vous travaillez avec des itinéraires nommés. Vous pouvez utiliser cette approche dans vos vues:

{{ Route::currentRouteNamed('about') ? 'active' : '' }}

ou

{{ Route::is('about') ? 'active' : '' }}

La Illuminate\Routing\Router#is(...) est un alias de la Illuminate\Routing\Router#currentRouteNamed(...).

30
sparkle

Jetez ceci dans votre helper.php

function set_active($path, $active = 'active') {

    return call_user_func_array('Request::is', (array)$path) ? $active : '';

}

Utilisez-le comme ça

<li class="{{ set_active(['about*']) }}"><a href="{{ url('about') }}">About Us</a>

Vous pouvez transmettre une seule chaîne à un itinéraire ou à plusieurs caractères génériques.

Voir plus de détail sur Laravel Trick

9
Set Kyar Wa Lar

la solution est

<ul class="nav navbar-nav pull-right">
      <li class="{{ Request::is('/') ? 'active' : '' }}">
         <a href="{{ url('/') }}">Home</a>
     </li>
      <li class="{{ Request::is('about') ? 'active' : '' }}">
         <a href="{{ url('/about') }}">About Us</a>
     </li>
      <li class="{{ Request::is('whyus') ? 'active' : '' }}">
         <a href="{{ url('/whyus') }}">Why Us</a>
      </li>
 </ul>
8
Amit Meena

Request::path() renvoie la requête URI, par exemple: http://localhost/programs, retournera programs, afin que vous puissiez le faire:

 <li class="{{ Request::path() ==  'programs' ? 'active' : ''  }}">
                    <a href="{{ url('programs') }}"></i> Programs</a>
                </li>
7
JP Blanco

Définissez une section sur votre fichier de lame (laissez home.blade.php) comme

@section('Home', 'my-active-class')

Et définissez une section sur votre autre fichier de lame (à propos de .blade.php) comme

@section('About', 'my-active-class')

et cédez cette section à app.blade.php (supposons que vous étendiez à partir de app.blade.php)

...
<li class="@yield('Home')"><a href="#">Home</a></li>
<li class="@yield('About')"><a href="#">About</a></li>
...
1
Daud khan

La solution donnée par @Daniel Antos est la meilleure réponse, comme je l'ai trouvée. M. Danial Antos a également mis en garde contre l'utilisation de * à la fin (environ *). Parce que lorsque vous utilisez/* pour la page d'accueil, elle est toujours marquée comme active (car toutes les autres pages commencent par /). Donc, j'ai utilisé comme suit et cela a bien fonctionné pour moi:

{{ (Request::is('users') || Request::is('users/*') ? 'active open' : '') }}
1
Muminur Rahman

Je pense que ce serait simple et que cela fonctionne pour moi.

<li class="{{ Request::segment(1)=='vehicles' ? 'active' : '' }}">
   <a href="/vehicles">Vehicles</a>
</li>
1
Drew B. Dennis

J'ai trouvé la solution:

composer require devmarketer/easynav

Plus de détails: https://github.com/DevMarketer/LaravelEasyNav

1
Bijaya Kumar Oli