laravel form components
vel 10 support (#28)
Ahorre tiempo y aproveche un conjunto de componentes dinámicos, listos para usar y totalmente personalizables.
Los componentes son compatibles con LiveWire y se pueden usar con los siguientes marcos de interfaz de usuario:
¿Encontró este paquete útil? ¡Considere apoyar mi trabajo!
| Laravado | Cable | Php | Paquete |
|---|---|---|---|
| ^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 |
Simplemente llame a los componentes que necesita en sus puntos de vista y deje que este paquete se encargue de la parte de tiempo de generación 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 >Y se muestren estos componentes:
Puede instalar el paquete a través del compositor:
composer require okipa/laravel-form-componentsPuede publicar el archivo de configuración con:
php artisan vendor:publish --tag=form-components:configEntre sus configuraciones, este paquete le permite elegir qué marco de interfaz de usuario utilizará.
Tenga en cuenta que tendrá que instalar y configurar el marco UI que desea usar antes de usar este paquete.
Puede publicar las vistas del paquete para personalizarlas si es necesario:
php artisan vendor:publish --tag=form-components:viewsLos componentes se pueden envolver en un componente de formulario.
Si no se establece un método personalizado, se establecerá un método GET de forma predeterminada.
Los campos ocultos de CSRF y método de falsificación se generarán automáticamente cuando sea necesario, de acuerdo con el método de formulario definido:
@method() , declare su acción PUT , PATCH o DELETE directamente en el Atributo action@csrf() , se declarará automáticamente con acciones POST , PUT , PATCH Y DELETE Los formularios se generan con un atributo HTML novalidate predeterminado, que impide la validación del navegador a favor de una validación del lado del servidor (que es una buena práctica para los asuntos de seguridad).
< x:form::form method = " PUT " >
< x:form::input name = " first_name " />
...
</ x:form::form >Agregue entradas y TextARea a sus formularios.
Si no establece un tipo personalizado en una entrada, tomará un tipo text predeterminado.
Las entradas de radio, casilla de verificación y botones deben usarse con sus propios componentes debido a su comportamiento diferente.
El componente TextAREA se puede usar de la misma manera que un componente de entrada pero sin declarar un tipo.
< 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 " />Establecer componentes Seleccionar en sus formularios.
Auto Genere opciones al proporcionar una matriz de valor/etiqueta asociativa.
Los elementos seleccionados de HTML de forma nativa no aceptan atributos de marcador de posición, sin embargo, el componente Select le permite manejar una opción similar al marcador de posición se prepara a los demás. Este marcador de posición se comportará como para los otros componentes.
De manera predeterminada, esta opción Seleccionar marcador de posición está seleccionada, deshabilitada y oculta. Sin embargo, podrá permitir que se seleccione en caso de que necesite establecer un campo nullable , por ejemplo. Para hacer eso, simplemente agregue el atributo de allowPlaceholderToBeSelected a su componente.
En modo múltiple, este paquete se encargará de convertir el nombre en un nombre de matriz, por lo que no tiene que agregarlo manualmente.
@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 casilla de verificación, el interruptor de palanca y los componentes de radio están disponibles para que lo use.
Debido a que las entradas de radio nunca se usan solo, tendrá que declarar un atributo group requerido al usarlas, esperando una matriz asociativa de valor/etiqueta desde la cual se generarán los campos de radio.
Con respecto a las entradas de interruptor de casilla de verificación y alternar, podrá usarlas en modo de grupo o en modo de grupo. Para usarlos en modo de grupo, también tendrá que declarar un atributo group .
En el modo de grupo, este paquete se encargará de convertir el nombre en un nombre de matriz, por lo que no tiene que agregarlo manualmente.
Si desea mostrar estos componentes de entrada en línea, simplemente defina un atributo 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 --}}Enviar y los componentes del botón de enlace están disponibles.
El botón Enviar le permite activar un formulario y proporcionará un cuerpo __('Submit') predeterminado si no se define ninguno.
El botón de enlace le permite establecer acciones como Back o Cancel en sus formularios proporcionando un enlace con una pantalla similar a un botón. Como este componente es un enlace HTML, proporcionará un título predeterminado al analizar su cuerpo.
Por defecto, ambos componentes establecerán un color de fondo base si no se define ningún atributo de clase personalizado.
< 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 >El componente proporcionado se construye con componentes de cuchilla.
Siguiendo cómo funcionan los componentes de Blade, puede establecer cualquier atributo y clases HTML:
Defina los ID de componentes como lo haría para cualquier elemento HTML.
Si no se establece una ID personalizada, se generará una ID utilizando los valores de Kebab Cased <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` --}}Por defecto, todos los componentes de entrada declararán un margen inferior para posicionarse correctamente en una forma.
A veces deberá deshabilitar este margen inferior predeterminado: podrá hacerlo configurando el atributo marginBottom en 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 --}}Puede definir etiquetas en todos los componentes de entrada (excepto la radio).
Si no se define ninguna etiqueta personalizada, las etiquetas tomarán el valor predeterminado __('validation.attributes.<name>) .
Siguiendo el mismo comportamiento, todos los componentes de entrada que permiten el uso de un placeholder (seleccionado incluido) proporcionarán un marcador de posición predeterminado que tomará el valor label .
Puede anular este valor predeterminado configurando un marcador de posición personalizado.
También puede ocultar la etiqueta generada por auto y el marcador de posición con 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 --}}Este paquete le permite habilitar o deshabilitar las etiquetas flotantes que se muestran.
Puede establecer el comportamiento de la etiqueta flotante global con config('form-components.floating_label') config.
Podrá anular este comportamiento global a nivel de formulario para todos los componentes contenidos.
< 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 >Finalmente, también podrá anular todo otro comportamiento definido en los componentes mismos.
< x:form::input name = " first_name " :floatingLabel = " true " /> Puede definir prepend y append complementos HTML en los componentes de entrada y 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> " />Nota: Puede usar HTML directamente en lugar de componentes para la administración de complejos de Addon.
Puede unir modelos, objetos, colecciones o matrices elocuentes para unir los valores de componentes vinculados para pulverizar.
Los datos de unión en el componente del formulario activarán la unión de todos sus componentes contenidos.
Puede unir datos directamente en un componente y anular la unión del formulario.
En caso de error de validación, los componentes se repoblarán por valores antiguos que anularán los valores unidos.
Para un caso de uso específico, también puede usar @bind($boundDataBatch) y las directivas @endbind Blade para vincular un grupo de componentes.
@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 unión de datos se puede anular estableciendo valores personalizados en los componentes.
@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 >Los componentes podrán mostrar u ocultar sus estados de éxito/error y mensaje de error cuando se active un error de validación:
Puede controlar este comportamiento en diferentes niveles:
config('form-components.display_validation_success') y 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 >También puede personalizar la bolsa de error que debe usarse para determinar los estados de éxito/error de los componentes y los mensajes de error en los componentes de formulario.
< 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 >Ayude a los usuarios y muestre instrucciones adicionales en sus componentes agregando subtítulos.
< x:form::input name = " name " caption = " Please fill this input with your full name. " /> Active el modo multilingüe en los componentes input y textarea para beneficiarse de las siguientes características:
name="description" se transformará en name="description[<locale>]"__(validation.attributes.name) La traducción utilizada para generar etiqueta predeterminada y el mensaje de error se agregarán con (<LOCALE>) < x:form::input name = " name " :locales = " ['fr', 'en'] " />
< x:form::textarea name = " description " :locales = " ['fr', 'en'] " />Los componentes de forma y entrada son compatibles con el cable vivo.
En lugar de definir un atributo HTML wire:model en cada componente que desee cablear como lo haría sin este paquete, aquí solo tendrá que definir un atributo wire="<optional-modifier>" HTML para que esto funcione.
Cada componente de entrada con cable utilizará su propio atributo name y lo convertirá en un wire:model="<name>" uno.
< 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 >Siguiendo la misma lógica, también puede cablear componentes de entrada directamente desde el formulario en el que están contenidos.
< 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 > Para un caso de uso específico, también puede usar @wire($modifier) y las directivas @endwire blade para conectar un grupo de componentes con un modificador específico de LiveWire.
< 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 Consulte ChangeLog para obtener más información sobre lo que ha cambiado recientemente.
Consulte contribuyendo para obtener más detalles.
Revise nuestra política de seguridad sobre cómo informar vulnerabilidades de seguridad.
La licencia MIT (MIT). Consulte el archivo de licencia para obtener más información.
