README

我们推荐使用 https://github.com/blade-ui-kit/blade-ui-kit

清洁表单的Blade组件集合

安装

您可以通过以下命令使用composer安装此包

composer require mydnic/laravel-form-blade-components

此包将自动注册自己

然后您必须使用以下命令发布组件

php artisan vendor:publish --provider="Mydnic\FormBladeComponents\FormBladeComponentsServiceProvider" --tag="blade-components"

这将复制位于 resources/views/components/form 中的Blade组件并将它们自动注册。

您可以根据需要自定义它们。

使用

在您的blade视图中，现在可以以非常简洁的方式添加表单元素。

输入

将 <input> 元素包含到您的视图中。

@input([
    'name' => 'first_name',
    'type' => 'text',
    'label' => 'First Name',
    'attributes' => 'required checked max="10"',
    'placeholder' => 'Some placeholder',
])@endinput

文本区域

将 <textarea> 元素包含到您的视图中。

@textarea([
    'name' => 'description',
    'label' => 'Description',
    'placeholder' => 'Some placeholder',
])@endtextarea

复选框

将 <input type="checkbox"> 元素包含到您的视图中。

@checkbox([
    'name' => 'is_enabled',
    'label' => 'Enabled',
    'object' => $user
])@endcheckbox

选择

将 <select> 元素包含到您的视图中。

@select([
    'name' => 'user_id',
    'label' => 'User',
    'object' => $user,
    'options' => $users
])@endselect

预填充值

默认情况下，输入不会填充任何值，就像任何空输入元素一样。

强制填充

您可以通过提供类似这样的 value 来强制填充一个属性

@input([
    'name' => 'first_name',
    'label' => 'First Name',
    'value' => 'Clément',
])@endinput

对象填充

您可以通过提供一个 object 来使用对象属性填充输入值。这在编辑资源时非常有用。

@input([
    'name' => 'first_name',
    'label' => 'First Name',
    'object' => $user,
])@endinput

"旧"值填充

所有组件都使用laravel的 old() 助手，允许在提交表单时通过前一个值填充输入。这是自动完成的，不需要任何额外的属性。

样式

一旦发布，您可以通过编辑Blade组件来自定义每个元素的CSS类。

默认情况下，每个元素使用一些默认类

标签（所有组件）

<label class="label"></label>

输入

默认状态

<input class="input">

错误状态

<input class="input error">
<p class="helper-error"></p>

文本区域

默认状态

<textarea class="textarea">

错误状态

<textarea class="textarea error"></textarea>
<p class="helper-error"></p>

复选框

默认状态

<input type="checkbox" class="checkbox">

错误状态

<input type="checkbox" class="checkbox error">
<p class="helper-error"></p>

选择

默认状态

<select class="select"></select>

错误状态

<select class="select error"></select>
<p class="helper-error"></p>