README

基于Bootstrap 4构建，这些是用于表单字段的blade组件，可加快表单创建速度。

...只要像我现在这样使用水平表单。在我的布局中，如果不太困难，我可能会考虑在后续版本中进行更多定制。

我正在使用spatie/laravel-html来生成每个输入；如果表单提交失败，这具有处理旧数据或使用模型中的值的优势。请参阅文档。

兼容性图表

安装

使用Composer引入项目

$ composer require rickselby/laravel-form-components

Laravel 5.5+将自动发现该包。

对于Laravel 5.4，在config/app.php中，将此行添加到providers数组中

RickSelby\Laravel\FormComponents\FormComponentsProvider::class,

样式

我对复选框的布局不满意，需要为一些额外的填充添加一个类。这可以发布到public/vendor/rickselby/laravel-form-components/form_components.css

./artisan vendor:publish --provider="RickSelby\Laravel\FormComponents\FormComponentsProvider" --tag="public"

或者，如果您使用Laravel Mix或类似工具，可以包含scss源。在您的app.scss中添加

@import "vendor/rickselby/laravel-form-components/src/resources/assets/sass/form_components";

(我不太确定我是否真的喜欢通过Composer发布前端需求，但似乎在这个情况下很合适)。

使用方法

可以使用@include添加简单字段

@include('fc::checkbox', ['label' => 'Is active?', 'name' => 'active'])
@include('fc::date', ['label' => 'Date of birth', 'name' => 'birthday'])
@include('fc::file', ['label' => 'Your face', 'name' => 'profile'])
@include('fc::number', ['label' => 'Number of feet', 'name' => 'feet'])
@include('fc::select', ['label' => 'Country', 'name' => 'country', 'options' => $options])
@include('fc::static', ['label' => 'Something you cannot change', 'name' => 'static'])
@include('fc::text', ['label' => 'Name', 'name' => 'name'])
@include('fc::textarea', ['label' => 'Personal statement', 'name' => 'statement'])

通过使用@component，您可以使用@slot来定义值，这对于更复杂的值可能更可取；例如，具有HTML的值

@component('fc::text', ['name' => 'name'])
    @slot('label')
        <em>Label with HTML</em>
    @endslot
@endcomponent

您可以根据需要混合使用数组插槽传递数据。如果您只使用数组，则可以使用@include而不是@component，并删除@endcomponent。

帮助文本受到支持

@component('fc::text', ['label' => 'Name', 'name' => 'name'])
    @slot('help')
        This should be your name.
    @endslot
@endcomponent

也可以传递默认值

@include('fc::number', ['label' => 'Number of feet', 'name' => 'feet', 'value' => 2])

同样也可以传递占位符

@include('fc::text', ['label' => 'Name', 'name' => 'name', 'placeholder' => 'Your name'])

可以向输入添加类；您必须传递一个数组

@include('fc::text', ['label' => 'Name', 'name' => 'name', 'class' => ['a-name']])

也可以以类似的方式传递数据属性

@include('fc::text', ['label' => 'Name', 'name' => 'name', 'data' => ['type', 'first']])

基于字段名称，将自动显示验证错误，多亏了.invalid-feedback类。

日期选择器

@include('fc::datepicker', ['label' => 'Date of birth', 'name' => 'birthday'])

日期选择器只是一个具有date-picker类的文本字段，然后可以应用任何（可能是javascript）来将其转换为更实用的东西。

提交按钮

提交按钮旨在与@component一起使用，因为它只有一个参数

@component('fc::submit')
    Submit this form
@endcomponent

覆盖

Laravel允许覆盖包视图。创建目录resources/views/vendor/fc；然后创建您希望覆盖的任何视图。

扩展

可以通过扩展fc::layout.field模板来添加自定义字段。确保传递了$label、$name和$help属性。以下是一个如何实现text字段的示例

@component('fc::layout.field', ['label' => $label, 'name' => $name, 'help' => $help ?? null])
    {{ html()->text($name, $value ?? null)->placeholder($placeholder ?? null)->class(['form-control', 'is-invalid' => $errors->has($name)]) }}
@endcomponent

fc::layout.field模板中有更多可用的设置，可以进行更多自定义。

许可

Laravel Form Components是在MIT许可（MIT）下授权的。