laravel form components
vel 10 support (#28)
Sparen Sie Zeit und nutzen Sie eine Reihe von dynamischen, fertigen und vollständig anpassbaren Formularkomponenten.
Komponenten sind Livewire -kompatibel und können mit den folgenden UI -Frameworks verwendet werden:
Fanden dieses Paket hilfreich? Bitte erwägen Sie, meine Arbeit zu unterstützen!
| Laravel | Livewire | Php | Paket |
|---|---|---|---|
| ^9.0 | ^10.0 | ^2.0 | 8.1.* | 8.2.* | ^1.2 |
| ^8.0 | ^9.0 | ^2.0 | ^8.1 | ^8.2 | ^1.1 |
| ^8.0 | ^9.0 | ^2.0 | ^8.0 | ^8.1 | ^1.0 |
Rufen Sie einfach die Komponenten an, die Sie in Ihren Ansichten benötigen, und lassen Sie dieses Paket den zeitaufwändigen Teil der HTML-Generation kümmern.
< x:form::form class = " row " method = " PUT " :action = " route('user.update', $user) " :bind = " $user " >
< div class = " col-md-6 " >
< x:form::input name = " name " />
< x:form::input type = " email " name = " email " />
< x:form::textarea name = " biography " :locales = " ['fr', 'en'] " />
</ div >
< div class = " col-md-6 " >
< x:form::select name = " hobbies " :options = " [1 => 'Sport', 2 => 'Cinema', 3 => 'Literature', 4 => 'Travel'] " caption = " Select your favorite hobbies. " multiple />
< x:form::checkbox name = " technologies " :group = " [1 => 'Laravel', 2 => 'Bootstrap', 3 => 'Tailwind', 4 => 'Livewire'] " inline />
< x:form::radio name = " gender " :group = " [1 => 'Male', 2 => 'Female', 3 => 'Other'] " inline />
< x:form::toggle-switch name = " active " />
</ div >
< div class = " col-12 mt-2 " >
< x:form::button .link class = " btn-secondary me-3 " > {{ __ ( ' Cancel ' ) } } </ x:form::button .link >
< x:form::button .submit />
</ div >
</ x:form:form >Und lassen Sie diese Komponenten angezeigt:
Sie können das Paket über Komponist installieren:
composer require okipa/laravel-form-componentsSie können die Konfigurationsdatei mit:
php artisan vendor:publish --tag=form-components:configMit diesem Paket können Sie unter den Konfigurationen auswählen, welches UI -Framework verwendet wird.
Bitte beachten Sie, dass Sie das UI -Framework installieren und konfigurieren müssen, das Sie verwenden möchten, bevor Sie dieses Paket verwenden.
Sie können die Paketansichten veröffentlichen, um sie bei Bedarf anzupassen:
php artisan vendor:publish --tag=form-components:viewsKomponenten können in eine Formkomponente eingewickelt werden.
Wenn keine benutzerdefinierte Methode festgelegt ist, wird standardmäßig eine GET -Methode festgelegt.
Versteckte CSRF- und Spoofing -Methodenfelder werden nach Bedarf automatisch generiert, gemäß der definierten Formularmethode:
@method() -Richtlinie definieren, Ihre PUT , PATCH -oder DELETE Aktion direkt im action deklarieren@csrf() -Richtlinie definieren. Sie wird automatisch mit POST , PUT , PATCH und DELETE Aktionen deklariert Formulare werden mit einem Standard novalidate HTML-Attribut generiert, wodurch die Validierung der Browser zugunsten einer serverseitigen Validierung (die eine gute Praxis für Sicherheitsfragen darstellt).
< x:form::form method = " PUT " >
< x:form::input name = " first_name " />
...
</ x:form::form >Fügen Sie Inputs und Textbereich in Ihre Formulare hinzu.
Wenn Sie keinen benutzerdefinierten Typ auf eine Eingabe festlegen, wird ein text benötigt.
Funk-, Kontrollkästchen und Schaltflächeneingänge müssen aufgrund ihres unterschiedlichen Verhaltens mit ihren eigenen Komponenten verwendet werden.
Die TextArea -Komponente kann genauso wie eine Eingangskomponente verwendet werden, ohne jedoch einen Typ zu deklarieren.
< x:form::input type = " file " name = " avatar " />
< x:form::input name = " first_name " />
< x:form::input type = " email " name = " email " />
...
< x:form::textarea name = " description " />Stellen Sie die Auswahl von Komponenten in Ihren Formularen fest.
Automatische Optionen generieren, indem Sie ein assoziatives Wert/ein Label -Array bereitstellen.
HTML-Auswahlelemente akzeptieren nativ keine Platzhalterattribute, aber die ausgewählte Komponente ermöglicht es Ihnen, eine platthalterähnliche Option zu verarbeiten, die auf die anderen vorbereitet werden. Dieser Platzhalter wird sich wie für die anderen Komponenten verhalten.
Standardmäßig wird diese Option für ausgewählte Platzhalter ausgewählt, deaktiviert und versteckt. Sie können jedoch zulassen, dass es ausgewählt wird, falls Sie beispielsweise ein nullable Feld festlegen müssen. Fügen Sie dazu Ihre Komponente einfach das Attribut allowPlaceholderToBeSelected hinzu.
Im mehrfachen Modus kümmert sich dieses Paket um das Konvertieren des Namens in einen Array -Namen, sodass Sie ihn nicht manuell hinzufügen müssen.
@php ( $options = [ 1 => ' Laravel ' , 2 => ' Bootstrap ' , 3 => ' Tailwind ' , 4 => ' Livewire ' ] )
< x:form::select name = " hobby " placeholder = " What is your hobby prefered hobby? " :options = " $options " selected = " 1 " />
< x:form::select name = " hobbies " :options = " $options " :selected = " [2, 3] " allowPlaceholderToBeSelected multiple /> {{-- You'll be able to selected the placeholder and the name will be converted to hobbies[] --}}Kontrollkästchen, Toggle -Switch und Radiokomponenten können Sie verwenden.
Da Funkeingänge nie allein verwendet werden, müssen Sie bei der Verwendung ein erforderliches group deklarieren und auf ein Wert/Label -assoziatives Array warten, aus dem die Funkfelder generiert werden.
In Bezug auf das Kontrollkästchen und die Eingänge des Schalters können Sie sie im Einzel- oder Gruppenmodus verwenden. Um sie im Gruppenmodus zu verwenden, müssen Sie auch ein group deklarieren.
Im Gruppenmodus kümmert sich dieses Paket um das Konvertieren des Namens in einen Array -Namen, sodass Sie ihn nicht manuell hinzufügen müssen.
Wenn Sie diese Eingangskomponenten inline anzeigen möchten, definieren Sie einfach ein inline -Attribut.
< x:form::checkbox name = " newsletter_subscription " :checked = " true " /> {{-- 1 generated checkbox --}}
< x:form::checkbox name = " technologies " :group = " ['laravel' => 'Laravel', 'bootstrap' => 'Bootstrap'] " :checked = " laravel " /> {{-- 2 generated checkboxes --}}
< x:form::toggle-switch name = " active " :checked = " false " inline /> {{-- 1 generated toggle switch with inline mode --}}
< x:form::toggle-switch name = " technologies " :group = " ['tailwind' => 'Tailwind', 'livewire " => 'Livewire']" :checked="livewire"/> {{-- 2 generated toggle switches --}}
< x:form::radio name = " gender " :group = " ['female' => 'Female', 'male' => 'Male'] " :checked = " male " inline /> {{-- 2 generated radios with inline mode --}}Die Komponenten der Senden- und Link -Schaltfläche sind verfügbar.
Mit der Schaltfläche "Senden" können Sie ein Formular auslösen und ein Standard __('Submit') Körper bereitstellen, wenn keiner definiert ist.
Mit der Link-Schaltfläche können Sie Aktionen wie Back oder Cancel in Ihren Formularen festlegen, indem Sie einen Link mit einer Schaltflächenanzeige angeben. Da diese Komponente ein HTML -Link ist, bietet sie einen Standardtitel, indem der Körper analysiert wird.
Standardmäßig legen beide Komponenten eine Basis -Hintergrundfarbe fest, wenn kein benutzerdefiniertes Klassenattribut definiert ist.
< x:form::form >
...
< div class = " d-grid " >
< x:form::button .submit >Submit this form</ x:form::submit > {{-- Will provide `btn-primary` class with Bootstrap UI --}}
< x:form::button .link class = " btn-secondary " href = " {{ back () } } " > {{-- Will auto-generate `title="Back"` --}}
< i class = " fas fa-undo fa-fw " ></ i >
Back
</ x:form::submit >
</ div >
</ x:form::form >Bereitstellungsbedingte Komponenten werden mit Blattkomponenten erstellt.
Nach der Funktionsweise von Blade -Komponenten können Sie alle HTML -Attribute und -Klassen festlegen:
Definieren Sie Komponenten -IDs wie für jedes HTML -Element.
Wenn keine benutzerdefinierte ID festgelegt ist, wird eine ID mit den Werten des Kebab-Gehäuses <type>-<name> generiert.
< x:form::input id = " custom-id " name = " first_name " /> {{-- Default id: `input-first-name` --}}
< x:form::textarea id = " custom-id " name = " first_name " /> {{-- Default id: `textarea-first-name` --}}Standardmäßig deklarieren alle Eingabekomponenten einen unteren Rand, um sich in Form eines Formulars korrekt zu positionieren.
Manchmal müssen Sie diesen Standard -Untermargen deaktivieren: Sie können dies tun, indem Sie das marginBottom -Attribut auf false einstellen.
< x:form::input name = " first_name " /> {{-- Will declare a bottom margin --}}
< x:form::textarea name = " first_name " :marginBottom = " false " /> {{-- Will not declare any bottom margin --}}Sie können Etiketten in allen Eingangskomponenten (mit Ausnahme von Radio) definieren.
Wenn keine benutzerdefinierte Beschriftung definiert ist, nehmen die Beschriftungen __('validation.attributes.<name>) Standardwert.
Nach dem gleichen Verhalten liefern alle Eingabekomponenten, die die Verwendung eines placeholder (ausgewählte) zulässt, einen Standard -Platzhalter, der den label einnimmt.
Sie können diesen Standardwert überschreiben, indem Sie einen benutzerdefinierten Platzhalter festlegen.
Sie können auch automatisch generiertes Etikett und Platzhalter vor ihnen auf false verbergen.
< x:form::input name = " first_name " label = " First Name " placeholder = " Please fill your first name... " /> {{-- Will display the custom label and placeholder --}}
< x:form::input name = " last_name " :label = " false " :placeholder = " false " /> {{-- Will hide the label and placeholder --}}
< x:form::input type = " tel " name = " phone_number " /> {{-- Will display default auto-generated label and placeholder --}}Mit diesem Paket können Sie schwimmende Etiketten aktivieren oder deaktivieren.
Sie können das Global Floating-Label-Verhalten mit config('form-components.floating_label') config festlegen.
Sie können dieses globale Verhalten auf Formularebene für alle enthaltenen Komponenten überschreiben.
< x:form::form :floatingLabel = " true " >
< x:form::input name = " first_name " /> {{-- Will display a floating label even if it has been disabled in config --}}
</ x:form::form >Schließlich können Sie auch alle anderen definierten Verhaltensweisen für Komponenten selbst überschreiben.
< x:form::input name = " first_name " :floatingLabel = " true " /> Sie können prepend und append von HTML -Addons für Eingabe- und Textbereichskomponenten definieren.
< x:form::input name = " " prepend = " <i class= " fas fa-code fa-fw " ></i> " />
< x:form::input name = " search " append = " <i class= " fas fa-search fa-fw " ></i> " />Hinweis: Sie können HTML direkt anstelle von Komponenten für die Verwaltung des komplexen Addons verwenden.
Sie können eloquente Modelle, Objekte, Sammlungen oder Arrays binden, um gebundene Komponentenwerte zu automatisieren.
Bindungsdaten an der Formkomponente lösen die Bindung aller enthaltenden Komponenten.
Sie können Daten direkt an eine Komponente binden und die Formbindung überschreiben.
Im Falle eines Validierungsfehlers werden Komponenten durch alte Werte neu bevölkert, die gebundene Werte überschreiben.
Für einen bestimmten Anwendungsfall können Sie auch die @bind($boundDataBatch) und die @endbind Blade -Anweisungen verwenden, um eine Gruppe von Komponenten zu binden.
@php
$dataBatch1 = [ ' description ' => ' A wonderful description ' ];
$dataBatch2 = [ ' first_name ' => ' John ' , ' last_name ' => ' Bonham ' ];
@endphp
< x:form::form :bind = " $user " >
< x:form::input type = " email " name = " email " /> {{-- Will set the value from `$user->email` --}}
< x:form::textarea name = " description " :bind = " $dataBatch1 " /> {{-- Will set the value from `$dataBatch1['description`] --}}
@bind ( $dataBatch2 )
< x:form::input name = " first_name " /> {{-- Will set the value from `$dataBatch2['first_name`] --}}
< x:form::input name = " last_name " /> {{-- Will set the value from `$dataBatch2['last_name`] --}}
@endbind
</ x:form::form >Die Datenbindung kann überschrieben werden, indem benutzerdefinierte Werte für Komponenten festgelegt werden.
@php ( $data = [ ' description ' => ' A wonderful description ' ]; )
< x:form::form :bind = " $user " >
...
< x:form::textarea
name = " description "
:bind = " $user "
:value = " $data['description'] " /> {{-- Will set the value from `$data['description`] --}}
</ x:form::form >Komponenten können ihre Erfolgs-/Fehlerstatus- und Fehlermeldungen anzeigen oder ausblenden, wenn ein Validierungsfehler ausgelöst wird:
Sie können dieses Verhalten auf verschiedenen Ebenen steuern:
config('form-components.display_validation_success') und config('form-components.display_validation_failure')< x:form::form displayValidationSuccess = " false " displayValidationFailure = " false " >
< x:form::input type = " email " name = " email " /> {{-- Disabled success/error statuses and error message --}}
< x:form::textarea
name = " description "
displayValidationSuccess = " true "
displayValidationFailure = " true " /> {{-- Enabled success/error statuses and error message --}}
</ x:form::form >Sie können auch die Fehlertasche anpassen, mit der die Erfolgs-/Fehlerstatus und Fehlermeldungen in Formularkomponenten Komponenten ermittelt werden sollten.
< x:form::form errorBag = " form_error_bag " > {{-- Error bag for all components within the form --}}
@errorbag ( ' group_error_bag ' ) {{-- Error bag for a group of components --}}
< x:form::input name = " first_name " />
< x:form::input name = " last_name " />
@enderrorbag
< x:form::input type = " email " name = " email " errorBag = " component_error_bag " /> {{-- Error bag for a specific component --}}
...
</ x:form::form >Helfen Sie Benutzern und zeigen Sie zusätzliche Anweisungen unter Ihren Komponenten an, indem Sie Bildunterschriften hinzufügen.
< x:form::input name = " name " caption = " Please fill this input with your full name. " /> Aktivieren Sie den mehrsprachigen Modus für input und textarea -Komponenten, um von den folgenden Funktionen zu profitieren:
name="description" wird in name="description[<locale>]"__(validation.attributes.name) Übersetzung zur Generierung von Standardkennzeichnungen und Fehlermeldungen werden mit (<LOCALE>) angehängt. < x:form::input name = " name " :locales = " ['fr', 'en'] " />
< x:form::textarea name = " description " :locales = " ['fr', 'en'] " />Form- und Eingangskomponenten sind Livewire-kompatibel.
Anstatt ein wire:model HTML-Attribut für jede Komponente zu definieren, die Sie wie ohne dieses Paket verdrehen möchten, müssen Sie hier nur ein wire="<optional-modifier>" definieren.
Jede kabelgebundene Eingabekomponente verwendet ein eigenes name und konvertiert es in ein gültiges wire:model="<name>" .
< x:form::form wire:submit.prevent = " submit " >
< x:form::input name = " name " /> {{-- Will not be wired --}}
< x:form::input type = " email " name = " email " wire /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
< x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
< x-form::submit />
</ x:form::form >Nach der gleichen Logik können Sie auch Eingangskomponenten direkt von der Form verdrahten, in die sie enthalten sind.
< x-form::form wire:submit.prevent = " submit " wire >
< x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
< x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
< x-form::submit />
</ x:form::form > Für einen bestimmten Anwendungsfall können Sie auch den @wire($modifier) und die @endwire Blade -Direktiven verwenden, um eine Gruppe von Komponenten mit einem bestimmten LiveWire -Modifikator zu verdrahten.
< x-form::form wire:submit.prevent = " submit " wire = " lazy " >
< x-form::input name = " first_name " /> {{-- Will bind the value from the Livewire component `$first_name` property with the `lazy` Livewire modifier --}}
@wire ( ' debounce.150ms ' )
< x-form::input name = " last_name " /> {{-- Will bind the value from the Livewire component `$last_name` property with the `debounce.150ms` Livewire modifier --}}
@endbind
@wire ( null )
< x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
< x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
@endbind
< x-form::submit />
</ x-form::form >composer test Weitere Informationen zu dem, was sich in letzter Zeit geändert hat, finden Sie in ChangeLog.
Weitere Informationen finden Sie unter Beitrag.
Bitte überprüfen Sie unsere Sicherheitsrichtlinien, wie Sie Sicherheitslücken melden können.
Die MIT -Lizenz (MIT). Weitere Informationen finden Sie unter Lizenzdatei.
