Laravel 7 のクールな Blade コンポーネントをいくつか共有します

フォームボタン

アプリケーションを開発する際、リダイレクトなどの操作を行いたい場合、単純なリンクは使用できません。 GET リクエストは CSRF 攻撃に対して脆弱です。

代わりに、フォームと CSRF 検証を使用した他の HTTP リクエスト メソッドを使用する必要があります。以下は、フォーム内にボタンを生成する FormButton コンポーネントです。

{{-- content of formButton.blade.php --}}
<form method="POST" action="{{ $action }}">
    @csrf
    @method($method ?? &#39;POST&#39;)
        <button
            type="submit"
            class="{{ $class ?? &#39;&#39; }}"
        >
            {{ $slot }}
        </button>
</form>

次のように使用できます:

// perform an action
<x-form-button :action="route(&#39;doSomething&#39;)">
   Do something
</x-form-button>
// perform an action with another HTTP verb
<x-form-button :action="route(&#39;model.delete&#39;, $model)" method="delete">
   Delete model
</x-form-button>

ナビゲーション バー

ほとんどすべてのアプリケーションは、メニューやメニューなど、何らかのナビゲーションを表示する必要があります。オプションカード。これらのナビゲーション リンクは動的であるため、ユーザーはアプリケーション内のどこにいるのかを知ることができます。

以下はリンクを表示できるnavigationLinkコンポーネントです。現在リクエストされている URL で開始すると、自動的に自身をアクティブに設定します。

{{-- content of navigationLink.blade.php --}}
<li class="{{ \Illuminate\Support\Str::startsWith(request()->url(), $href) ? &#39;active&#39; : &#39;&#39;  }}">
    <a href="{{ $href }}" @isset($dataDirtyWarn) data-dirty-warn @endisset>
        {{ $slot }}
    </a>
</li>

mailcoach.app で使用する方法は次のとおりです。

 <nav class="tabs">
        <ul>
            <x-navigation-item :href="route(&#39;mailcoach.emailLists.subscribers&#39;, $emailList)">
                <x-icon-label icon="fa-users" text="Subscribers" :count="$emailList->subscribers()->count() ?? 0" />
            </x-navigation-item>
            <x-navigation-item :href="route(&#39;mailcoach.emailLists.tags&#39;, $emailList)">
                <x-icon-label icon="fa-tag" text="Tags" />
            </x-navigation-item>
            <x-navigation-item :href="route(&#39;mailcoach.emailLists.segments&#39;, $emailList)">
                <x-icon-label icon="fa-chart-pie" text="Segments" />
            </x-navigation-item>
            <x-navigation-item :href="route(&#39;mailcoach.emailLists.settings&#39;, $emailList)">
                <x-icon-label icon="fa-cog" text="Settings" />
            </x-navigation-item>
        </ul>
    </nav>

これがレンダリングの仕組みです。

フォーム要素

Blade コンポーネントはアダプティブ フォーム要素をレンダリングします。 textField コンポーネントが Mailcoach でどのように使用されるかを見てみましょう。

<div class="form-row">
    @if($label ?? null)
    <label class="{{ ($required ?? false) ? &#39;label label-required&#39; : &#39;label&#39; }}" for="{{ $name }}">
        {{ $label }}
    </label>
    @endif
    @error($name)
        <p class="form-error" role="alert">{{ $message }}</p>
    @enderror
    <input
        autocomplete="off"
        type="{{ $type ?? &#39;text&#39; }}"
        name="{{ $name }}"
        id="{{ $name }}"
        class="input"
        placeholder="{{ $placeholder ?? &#39;&#39; }}"
        value="{{ old($name, $value ?? &#39;&#39;) }}"
        {{ ($required ?? false) ? &#39;required&#39; : &#39;&#39; }}
    >
</div>

ご覧のとおり、ラベル、フォーム フィールド、および考えられるエラーが表示されます。このように使用されます。

rree

以上がLaravel 7 のクールな Blade コンポーネントをいくつか共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。