README

使用简单的 Laravel 表单组件定义，轻松创建美观的现代表单，带有浮动标签和验证。

安装

您可以通过 composer 安装此包

composer require shaneoliver/laravel-form-components

由于表单样式扩展了 Bootstrap 4，因此您还需要安装它。请参阅 Bootstrap 文档或与 laravel UI 一起安装。

composer require laravel/ui
php artisan ui bootstrap

您还需要一些额外的 Sass 来样式化表单。发布 Sass 并将其导入到您的 app.scss 文件中

php artisan vendor:publish --tag="form-components"

@import 'vendor/so/form';

用法

使用 <x-so-form></x-so-form> 创建表单组件。此组件为默认插槽提供基本的 Bootstrap 表单样式，并包括提交按钮。或者，您也可以创建自己的表单元素，并将输入组件放在其中。

使用 Laravel 的请求验证来验证请求并返回错误包。有效的输入将显示 .is-valid Bootstrap 类，而无效的输入将显示 .is-invalid。如果错误包中的输入无效但不需要返回旧值（如密码），则不会显示任何验证。

组件

表单

<x-so-form :action="route('endpoint')">
    // Default slot
</x-so-form>

属性

• action 提交表单的端点。对于字符串，使用 action 对于 PHP 命令 :action 如上例所示
• method 表单的方法。默认为 POST
• button 提交按钮的标签。默认 '提交'

输入

<x-so-form-input name="text" label="Text" type="text" class="col-6 mb-3"/>

属性

• label 作为输入浮动标签的占位符
• type 输入的类型。默认为 'text'
• class 包装元素类。应用于添加列和所需的边距。默认 col-12 mb-3
• valid-text 输入成功验证时显示的文本。默认为 '看起来不错'

任何额外的 HTML 输入属性都将自动应用于输入，例如 autofocus、required、min、max

所有输入组件都使用此组基本属性和关于 HTML 属性的规则

文本区域

<x-so-form-textarea name="textarea" label="Textarea" class="col-12 mb-3" />

文本区域具有与上面输入相同的属性。它还会将任何 HTML 属性添加到文本区域中，例如 cols、rows

选择

<x-so-form-select name="select" label="Select an option" type="select" cols="col-6 mb-3" :options="collect([['value' => '', 'label' => 'Select Something'],['value' => 1, 'label' => 'One'], ['value' => 2, 'label' => 'Two']])" />

使用 options 属性传递包含 value 和 label 键的集合，以填充选项。如果没有提供选项属性，您可以使用默认插槽添加自己的选项。

选择选项具有默认插槽，您可以在其中添加自己的选项元素，或者您可以使用 options 属性，它期望一个集合

<x-so-form-select name="select" label="Select an option" type="select" cols="col-6 mb-3">
    <option @if(old('select') == "") {{ 'selected' }} @endif value="" disabled>Select</option>
    <option @if(old('select') == "1") {{ 'selected' }} @endif value="1">One</option>
    <option @if(old('select') == "2") {{ 'selected' }} @endif value="2">Two</option>
    <option @if(old('select') == "3") {{ 'selected' }} @endif value="3">Three</option>
</x-so-form-select>

单选按钮

<x-so-form-radio name="radio" label="Radio" class="col-6 mb-3" :options="collect([['value' => 1, 'label' => 'One'], ['value' => 2, 'label' => 'Two']])"/>

使用 options 属性传递包含 value 和 label 键的集合，以创建单选按钮列表。

复选框

<x-so-form-checkbox name="checkbox" label="Checkbox" class="col-6 mb-3" />

文件

<x-so-form-file name="file" label="File" />

如果您在表单中使用文件输入，请确保将 enctype="multipart/form-data" 属性添加到您的表单组件或元素中。使用文件输入组件上的 HTML 属性来处理多个文件和处理 MIME 类型验证。

有关自定义文件输入的更多信息，请参阅 Bootstrap 文档

完整示例

以下所有元素的完整示例

<x-so-form :action="route('test_store')">
    <x-so-form-input name="text" label="Text" type="text" class="col-6 mb-3" autofocus/>
    <x-so-form-input name="email" label="Email" type="email" class="col-6 mb-3"/>
    <x-so-form-input name="number" label="Number" type="number" class="col-6 mb-3"/>
    <x-so-form-input name="password" label="Password" type="password" class="col-6 mb-3"/>
    <x-so-form-textarea name="textarea" label="Textarea" />
    <x-so-form-select name="select" label="Select an option" type="select" cols="col-6 mb-3" :options="collect([['value' => '', 'label' => 'Select Something'],['value' => 1, 'label' => 'One'], ['value' => 2, 'label' => 'Two']])" />
    <x-so-form-radio name="radio" label="Radio" class="col-6 mb-3" :options="collect([['value' => 1, 'label' => 'One'], ['value' => 2, 'label' => 'Two']])"/>
    <x-so-form-checkbox name="checkbox" label="Checkbox" class="col-6 mb-3" />
    <x-so-form-file name="file" label="File" />
</x-so-form>

测试

composer test

更新日志

请参阅更新日志获取最近更改的详细信息。

贡献

请参阅贡献指南获取详细信息。

安全性

如果您发现任何安全相关的问题，请通过电子邮件info@shaneoliver.com.au联系，而不是使用问题跟踪器。

鸣谢

• Shane Oliver
• 所有贡献者

许可协议

MIT许可协议（MIT）。请参阅许可文件获取更多信息。