Teilen Sie ein paar coole Blade-Komponenten in Laravel 7

Formularschaltflächen

Wenn Sie beim Entwickeln einer Anwendung umleiten und andere Vorgänge ausführen möchten, können Sie keine einfachen Links verwenden. GET-Anfragen sind anfällig für CSRF-Angriffe.

Stattdessen sollten Sie andere HTTP-Anfragemethoden verwenden, indem Sie Formulare und CSRF-Validierung verwenden. Unten finden Sie eine FormButton-Komponente, die eine Schaltfläche in einem Formular generiert.

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

Sie können es so verwenden:

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

Navigationsleiste

Fast jede Anwendung muss eine Art Navigation anzeigen, wie Menüs und Optionen Karte. Diese Navigationslinks sind dynamisch, sodass Benutzer wissen, wo sie sich in der Anwendung befinden.

Das Folgende ist die navigationLink-Komponente, die Links anzeigen kann. Es stellt sich automatisch als aktiv ein, wenn es mit der aktuell angeforderten URL startet.

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

Hier erfahren Sie, wie Sie es mit mailcoach.app verwenden.

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

So funktioniert das Rendern.

Formularelemente

Die Blade-Komponente rendert adaptive Formularelemente. Werfen wir einen Blick darauf, wie die textField-Komponente in Mailcoach verwendet wird.

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

Wie Sie sehen können, werden die Beschriftungen, Formularfelder und mögliche Fehler gerendert. So wird es verwendet.

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

Das obige ist der detaillierte Inhalt vonTeilen Sie ein paar coole Blade-Komponenten in Laravel 7. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!