README

一套用于快速开发表单的Blade组件，支持Monalisa以及其他CSS框架。

功能

表单、输入、文本区域、选择、多选、复选框和单选按钮组件。
自动管理表单方法欺骗
自动管理 CSRF保护
支持Monalisa以及其他CSS框架。
自动赋值。
通过old input重新填充值。
组件和视图的类可以完全自定义。

要求

PHP 7.3
Laravel 7

安装

您可以通过composer安装此包

composer require vesperabr/laravel-form-components

快速示例

<x-form>
    <x-input name="nome" label="Nome" />
    <x-input type="cpf" name="cpf" label="CPF" />
    <x-input type="email" name="email" label="E-mail" />
    <x-input type="password" name="senha" label="Senha" />
    <button>Enviar</button>
</x-form>

组件

表单

默认情况下，组件 <x-form> 使用GET动词在 method 属性中。

您可以提供任何其他动词，组件将自动处理 method spoofing 和CSRF控制。

<!-- Utilizando -->
<x-form method="PUT">
    ...
</x-form>

<!-- Irá gerar: -->
<form method="POST">
    <input type="hidden" name="_method" value="PUT">
    <input type="hidden" name="_token" value="xxx">
</form>

您可以提供任何其他 <form> 标签的属性，例如 action、class、id 等。

您还可以提供 multipart 属性，这将自动配置表单以发送文件。示例

<x-form method="POST" multipart>
    ...
</x-form>

输入

默认情况下，组件 <x-input /> 生成一个具有 type="text" 属性的 <input> 标签，但您可以提供任何其他HTML标准 type，例如 password、email、tel、url、number 等。

您可以提供其他属性，如 required、placeholder、class、id 等。

<x-input type="email" label="Digite seu email" name="email" required />

特殊类型

<x-input /> 组件接受一些特殊类型，如 cpf、cnpj、cpfcnpj、cep、float 和 money。这将应用格式化掩码到字段。

<x-input type="cpf" name="cpf" placeholder="Digite seu CPF" />

在字段前后插入值

您还可以提供 append 和 prepend 属性。这将显示字段前后的值。

<x-input type="float" name="preco" prepend="R$" />

<x-input name="subdominio" append=".vespera.com.br" />

文本区域

该组件与<x-input />非常相似，区别在于它不支持前后掩码和值。

<x-textarea label="Observações" name="observacoes" />

选择器

<x-select />组件需要您提供options属性以填充用户可以选择的值。此属性应为一个格式为键 => 值的数组。

$paises = [
    'br' => 'Brasil',
    'us' => 'Estados Unidos',
    'jp' => 'Japão',
];

<x-select name="pais" :options="$paises" />

您可以通过selected属性来定义哪些值应该被选中。如果您将multiple属性添加到组件中，请记住传递一个包含应选中键的简单数组。

<x-select name="pais" :options="$paises" selected="['br', 'jp']" multiple />

复选框

您可以使用<x-checkboxes />组件创建一组复选框。与<x-select />组件类似，您必须提供包含格式为键 => 值的数组的options属性。

<x-checkboxes name="paises[]" :options="$paises" />

您可以通过selected属性来指定应选中的值，该属性可以是字符串或包含应选中键的数组。

<x-checkboxes name="paises[]" :options="$paises" :selected="['br', 'jp']" />

还有<x-checkbox />组件，它将创建一个单独的复选框。它用于创建接受或拒绝字段或激活/非激活字段。

您可以指定default属性，如果字段未被选中，它将提供一个具有默认值的隐藏输入。

<x-checkbox name="ativo" value="sim" default="nao" label="Usuário ativo?" />

单选按钮

<x-radios />组件提供一组单选按钮。您必须提供包含格式为键 => 值的数组的options属性。

<x-radios name="paises" :options="$paises" />

要定义应选中的值，请使用selected属性。

<x-radios name="paises" :options="$paises" selected="br" />

按钮

<x-buttons />组件生成用于表单控制的按钮。

您可以指定submit属性，它将是提交按钮的文本。

<x-buttons submit="Enviar formulário" />

如果您还指定了cancel-url属性，组件将显示一个指向指定值的取消链接。

<x-buttons submit="Enviar formulário" cancel-url="http://google.com" />

您还可以指定loader属性，它将在点击发送按钮时显示加载器。仅属性的存在即可启用加载器。如果为属性指定一个值，则在加载器活动时按钮的文本将更改。

<x-buttons submit="Salvar" loader />

<x-buttons submit="Salvar" loader="Salvando..." />

插槽

<x-input>、<x-checkbox>、<x-checkboxes>、<x-radios>、<x-select>和<x-textarea>组件允许您提供额外的内容，即所谓的插槽。例如

<x-input type="email" label="Digite seu e-mail">
    <p>Fique tranquilo, também não gostamos de spam!</p>
</x-input>

值分配

如上所示，您可以通过value属性（针对<x-input />组件）或通过selected属性（针对<x-select />、<x-radios />、<x-checkboxes />和<x-checkbox />组件）来定义字段值。

模型绑定

除了定义value和selected属性外，还可以自动从Eloquent模型或关联数组获取字段值。只需使用:bind属性。

以下示例中，组件将在变量$usuario（应是一个Eloquent模型的实例或关联数组）中查找通过name属性定义的nome属性。在这种情况下，字段值将是$usuario->nome的值。

<x-input name="nome" :bind="$usuario" />

您可以通过在<x-form>组件中指定bind属性或使用@bind和@endbind指令来同时绑定多个字段。

<x-form :bind="$usuario">
    <x-input name="nome" />
    <x-input name="email" />
</x-form>

<x-form>
    @bind($usuario)
        <x-input name="nome" />
        <x-input name="email" />
    @endbind
</x-form>

您甚至可以混合使用绑定。

<x-form :bind="$usuario">
    <x-input name="nome" />

    @bind($perfilDoUsuario)
        <x-textarea name="descricao">
    @endbind
</x-form>

您还可以通过将:bind属性或@bind指令设置为false来禁用绑定。

<x-form :bind="$usuario">
    <x-input name="nome" />
    <x-input name="email" :bind="false" />
</x-form>

旧输入数据

当发生验证错误并且Laravel将您重定向回表单时，字段将保留已输入的值。这始终会覆盖任何默认值。

自定义

您可以使用以下命令发布配置文件和视图：

php artisan vendor:publish --provider="Vespera\LaravelFormComponents\ServiceProvider"

配置文件form-components.php将位于config文件夹中，而视图将发布到resources/views/vendor/form-components文件夹。

在配置文件中，您可以定义要使用的CSS框架以及每个组件中使用的每个视图的位置。

信用

此包灵感来源于Pascal Baljet的出色工作，请参阅Pascal Baljet。

vesperabr / laravel-form-components

维护者

详情