例では、laravel でナビゲーションバー効果を実装する方法を説明します。-Laravel-php.cn

例では、laravel でナビゲーションバー効果を実装する方法を説明します。

PHPz

リリース： 2023-04-13 11:30:34

オリジナル

734 人が閲覧しました

Laravel は非常に人気のある PHP フレームワークであり、ナビゲーションバーの実装は Web アプリケーションを実装するために不可欠な機能です。この記事では、Laravelでナビゲーションバーを実装する方法を紹介します。

1. Laravel のインストールと設定
Laravel を使用してナビゲーションバーの実装を開始する前に、Laravel のインストールと設定を完了する必要があります。ここではあまり詳しく説明しませんが、学習が必要なユーザーは公式ドキュメントを参照してください。

2. ナビゲーションバーの作成
Laravel では、カスタムコンポーネントを通じてナビゲーションバーを実装できます。コンポーネントは、何度でも使用できる再利用可能なビューコードです。カスタムコンポーネントの作成方法を見てみましょう。

1. カスタムコンポーネントビューの作成
まず、ナビゲーションコンポーネントビュー navbar.blade.php ファイルを resource/views/components に作成します。このファイルには、ナビゲーションバー用の基本的な HTML マークアップを追加し、表示する必要があるコンテンツを追加します。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Laravel</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

ログイン後にコピー

このファイルでは、Web サイトにナビゲーションバーを簡単に表示できるように、NAV タグを追加し、スタイル、スタイルクラス、ナビゲーションリンクを設定します。

2. カスタムコンポーネントの登録
次に、resources/views/components フォルダーに Navbar.php という名前の PHP クラスを作成しましょう。このクラスには、ビューからコンポーネントを構築することを表現するために使用される create メソッドがあり、同時にプライベートデータと構成をそこに渡すことができます。

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Navbar extends Component
{
    public function __construct()
    {
        //
    }

    public function render()
    {
        return view(&#39;components.navbar&#39;);
    }
}

ログイン後にコピー

コンポーネントのビューが定義されたので、Laravel がコンポーネントを識別する方法を認識できるように、コンポーネントを laravel に登録する必要があります。

app/Providers/AppServiceProvider.php ファイルを開き、ブートメソッドでビューコンポジターを使用してコンポーネントを登録します。

use Illuminate\Support\Facades\Blade;
use App\View\Components\Navbar;

public function boot()
{
    Blade::component(&#39;navbar&#39;, Navbar::class);
}

ログイン後にコピー

これで、アプリケーションに「」という名前のコンポーネントができました。 navbar」は、どのビューでもマーカーとして使用できます。

3. ナビゲーションバーをビューに追加します。
コンポーネントが定義されたので、それをビューに追加する必要があります。 app/resources/views/layouts/app.blade.php ファイルを開き、次のコードを追加します:

<x-navbar />
<div class="container py-4">
  @yield('content')
</div>

ログイン後にコピー

navbar コンポーネントはページヘッダーに含まれています。HEAD セクションに追加されたこのコード行は、Laravel に指示します。このコンポーネントをに挿入します。

4. ビュー内のナビゲーションバー
最後に、routes/web.php ファイルにいくつかのルートを追加して、単純な Web サイトを構築し、そこにナビゲーションバーを追加します。具体的なコードは次のとおりです。

Route::get('/', function () {
    return view('welcome');
});

Route::get('/about', function () {
    return view('about');
});

Route::get('/contact', function () {
    return view('contact');
});

ログイン後にコピー

完全なナビゲーションバーコードは次のとおりです。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Laravel</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

ログイン後にコピー

ナビゲーションバーの実装が成功すると、Web サイトの各ページの上部にナビゲーションバーが表示されます。ウェブサイトのナビゲーションをより高度で明確なロジックにします。

概要
上記のカスタムコンポーネントの実装を通じて、Laravel でナビゲーションバーを簡単に作成し、Web サイトをより読みやすくアクセスしやすくすることができます。 Laravel開発の初心者でも、ナビゲーションバーを自分で簡単に実装できます。

以上が例では、laravel でナビゲーションバー効果を実装する方法を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。