Laravel-AdminLTEインストール

一般的なLaravel-AdminLTEインストール

インストールは簡単です。
以下の2つコマンドを実行すればOKです。

composer require jeroennoten/laravel-adminlte

php artisan adminlte:install

※Laravel AdminLTEとlivewireは、こちらをご覧ください。

ダッシュボードを表示してみる

詳しいことが知りたい場合は、Wikに方法が書かれていますので参考にしてください。

resources/viewsindex.blade.php

にWikiに記載の通り書いてみるとダッシュボードが作成されます。

[resources/views/index.blade.php]

@extends('adminlte::page')

以下の一行

@extends('adminlte::page')

でpage.blade.phpを表示することができます。

カスタマイズしてみる

config/adminlte.php

の設定を変更することでカスタマイズできます。

[config/adminlte.php]

    'logo' => 'ロゴだよ',

と変更をすれば、左上のロゴに適応されます。

こんなふうにサイドバーをスクロールさせるか、なども簡単に設定できます。

よく使用されるのは、サイドバー、ヘッダーの項目だと思うので、
その項目を制御するMenu Configuration項目について見てみます。

今回は、

• サイドバーに、「設定」と名前の入ったタイトルと、その下に一覧へのリンク
• 右上にログアウト

を作ってみました。

[config/adminlte.php]

    'menu' => [
        // Navbar items:
        // 追加：ログアウト
        [
            'text'    => 'user.setting',
            'icon'    => 'fas fa-fw fa-user',
            'topnav_right' => true, // trueに設定するだけで、sidebarではなくtopnavに表示できます, 位置も指定できます
            'submenu' => [ // submenuに設定をすれば、階層構造になり、ドロップダウン式で項目が選択できるようになります。
                [
                    'text' => 'user.logout',
                    'url'  => '/logout',
                ],
            ],
        ],
        // Sidebar items:
        [
            'text'        => 'pages',
            'url'         => 'admin/pages',
            'icon'        => 'far fa-fw fa-file',
            'label'       => 'label',
            'label_color' => 'success',
        ],

        // 追加：管理者設定
        ['header' => '管理者設定'], // このように直で文字を指定できます
        [
            'text' => '管理者一覧', // このように直で文字を指定できます
            'url' => '/admins',
            // 'can' => ['admin'], // Middleware、Gateを設定すれば、ユーザーの権限によって表示の切り替えができます
            'icon_color' => 'pink',
        ],
        // 追加：同じ管理者設定
        ['header' => 'admin.setting'], // menu.php で変数を指定することで、設定もできます
        [
            'text' => 'admin.index', // menu.php で変数を指定することで、設定もできます
            'url' => '/admins',
            // 'can' => ['admin'],
            'icon_color' => 'pink',
        ],
    ],

[resouces/lang/ja/menu.php]

 'メインメニュー',
    'blog'                          => 'ブログ',
    'pages'                         => 'ページ',
    'account_settings'              => 'アカウント設定',
    'profile'                       => 'プロフィール',
    'change_password'               => 'パスワード変更',
    'multilevel'                    => 'マルチ階層',
    'level_one'                     => '階層 1',
    'level_two'                     => '階層 2',
    'level_three'                   => '階層 3',
    'labels'                        => 'ラベル',
    'important'                     => '重要',
    'warning'                       => '警告',
    'information'                   => 'インフォメーション',

    // 追加
    'admin' => [
        'setting' => __('models/admins.admin') . '設定',
        'index' => __('models/admins.admin') . '一覧',
    ],

    'user' => [
        'setting' => 'ユーザー設定',
        'logout' => 'ログアウト'
    ],
];

※ デフォルトでは、

lang/vendor/adminlte/menu.php

 です。

 resouces/lang/ja/menu.php

に移動して使用しています。

[resources/lang/ja/models/admins.php]

 '管理者',
];

submenuや、routeの指定、icon、権限での表示切り替えなど
この配列に追加するだけで設定ができるなんて、とても便利でした。

ここでちょっと時間がかかってしまったことは、

__('models/admins.admin')

などの設定した変数を呼びたい時、

config/adminlte.php 

で指定することはできず、

resouces/lang/ja/menu.php 

で指定しないといけないことでした。

Bladeコンポーネントでも使ってみる

さらに、よく使うものをこのプラグインのモーダルやボタンを使用してコンポーネントを作ってみました。

モーダルも例がたくさんあり、こちらをちょっと変更するだけで、とても綺麗なものが完成します。

一つとして、削除ボタンを作ってみました。

作成したコンポーネントはこちらです。
メッセージ内容や、ボタンの位置などは調整しました。

[resources/views/components/buttons/delete.blade.php]

削除ボタンを設置したい場所では、この1行を指定するだけで良くなります。

[resources/views/index.blade.php]

ボタンを変更したいなというときは、これを編集するだけで、使用箇所全てに適応できるのでコンポーネント化する便利さが確認できると思います。
なお、コンポーネントを色々作る時も、Laravel-Adminlteのコードを見て参考にしてください。