README

一组预先制作的简单 Laravel Blade 表单组件。

安装与设置

您可以通过 composer 安装此包

composer require bjnstnkvc/form-components

该包将自动注册其服务提供者。

用法

配置

使用以下命令发布组件的配置文件

php artisan vendor:publish --provider="Bjnstnkvc\FormComponents\FormComponentsServiceProvider" --tag=form-config

这将发布一个名为 form_components.php 的文件到您的配置目录。

资源

使用以下命令发布组件的资源文件

php artisan vendor:publish --provider="Bjnstnkvc\FormComponents\FormComponentsServiceProvider" --tag=form-resources

这将发布以下文件到在 form_components.php 中配置的文件夹。默认文件夹是 public/vendor/form-components。每个属性的详细解释可以在这里找到。

form-components.css
form-components.min.css
form-components.js
form-components.min.js

指令

配置和资源发布后，将以下 Blade 指令添加到您的布局文件中。

@componentStyles

@componentScripts

如指令的名称所示，这些指令将添加表单组件的压缩 CSS 和 JS 文件。如果您想编辑已发布的资源文件，但不想编辑压缩版本，可以使用以下语法

@componentStyles('full')

@componentScripts('full')

上述指令将指示库加载未压缩的 CSS 和 JS 文件，您可以根据需要进行编辑。

表单组件

