Laravel 7의 몇 가지 멋진 블레이드 구성 요소를 공유하세요

양식 버튼

애플리케이션을 개발할 때 리디렉션하고 다른 작업을 수행하려는 경우 단순 링크를 사용할 수 없습니다. 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>

Navigation Bar

거의 모든 애플리케이션은 메뉴 및 탭과 같은 일종의 탐색 기능을 표시해야 합니다. 이러한 탐색 링크는 동적이므로 사용자는 애플리케이션에서 링크의 위치를 ​​알 수 있습니다.

다음은 링크를 표시할 수 있는 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 구성 요소는 적응형 양식 요소를 렌더링합니다. Mailcoach에서 textField 구성 요소가 어떻게 사용되는지 살펴보겠습니다.

<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>

보시다시피 라벨, 양식 필드 및 가능한 오류를 렌더링합니다. 이것이 사용되는 방법입니다.

아아아아

위 내용은 Laravel 7의 몇 가지 멋진 블레이드 구성 요소를 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!