Share a few cool Blade components in Laravel 7

Form Button

When developing an application, if you want to redirect and do some other operations, you cannot use simple links. GET requests are vulnerable to CSRF attacks.

Instead, you should use other HTTP request methods, using forms and CSRF validation. Below is a FormButton component that generates a button in a form.

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

You can use it like this:

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

Almost any application needs to display some kind of navigation, such as menus and options Card. These navigation links are dynamic so users know where they are in the application.

The following is the navigationLink component that can display links. It automatically sets itself as active when it starts with the currently requested 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>

Here's how to use it with 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>

This is how rendering works.

Form elements

The Blade component will render adaptive form elements. Let's take a look at how the textField component is used in 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>

As you can see, it renders the labels, form fields and possible errors. This is how it is used.

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

The above is the detailed content of Share a few cool Blade components in Laravel 7. For more information, please follow other related articles on the PHP Chinese website!