Share a few cool Blade components in Laravel 7-Laravel-php.cn

Share a few cool Blade components in Laravel 7

Guanhui

Release： 2020-05-06 09:08:30

forward

2876 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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

Copy after login

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!