Partagez quelques composants Blade sympas dans Laravel 7

Boutons de formulaire

Lors du développement d'une application, si vous souhaitez rediriger et effectuer d'autres opérations, vous ne pouvez pas utiliser de simples liens. Les requêtes GET sont vulnérables aux attaques CSRF.

Au lieu de cela, vous devez utiliser d'autres méthodes de requête HTTP, en utilisant des formulaires et la validation CSRF. Vous trouverez ci-dessous un composant FormButton qui génère un bouton dans un formulaire.

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

Vous pouvez l'utiliser comme ceci :

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

Barre de navigation

Presque toutes les applications doivent afficher une sorte de navigation, comme des menus et des options. Carte. Ces liens de navigation sont dynamiques afin que les utilisateurs sachent où ils se trouvent dans l'application.

Ce qui suit est le composant navigationLink qui peut afficher des liens. Il se définit automatiquement comme actif lorsqu'il démarre avec l'URL actuellement demandée.

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

Voici comment l'utiliser avec 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>

C'est ainsi que fonctionne le rendu.

Éléments de formulaire

Le composant Blade rendra les éléments de formulaire adaptatifs. Jetons un coup d'œil à la manière dont le composant textField est utilisé dans 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>

Comme vous pouvez le voir, il restitue les étiquettes, les champs de formulaire et les erreurs possibles. C'est ainsi qu'il est utilisé.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!