laravel form components
vel 10 support (#28)
Economize tempo e aproveite um conjunto de componentes de formulários dinâmicos, prontos para uso e totalmente personalizáveis.
Os componentes são compatíveis com o LiveWire e podem ser usados com as seguintes estruturas da interface do usuário:
Achou este pacote útil? Por favor, considere apoiar meu trabalho!
| Laravel | LiveWire | Php | Pacote |
|---|---|---|---|
| ^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 |
Basta ligar para os componentes de que você precisa em suas opiniões e deixar este pacote cuidar da parte demorada da geração 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 >E obtenha estes componentes exibidos:
Você pode instalar o pacote via compositor:
composer require okipa/laravel-form-componentsVocê pode publicar o arquivo de configuração com:
php artisan vendor:publish --tag=form-components:configEntre suas configurações, este pacote permite escolher qual estrutura de interface do usuário será usada.
Observe que você terá que instalar e configurar a estrutura da interface do usuário que deseja usar antes de usar este pacote.
Você pode publicar as visualizações do pacote para personalizá -las, se necessário:
php artisan vendor:publish --tag=form-components:viewsOs componentes podem ser embrulhados em um componente de formulário.
Se nenhum método personalizado estiver definido, um método GET será definido por padrão.
Os campos ocultos de CSRF e métodos de falsificação serão gerados automaticamente quando necessário, de acordo com o método de formulário definido:
@method() , declarar seu PUT , PATCH ou DELETE ação diretamente no atributo action@csrf() , ela será declarada automaticamente com ações POST , PUT , PATCH e DELETE Os formulários são gerados com um atributo HTML novalidate padrão, que está impedindo a validação do navegador em favor de uma validação do lado do servidor (que é uma boa prática para questões de segurança).
< x:form::form method = " PUT " >
< x:form::input name = " first_name " />
...
</ x:form::form >Adicione entradas e textarea em seus formulários.
Se você não definir um tipo personalizado como uma entrada, ele levará um tipo text padrão.
As entradas de rádio, caixa de seleção e botões devem ser usadas com seus próprios componentes devido ao seu comportamento diferente.
O componente textarea pode ser usado da mesma maneira que um componente de entrada, mas sem declarar um 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 " />Defina componentes selecionados em seus formulários.
Gerar automaticamente opções fornecendo uma matriz de valor/etiqueta associativa.
Os elementos de seleção HTML não aceitam atributos de espaço reservado, no entanto, o componente selecionado permite que você lide com uma opção semelhante a um espaço reservado para os outros. Este espaço reservado se comportará quanto aos outros componentes.
Por padrão, essa opção selecionada de espaço reservado é selecionada, desativada e oculta. No entanto, você poderá permitir que ele seja selecionado caso precise definir um campo nullable , por exemplo. Para fazer isso, basta adicionar o atributo allowPlaceholderToBeSelected ao seu componente.
Em modo múltiplo, este pacote se importará em converter o nome em um nome de matriz, para que você não precise adicioná -lo 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[] --}}Caixa de seleção, componente de alternância e componentes de rádio estão disponíveis para você usar.
Como as entradas de rádio nunca são usadas sozinhas, você precisará declarar um atributo group necessário ao usá -los, aguardando uma matriz associativa de valor/etiqueta a partir da qual os campos de rádio serão gerados.
Em relação à caixa de seleção e às entradas do comutador, você poderá usá -las no modo único ou em grupo. Para usá -los no modo de grupo, você também precisará declarar um atributo group .
No modo de grupo, este pacote cuidará de converter o nome em um nome de matriz, para que você não precise adicioná -lo manualmente.
Se você deseja exibir esses componentes de entrada embutidos, basta definir um 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 --}}Os componentes do botão de envio e link estão disponíveis.
O botão Enviar permite acionar um formulário e fornecerá um corpo padrão __('Submit') se nenhum for definido.
O botão de link permite definir ações como Back ou Cancel em seus formulários, fornecendo um link com uma tela semelhante a um botão. Como esse componente é um link HTML, ele fornecerá um título padrão analisando seu corpo.
Por padrão, ambos os componentes definirão uma cor base de fundo se nenhum atributo de classe personalizado for definido.
< 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 >O componente fornecido é construído usando componentes da lâmina.
Após o funcionamento dos componentes da lâmina, você pode definir quaisquer atributos e classes HTML:
Defina os IDs dos componentes como você faria para qualquer elemento HTML.
Se nenhum ID personalizado estiver definido, um ID será gerado usando os 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 padrão, todos os componentes de entrada declararão uma margem inferior para se posicionar corretamente em um formulário.
Às vezes, você precisará desativar essa margem inferior padrão: você pode fazer isso definindo o atributo marginBottom como 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 --}}Você pode definir rótulos em todos os componentes de entrada (exceto no rádio).
Se nenhum rótulo personalizado for definido, os rótulos levarão o valor padrão __('validation.attributes.<name>) .
Seguindo o mesmo comportamento, todos os componentes de entrada que estão permitindo o uso de um placeholder (selecionado incluído) fornecerão um espaço reservado padrão que assumirá o valor label .
Você pode substituir esse valor padrão definindo um espaço reservado personalizado.
Você também pode ocultar o rótulo e o espaço reservado gerado automaticamente por eles para 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 pacote permite ativar ou desativar rótulos flutuantes exibindo.
Você pode definir o comportamento global do rótulo flutuante com config('form-components.floating_label') .
Você poderá substituir esse comportamento global no nível de formulário para todos os componentes contidos.
< 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 >Por fim, você também pode substituir todos os outros comportamentos definidos nos próprios componentes.
< x:form::input name = " first_name " :floatingLabel = " true " /> Você pode definir prepend e append addons HTML nos componentes de entrada e 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: Você pode usar o HTML diretamente em vez de componentes para o gerenciamento do complexo Addon.
Você pode vincular modelos, objetos, coleções ou matrizes eloquentes para atingir os valores dos componentes vinculados automaticamente.
Os dados de ligação no componente do formulário acionarão a ligação de todos os seus componentes contidos.
Você pode vincular dados diretamente em um componente e substituir a ligação do formulário.
Em caso de erro de validação, os componentes serão repovoados por valores antigos que substituirão os valores vinculados.
Para um caso de uso específico, você também pode usar o @bind($boundDataBatch) e as diretivas do @endbind lâmina para vincular um 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 >A ligação de dados pode ser substituída definindo valores personalizados nos 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 >Os componentes poderão exibir ou ocultar seus status de sucesso/erro e mensagem de erro quando um erro de validação for acionado:
Você pode controlar esse comportamento em diferentes níveis:
config('form-components.display_validation_success') e 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 >Você também pode personalizar o saco de erros que deve ser usado para determinar os status de sucesso/erro dos componentes e mensagens de erro nos componentes do formulário.
< 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 >Ajude os usuários e a exibir instruções adicionais sob seus componentes adicionando legendas.
< x:form::input name = " name " caption = " Please fill this input with your full name. " /> Ative o modo multilíngue nos componentes input e textarea para se beneficiar dos seguintes recursos:
name="description" será transformada em name="description[<locale>]"__(validation.attributes.name) Tradução usada para gerar a etiqueta padrão e a mensagem de erro será anexada com (<LOCALE>) < x:form::input name = " name " :locales = " ['fr', 'en'] " />
< x:form::textarea name = " description " :locales = " ['fr', 'en'] " />Os componentes de formulário e entrada são compatíveis com o LiveWire.
Em vez de definir um atributo HTML wire:model em cada componente que você deseja conectar como faria sem este pacote, aqui você só precisará definir um atributo wire="<optional-modifier>" html para fazer esse trabalho.
Cada componente de entrada com fio usará seu próprio atributo name e o converterá em um wire:model="<name>" um.
< 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 >Seguindo a mesma lógica, você também pode conectar os componentes de entrada diretamente do formulário em que estão contidos.
< 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 um caso de uso específico, você também pode usar o @wire($modifier) e as diretivas @endwire lâmina para conectar um grupo de componentes com um modificador de arco de vida específico.
< 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 obter mais informações sobre o que mudou recentemente.
Por favor, consulte a contribuição para obter detalhes.
Revise nossa política de segurança sobre como relatar vulnerabilidades de segurança.
A licença do MIT (MIT). Consulte o arquivo de licença para obter mais informações.