为了使用表单组件，使用标准的 [Blade 组件语法从文档。默认情况下，表单组件可以使用 form 前缀。表单组件使用属性来指定组件的渲染方式。

以下属性值得关注

name - 组件名称（必需）。
id - 组件 ID（如果未提供，则使用 name）。
title - 组件标题（如果未提供，则使用 name）。
placeholder - 组件占位符（如果未提供，则使用 name）。
value - 组件值，底层使用 old() 助手。
label - 添加到组件标签的额外类。
label-type - 组件显示的样式（默认为 column）。
border - 组件的边框半径（默认为 rounded-s）。
border-radius - 组件的边框半径（默认为 rounded-s）。
invalidated-title - 确定组件标题是否会在无效输入时更改（默认设置为 false）。
show-icon - 确定组件图标错误是否应显示（默认设置为 true）。
icon - 如果 show-icon 属性设置为 true，则组件图标。注意，某些组件在 form_components.php 配置文件中设置了默认图标（更多信息可以在这里找到）。
interactive - 确定验证错误是否会在输入时消失（默认设置为 false）。

所有其他属性将直接合并到 HTML 组件元素上。

基础

<x-form::base method="PUT" action="{{ route('email.update') }}" >
    <x-form::email name="email" placeholder="Email placeholder" />
</x-form::base>

根据所选的 方法，组件会自动添加必要的 _method 令牌。

上述选项将生成以下结果

<form class="fc-form" method="POST" action="http://form-components.com/email/update">
    <!-- CSRF Token -->
    <input type="hidden" name="_token" value="9G8i7aDB0loPj25Xwwm2Smosz3yjAhY3tOrvc6P3">
    <!-- Method Token -->
    <input type="hidden" name="_method" value="PUT">
    
    <label class="fc-form-group  tg-caption" label-type="column" for="email">
        <input class="form-group__input" placeholder="Email placeholder" type="email" id="email" name="email" value="" border="bottom" border-radius="rounded-s" with-icon="true" invalidated-title="false" interactive="false">
        <span class="form-group__title ">Email</span>
    </label>
</form>

请注意，默认情况下，表单基础组件的 method 属性设置为 POST。

输入

<x-form::input name="input" placeholder="Input placeholder" />

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

密码

<x-form::password name="password" placeholder="Password placeholder" />

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

密码组件自带“密码可见性”功能，默认情况下已开启。

如果您想禁用它，请将 password-visibility="false" 添加到组件中。或者，您可以通过将 password_visibility 设置为 false 来通过项目禁用此功能，在您发布的 form_components.php 文件中。

电子邮件

<x-form::email name="email" placeholder="Email placeholder" />

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

搜索

<x-form::search name="search" placeholder="Search placeholder" />

根据所选的 标签类型，组件将如下所示

搜索组件自带“搜索清除”功能，默认情况下已开启。

如果您想禁用它，请将 search-clearing="false" 添加到组件中。或者，您可以通过将 search_clearing 设置为 false 来通过项目禁用此功能，在您发布的 form_components.php 文件中。

文本域

<x-form::textarea name="textarea" placeholder="Textarea placeholder" />

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

文本域组件自带自动扩展功能，默认情况下已关闭。要启用此功能，请使用以下语法

<x-form::textarea name="textarea" placeholder="Textarea placeholder" autoexpand="true" />

根据所选的 标签类型，组件将显示以下行为

如果您希望所有文本域组件都默认自动扩展，请在您发布的 form_components.php 文件中将 auto_expand 设置为 true。

选择

<x-form::select name="select" />

选择组件接受 string 或 array 作为值，它将从中构建选择选项。

要传递字符串值，请使用以下语法

<x-form::select name="select" values="Option A, Option B" />

上述选项将生成以下结果

<option value="option-a">Option A</option>
<option value="option-b">Option B</option>

如果您想同时传递选项值和其键，请使用以下语法

<x-form::select name="select" values="1: Option A, 2:Option B" />

上述选项将生成以下结果

<option value="1">Option A</option>
<option value="2">Option B</option>

如果您传递的是 array，则适用相同的规则。例如，以下 PHP 数组

$options = ['Option A', 'Option B'];

以及以下 blade 组件设置

<x-form::select name="select" :values="$options" />

将生成以下选项

<option value="0">Option A</option>
<option value="1">Option B</option>

请注意，由于没有将数组作为 NOT key => value 传递，选项值从 0 开始并逐项递增。

如果数组有 key => value 对，以下数组

$options = [
    1 => 'Option A', 
    2 => 'Option B'
];

将生成以下 HTML

<option value="1">Option A</option>
<option value="2">Option B</option>

您还可以将整个 Eloquent 模型 传递给组件。假设我们有一个包含以下数据的用户表

从控制器传递过来

return view('welcome', [
    'users' => User::all();
]);

要使用它与选择组件，请使用以下语法

<x-form::select name="select" :model="$users" model-key="id" model-value="first_name" />

如上例所示，如果已传递 Eloquent 模型，选择组件期望三个属性

:model - 从控制器或直接注入到 blade 文件中传递的模型。
model-key - 将用作选项值的模型键（如果没有提供，则使用 id）。
model-value - 用于生成选项文本的模型值。

<option value="1">John</option>
<option value="2">Jane</option>

如果您想将 JavaScript 数据集属性传递给每个生成的选项，请使用以下 Blade 组件属性

js-data-key - 属性键。
js-data-value - 属性值。

请注意，js-data-value 属性 MUST 匹配 Eloquent 模型 属性名。

<x-form::select name="select" :model="$users" model-key="id" model-value="first_name" js-data-key="last-name" js-data-value="last_name" />

这将生成以下 HTML

<option value="1" data-last-name="Doe">John</option>
<option value="2" data-last-name="Does">Jane</option>

与其他组件一样，可以向组件传递 placeholder，这将生成占位符选项值。

<x-form::select name="select" placeholder="Select a user" :model="$users" model-key="id" model-value="first_name" />

将生成以下 HTML

<option value="">Select a user</option>
<option value="1">John</option>
<option value="2">Jane</option>

要设置默认选择值，可以使用 default 属性，它将在组件渲染时预选择选项。例如

<x-form::select name="select" placeholder="Select a user" :model="$users" model-key="id" model-value="first_name" default="Jane" />

将生成以下 HTML

<option value="">Select a user</option>
<option value="1">John</option>
<option value="2" selected>Jane</option>

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

日期

<x-form::date name="date"/>

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

时间

<x-form::time name="time" />

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

日期时间

<x-form::date-time name="date & time" />

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

日期、时间和日期时间组件使用内置的HTML元素。

点击组件图标将打开原生的浏览器输入UI。

此外，您可以为所有三个字段传递一个值，这些字段在渲染组件之前使用 Carbon 在幕后解析值。

文件

<x-form::file name="file" placeholder="File placeholder" />

根据所选的 标签类型，组件将如下所示

如果字段无效，根据所选的 标签类型，组件将如下所示

文件组件使用内置的HTML元素。

复选框和单选按钮

复选框

<x-form::checkbox name="checkbox" />

根据 位置 选择，组件将如下所示

如果字段无效，根据 位置 选择，组件将如下所示

单选按钮

<x-form::radio name="radio" />

根据 位置 选择，组件将如下所示

如果字段无效，根据 位置 选择，组件将如下所示

开关

或者，如果您将复选框或单选按钮的 switch 属性设置为 true，它将如下所示

选中

复选框和单选按钮组件都带有 checked 属性，它期望 boolean。根据结果，组件将渲染为选中状态。

<x-form::checkbox name="checkbox" checked="{{ 2 + 2 == 4 }}" />

<x-form::radio name="radio" checked="{{ ! 2 + 2 === 4 }}" />

按钮

为了渲染按钮组件，使用以下语法

<x-form::button name="login" />

该组件使用Laravel插槽，因此如果您需要将HTML注入到按钮中，请使用以下语法

<x-form::button> Button Content </x-form::button>

此外，如果您希望表单按钮实际上是一个链接，只需将 link 属性添加到组件即可。

<x-form::button title="Login" link="login" />

上述属性将组件渲染为锚点标签。

根据 border-radius 选择，组件将如下所示

边框

所有组件都提供两种不同的边框样式，full 和 bottom。要更改组件边框样式，将 border 属性设置为上述列出的选项之一，添加到您选择的组件中。

如果您想为所有组件设置默认的边框样式，只需更改已发布的 form_components.php 文件中的 component_border。

根据所选的 标签类型，组件将如下所示

边框半径

所有组件都提供三种不同的边框半径样式，squared、rounded-s 和 rounded。要更改组件边框半径样式，将 border-radius 属性设置为上述列出的选项之一，添加到您选择的组件中。

如果您想为所有组件设置默认的边框半径样式，只需更改已发布的 form_components.php 文件中的 component_radius 属性。

无效标题

所有组件都提供了一种突出显示无效字段标题的能力。要启用此功能，将 invalidated-title="true" 添加到您选择的组件中。

如果您想使此功能对所有组件默认启用，只需更改已发布的 form_components.php 文件中的 invalidated_title 属性。

交互性

所有组件都提供了一种在输入时移除验证错误的能力。要启用此功能，将 interactive="true" 添加到您选择的组件中。

如果您想使此功能对所有组件默认启用，只需更改已发布的 form_components.php 文件中的 interactive 属性。

自定义

配置

publish_path - 用于发布组件文件的路径。
prefix - 表单组件前缀，默认为 'form'（例如）。
separator - 表单组件分隔符，默认为 '::'（例如 x-form::button）。
label_type - 表单组件标签样式，默认为 'column'（选项：column、row、floating）。
radius - 表单组件默认边框半径（选项：squared、rounded-s、rounded）。
icon - 表单组件默认图标可见状态。
position - 表单组件默认复选框/单选按钮位置，默认为 'center'（选项：left、center）。
switch - 确定复选框/单选按钮组件是否应显示为开关。
button_radius - 表单组件默认按钮半径（选项：squared、rounded-s、rounded-m、rounded）。
无效标题 - 确定组件标题是否会在无效输入时更改。
密码可见性 - 确定是否渲染密码可见性按钮。
搜索清除 - 确定是否渲染搜索清除按钮。
自动展开 - 确定文本区域高度是否应随输入内容展开。
交互式 - 确定错误是否应在输入时消失。
图像格式 - 要作为标签渲染的图像格式列表
- 示例 1 : svg 格式是数组的一部分，组件图标将以 <img src="..."> 标签渲染。
- 示例 2 : svg 格式不是数组的一部分，组件图标将以 <svg>...</svg> 标签渲染。
默认图标 - 每个组件的默认图标列表。

注意： 在更改 .env 文件后，您可能需要使用 php artisan cache:clear 命令来清除配置缓存。

发布

您可以使用 artisan 以下命令发布所有组件类和视图

php artisan components:publish

可选地，您可以将组件名称作为参数传递，这将仅发布这些组件。

php artisan components:publish Input Password Button

从现在起，您可以按自己的喜好更改已发布的组件类和视图。

恢复

如果您想恢复组件的默认设置，请使用以下 artisan 命令

php artisan components:restore

可选地，您可以将组件名称作为参数传递，这将仅恢复这些组件。

php artisan components:restore Input Password Button

此外，如果您想删除之前发布的组件类和视图，可以附加 --delete 选项

php artisan components:restore --delete

或

php artisan components:restore Input Password Button --delete

注意： 在发布或恢复组件后，您可能需要使用 php artisan cache:clear 命令来清除配置缓存。

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件。

bjnstnkvc / form-components

维护者

详细信息

README

安装与设置

用法

配置

资源

指令

表单组件

基础

输入

密码

电子邮件

搜索

文本域

选择

日期

时间

日期时间

文件

复选框和单选按钮

复选框

单选按钮

开关

选中

按钮

按钮

边框

边框半径

无效标题

交互性

自定义

配置

发布

恢复

许可证