分享幾個 Laravel 7 中很酷的 Blade 組件-Laravel-PHP中文網

分享幾個 Laravel 7 中很酷的 Blade 組件

Guanhui

發布： 2020-05-06 09:08:30

轉載

2974 人瀏覽過

表單按鈕

開發一個應用程式時，如果您希望重定向並且做一些其他操作時，不能使用簡單的連結。 GET 請求很容易受到 CSRF 攻擊。

相反，您應該使用其他 HTTP 請求方式，使用表單和 CSRF 驗證。下面是一個在表單中產生按鈕的 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>

登入後複製

就像你所看到的一樣，它渲染了標籤、表單欄位和可能的錯誤。這就是它的用法。

<x-text-field label="Name" name="name" required />

登入後複製

以上是分享幾個 Laravel 7 中很酷的 Blade 組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！