LoginSignup
2
2

More than 5 years have passed since last update.

フォーカスのあるメニューにactiveクラスを付加するヘルパーを作る

Last updated at Posted at 2017-12-08

やりたいこと

メニューの中で、自分が今いるページのメニュー名に"active"クラスをつけるヘルパーが欲しい。
よく忘れるのでメモです。今回はLaravel(Lumen)でやってます。

環境

・Laravel 5.5

ヘルパーを作る

1.app直下にファイルを作って、メソッドを追加
app/helpers.php
function isActiveUrl($url, $string = 'active')
{
    return \Illuminate\Support\Facades\Request::is($url) ? $string : '';
}

これだけ。

2.autoloadしてくれるようにcomposer.jsonに書く
"autoload": {
    "classmap": [
        "database"
    ],
    "psr-4": {
        "App\\": "app/"
    },
    "files": [
        "app/helpers.php" //追加
    ]
},
3.dumpautoloadで読み込ませる

コンソールでdumoautoloadを叩いて作ったファイルを読み込ませてあげます。

composer dumpautoload
4.view側で使う

" active " を吐き出させたい場所でメソッドを呼び出します。
渡すURLは * も使えます。

<li class="treeview {{ isActiveUrl('user*') }}">
    <a href="#">
        <span>ユーザ管理</span>
    </a>
    <ul class="treeview-menu">
        <li class="{{ isActiveUrl('user') }}"><a href="{{ url('user') }}"> ユーザ一覧</a></li>
        <li class="{{ isActiveUrl('user/create') }}"><a href="{{ url('user/create') }}"> ユーザ新規追加</a></li>
    </ul>
</li>

(↑で使ってるのはAdminLTE 2 のグローバルメニューです)

これがあれば意外に楽で助かってます。

余談

Lumenの場合はFacadeを読み込ませる設定を入れてあげないと動きませんので、あともう一手間かかります。
LumenでFacade使う時に必要なおまじない

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2