LaravelのBladeでURLによってidやclass属性を動的に切り替える方法

例えば、メニューなどのclass属性に、特定のページが表示された場合に[active]や[current]などのCSS要素を動的に切り替えたくなることが多々あります。
そんな時Laravelでは、Blade内でRequest::is()関数を使い、遷移したページのURLによって条件分岐させることで実現できます。

現在ページのURLを判定する

LaravelのBlade内で現在のページが指定したURLを含むか判定するには、if分とRequest::is()関数を組み合わせます。
使い方はとっても簡単です。

@if(Request::is('admin'))
    true
@elseif
    false
@endif

例えば、現在のページのURLが[http(s)://www.example.com/home]だったら「true」、それ以外なら「false」を返します。
Blade以外（例えばコントローラなど）であれば、このように書きます。

if ($request->is('admin/*')) {
    //
}

Class属性の値を切り替える

今回はCSSのClass属性の値を切り替えることを前提に書いていますが、もちろん他の要素やテキストや画像などのコンテンツを分岐するのにも応用できます。以下は、現在のURLが[home]の時だけclassに[active]を追加する例です。

<li {!! (Request::is('home') ? 'class="active"' : '') !!}>
    <a href="/home"><i class="fa fa-dashboard"></i> ホーム</a>
</li>

LaravelのBladeでは、他にもこのような書き方もできます。

<li @if(Request::is('home')) class="active" @endif>
    <a href="/home"><i class="fa fa-dashboard"></i> ホーム</a>
</li>

また、ワイルドカードによるパターン指定もできます。
以下のように記述すると、例えば[admin/users/]以降に[create、show、edit、delete]などがあった場合でもtrueを返します。

<li @if(Request::is('admin/users/*')) class="active" @endif>
    <a href="/home"><i class="fa fa-dashboard"></i> ホーム</a>
</li>

JavaScriptでもできると思うが、LaravelのBladeを使うなら余計な記述をしなくていいので、こっちの方がスマートかと思います。

• Original:https://minory.org/laravel-request-is.html
• Source:Minory
• Author:管理者

Amazonベストセラー