【Laravel8.x対応】パンくずリストを作る ~Laravel Component使用~

スポンサーリンク
WEB開発

今回はlaravelでパンくずリストを作る方法を教えます。

まずは使い方です!この記事の通りやっていくとどのようなことをできるようになるかを示しますね。

前提条件としては「Fontawesome」を使えるようにしておいてください。

やり方はこちらの記事で紹介しています!

完成イメージ

<x-breadcrumb>
    <li><a href="#">カテゴリ1-1</a></li>
    <li><a href="#">カテゴリ1-2</a></li>
</x-breadcrumb>
パンくずリストの完成イメージ

画像は私が作成しているクイズサイト「くいしぇあ」における見た目です。

アクセスしてみるとどのように使われているかわかります。

これを見ていただければわかるように、li要素を追加するだけでパンくずリストが作成されるような仕掛けを作っていきたいと思います。

Componentを作成する

今回はLaravelのComponentという仕組みを利用します。

超簡単に言うとオリジナルのタグを作れるといったところでしょうか。(人によって解釈や表現は違いますが)

php artisan コマンドでComponentは自動的に作成することができます。

php artisan make:component Breadcrumb

こうすることで関連ファイルが作成されます。

関連ファイルの編集はこの後説明しますが、いの一番にやってほしいことがあります。

\app\Providers\AppServiceProvider.phpファイルを編集します。

use Illuminate\Support\Facades\Blade;
//↓これを追加
use App\View\Components\Breadcrumb;

public function boot()
{
    //↓これを追加
    Blade::component('breadcrumb', Breadcrumb::class);
}

これでコンポーネントの利用準備が整いました。

bladeファイルを編集する

先ほどのartisanコマンドでapp/resouces/view/componentsにbreadcrumb.blade.phpというファイルが出来上がっていると思います。

そのファイルに以下のソースを貼り付けてください。

/*パンくずリスト 開始*/
<style>
.breadcrumb {
    list-style: none;
}

.breadcrumb li {
    display: inline;/*横に並ぶように*/
    list-style: none;
    font-weight: bold;/*太字*/
}

.breadcrumb li:after {
    /* >を表示*/
    font-family: "Font Awesome 5 Free";
    content: '\f0da';
    font-weight: 900;
    padding-left: 5px;
    /*color: gray;*/
}

.breadcrumb li:last-child:after {
    content: '';
}

.breadcrumb li a {
    text-decoration: none;
    /*color: gray;*/
}

.breadcrumb li a:hover {
    text-decoration: underline;
}
</style>
<nav class="breadcrumb px-2 py-1 bg-main text-white text-xs overflow-x-auto">
    <li><a href="{{route('home')}}"><i class="fas fa-home"></i></a></li> 
    {{ $slot }}
</nav>

貼り付けの注意点 ~色が反映されない?~

今回はCSSフレームワークとして”TailWind”を利用しています。そのため、ul要素のクラス部分にて背景色と文字色とpaddingの設定を行っているため、色とpaddingが反映されていない人はstyleで直接指定するか、bootstrapを利用している方はbootstrapの書き方に変更してください。

カスタマイズポイント

今回はstyle要素を一つのファイルにまとめましたが、共通的に利用しているcssファイルに移してもらって構いません。

家のアイコンを変えたい場合は、.breadcrumb li:first-child a:beforeを修正してください。

パンくずリストを表示する

早速表示させてみましょう。

好きなbladeファイルに以下を記述してください。

<x-breadcrumb>
    <li><a href="#">カテゴリ1-1</a></li>
    <li><a href="#">カテゴリ1-2</a></li>
</x-breadcrumb>

すると完成イメージのようなものが出力されるはずです。

あとは微修正していただければ使えると思います。

パンくずリスト完成!

うまく作れましたか?

こんなエラーが出た!のような場合はコメントしていただければ必ず回答しますので、ぜひお気軽に質問してくださいね。

暇な時間にU-NEXT!

今なら無料1ヶ月無料トライアル600円分の有料コンテンツを使えるチャンス!

見放題作品が31日間無料で視聴可能最新作はレンタル配信!

600円分のポイントプレゼント!DVD・ブルーレイよりも先行配信の最新作、放送中ドラマの視聴や最新コミックの購入に使用可能

 

追加料金なく、80誌以上の雑誌が読み放題

 

WEB開発 プログラミング
スポンサーリンク
uediveをフォローする
SEの休日

コメント

タイトルとURLをコピーしました