laravel form components
vel 10 support (#28)
Gagnez du temps et profitez d'un ensemble de composants de formulaire dynamiques, prêts à l'emploi et entièrement personnalisables.
Les composants sont compatibles en direct et peuvent être utilisés avec les cadres d'interface utilisateur suivants:
Vous avez trouvé ce package utile? Veuillez envisager de soutenir mon travail!
| Laravel | Vive | Php | Emballer |
|---|---|---|---|
| ^ 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 |
Appelez simplement les composants dont vous avez besoin dans vos vues et laissez ce package prendre soin de la partie chronophage de la génération HTML.
< 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 >Et affiche ces composants:
Vous pouvez installer le package via le compositeur:
composer require okipa/laravel-form-componentsVous pouvez publier le fichier de configuration avec:
php artisan vendor:publish --tag=form-components:configParmi ses configurations, ce package vous permet de choisir quel framework d'interface utilisateur sera utilisé.
Veuillez noter que vous devrez installer et configurer le framework d'interface utilisateur que vous souhaitez utiliser avant d'utiliser ce package.
Vous pouvez publier les vues du package pour les personnaliser si nécessaire:
php artisan vendor:publish --tag=form-components:viewsLes composants peuvent être enveloppés dans un composant de formulaire.
Si aucune méthode personnalisée n'est définie, une méthode GET sera définie par défaut.
Les champs de méthode CSRF et d'usurpation cachés seront générés automatiquement en cas de besoin, selon la méthode du formulaire défini:
@method() , de déclarer votre PUT , PATCH ou DELETE l'action directement dans l'attribut action@csrf() , elle sera automatiquement déclarée avec POST , PUT , PATCH et DELETE des actions Les formulaires sont générés avec un attribut HTML novalidate par défaut, qui empêche la validation du navigateur en faveur d'une validation côté serveur (ce qui est une bonne pratique pour les questions de sécurité).
< x:form::form method = " PUT " >
< x:form::input name = " first_name " />
...
</ x:form::form >Ajoutez des entrées et TextArea dans vos formulaires.
Si vous ne définissez pas de type personnalisé sur une entrée, il prendra un type text par défaut.
Les entrées de radio, de case à cocher et de bouton doivent être utilisées avec leurs propres composants en raison de leur comportement différent.
Le composant TextArea peut être utilisé de la même manière qu'un composant d'entrée mais sans déclarer de type.
< 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 " />Définissez les composants sélectionnés dans vos formulaires.
Auto Générer des options en fournissant un tableau de valeur / étiquette associatif.
Les éléments de sélection HTML nativement n'acceptent pas les attributs d'espace réservés, mais le composant sélectionné vous permet de gérer une option de type d'espace réservé est admis aux autres. Cet espace réservé se comportera comme pour les autres composants.
Par défaut, cette option de sélection de l'espace réservé est sélectionnée, désactivée et masquée. Cependant, vous pourrez lui permettre d'être sélectionné au cas où vous auriez besoin de définir un champ nullable par exemple. Pour ce faire, ajoutez simplement l'attribut allowPlaceholderToBeSelected à votre composant.
En mode multiple, ce package s'occupera de la conversion du nom en nom de tableau, vous n'avez donc pas à l'ajouter manuellement.
@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[] --}}La case à cocher, le commutateur à bascule et les composants radio sont disponibles pour que vous puissiez utiliser.
Étant donné que les entrées radio ne sont jamais utilisées seules, vous devrez déclarer un attribut group requis lorsque vous les utilisez, en attendant un tableau associatif de valeur / étiquette à partir desquels les champs radio seront générés.
En ce qui concerne les entrées de commutation à cocher et à basculer, vous pourrez les utiliser en mode simple ou en groupe. Pour les utiliser en mode groupe, vous devrez également déclarer un attribut group .
En mode groupe, ce package s'occupera de la conversion du nom en nom de tableau, vous n'avez donc pas à l'ajouter manuellement.
Si vous souhaitez afficher ces composants d'entrée en ligne, définissez simplement un attribut inline .
< 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 --}}Les composants des bouton de soumettre et de lier sont disponibles.
Le bouton Soumettre vous permet de déclencher un formulaire et fournira un corps par défaut __('Submit') si aucun n'est défini.
Le bouton de lien vous permet de définir des actions comme Back ou Cancel dans vos formulaires en fournissant un lien avec un écran de type bouton. Comme ce composant est un lien HTML, il fournira un titre par défaut en analysant son corps.
Par défaut, les deux composants définiront une couleur d'arrière-plan de base si aucun attribut de classe personnalisé n'est défini.
< 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 >Les composants fournis sont construits à l'aide de composants de lame.
Suivant le fonctionnement des composants de la lame, vous pouvez définir tous les attributs et classes HTML:
Définissez les ID composants comme vous le feriez pour n'importe quel élément HTML.
Si aucun ID personnalisé n'est défini, un ID sera généré à l'aide des valeurs Kebab Based <type>-<name> .
< 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` --}}Par défaut, tous les composants d'entrée déclareront une marge inférieure afin de se positionner correctement dans un formulaire.
Vous devrez parfois désactiver cette marge inférieure par défaut: vous pourrez le faire en définissant l'attribut marginBottom à false .
< 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 --}}Vous pouvez définir des étiquettes sur tous les composants d'entrée (sauf pour la radio).
Si aucune étiquette personnalisée n'est définie, les étiquettes prendront la valeur par défaut __('validation.attributes.<name>) .
Après le même comportement, tous les composants d'entrée qui permettent l'utilisation d'un placeholder (sélectionné inclus) fourniront un espace réservé par défaut qui prendra la valeur label .
Vous pouvez remplacer cette valeur par défaut en définissant un espace réservé personnalisé.
Vous pouvez également masquer l'étiquette et l'espace réservé générées automatiquement par eux à false .
< 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 --}}Ce package vous permet d'activer ou de désactiver l'affichage des étiquettes flottantes.
Vous pouvez définir le comportement global de l'étiquette flottante avec config('form-components.floating_label') config.
Vous pourrez remplacer ce comportement global au niveau de la forme pour tous les composants contenus.
< 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 >Enfin, vous pourrez également remplacer tous les autres comportements définis sur les composants eux-mêmes.
< x:form::input name = " first_name " :floatingLabel = " true " /> Vous pouvez définir des addons HTML prepend et append sur les composants d'entrée et de TextArea.
< 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> " />Remarque: vous pouvez utiliser HTML directement au lieu de composants pour la gestion complexe d'Addon.
Vous pouvez lier des modèles, objets, collections ou tableaux éloquents afin de automatiquement des valeurs de composants liés à automatiquement.
Les données de liaison sur le composant de formulaire déclenchent la liaison de tous ses composants contenus.
Vous pouvez lier les données directement sur un composant et remplacer la liaison de formulaire.
En cas d'erreur de validation, les composants seront repeuplés par des valeurs anciennes qui remplaceront les valeurs liées.
Pour un cas d'utilisation spécifique, vous pouvez également utiliser @bind($boundDataBatch) et les directives de la lame @endbind pour lier un groupe de composants.
@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 >La liaison des données peut être remplacée en définissant des valeurs personnalisées sur les composants.
@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 >Les composants pourront afficher ou masquer leurs statuts de réussite / erreur et de message d'erreur lorsqu'une erreur de validation est déclenchée:
Vous pouvez contrôler ce comportement à différents niveaux:
config('form-components.display_validation_success') et 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 >Vous pouvez également personnaliser le sac d'erreur qui doit être utilisé pour déterminer les statuts de succès / d'erreur des composants et les messages d'erreur sur les composants du formulaire.
< 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 >Aidez les utilisateurs et affichez des instructions supplémentaires sous vos composants en ajoutant des légendes.
< x:form::input name = " name " caption = " Please fill this input with your full name. " /> Activez le mode multilingue sur les composants input et textarea pour bénéficier des fonctionnalités suivantes:
name="description" sera transformée en name="description[<locale>]"__(validation.attributes.name) La traduction utilisée pour générer un étiquette et un message d'erreur par défaut seront annexés avec (<LOCALE>) < x:form::input name = " name " :locales = " ['fr', 'en'] " />
< x:form::textarea name = " description " :locales = " ['fr', 'en'] " />Les composants de formulaire et d'entrée sont compatibles avec LiveWire.
Au lieu de définir un attribut wire:model HTML sur chaque composant que vous souhaitez câbler comme vous le feriez sans ce package, ici vous devrez simplement définir un attribut HTML wire="<optional-modifier>" HTML pour faire fonctionner cela.
Chaque composant d'entrée câblé utilisera son propre attribut name et le convertira en un wire:model="<name>" un.
< 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 >En suivant la même logique, vous pouvez également câbler les composants d'entrée directement à partir du formulaire dans lequel ils sont contenus.
< 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 > Pour un cas d'utilisation spécifique, vous pouvez également utiliser le @wire($modifier) et les directives de lame @endwire pour câbler un groupe de composants avec un modificateur LiveWire spécifique.
< 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 Veuillez consulter Changelog pour plus d'informations sur ce qui a changé récemment.
Veuillez consulter la contribution pour plus de détails.
Veuillez consulter notre politique de sécurité sur la façon de signaler les vulnérabilités de sécurité.
La licence MIT (MIT). Veuillez consulter le fichier de licence pour plus d'informations.
