フォームボタン
アプリケーションを開発する際、リダイレクトなどの操作を行いたい場合、単純なリンクは使用できません。 GET リクエストは CSRF 攻撃に対して脆弱です。
代わりに、フォームと CSRF 検証を使用した他の HTTP リクエスト メソッドを使用する必要があります。以下は、フォーム内にボタンを生成する FormButton コンポーネントです。
{{-- content of formButton.blade.php --}} <form method="POST" action="{{ $action }}"> @csrf @method($method ?? 'POST') <button type="submit" class="{{ $class ?? '' }}" > {{ $slot }} </button> </form>
次のように使用できます:
// perform an action <x-form-button :action="route('doSomething')"> Do something </x-form-button> // perform an action with another HTTP verb <x-form-button :action="route('model.delete', $model)" method="delete"> Delete model </x-form-button>
ナビゲーション バー
ほとんどすべてのアプリケーションは、メニューやメニューなど、何らかのナビゲーションを表示する必要があります。オプションカード。これらのナビゲーション リンクは動的であるため、ユーザーはアプリケーション内のどこにいるのかを知ることができます。
以下はリンクを表示できるnavigationLinkコンポーネントです。現在リクエストされている URL で開始すると、自動的に自身をアクティブに設定します。
{{-- content of navigationLink.blade.php --}} <li class="{{ \Illuminate\Support\Str::startsWith(request()->url(), $href) ? 'active' : '' }}"> <a href="{{ $href }}" @isset($dataDirtyWarn) data-dirty-warn @endisset> {{ $slot }} </a> </li>
mailcoach.app で使用する方法は次のとおりです。
<nav class="tabs"> <ul> <x-navigation-item :href="route('mailcoach.emailLists.subscribers', $emailList)"> <x-icon-label icon="fa-users" text="Subscribers" :count="$emailList->subscribers()->count() ?? 0" /> </x-navigation-item> <x-navigation-item :href="route('mailcoach.emailLists.tags', $emailList)"> <x-icon-label icon="fa-tag" text="Tags" /> </x-navigation-item> <x-navigation-item :href="route('mailcoach.emailLists.segments', $emailList)"> <x-icon-label icon="fa-chart-pie" text="Segments" /> </x-navigation-item> <x-navigation-item :href="route('mailcoach.emailLists.settings', $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) ? 'label label-required' : 'label' }}" for="{{ $name }}"> {{ $label }} </label> @endif @error($name) <p class="form-error" role="alert">{{ $message }}</p> @enderror <input autocomplete="off" type="{{ $type ?? 'text' }}" name="{{ $name }}" id="{{ $name }}" class="input" placeholder="{{ $placeholder ?? '' }}" value="{{ old($name, $value ?? '') }}" {{ ($required ?? false) ? 'required' : '' }} > </div>
ご覧のとおり、ラベル、フォーム フィールド、および考えられるエラーが表示されます。このように使用されます。
rree以上がLaravel 7 のクールな Blade コンポーネントをいくつか共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。