README

安装

通过 Composer

$ composer require spindogs/laravel-spin-forms

在安装/更新时，建议清除视图缓存。如果这里有新组件，则需要手动从 spin-forms.php 配置文件中复制，或者使用 --force 标志重新发布服务提供者。注意：使用 --force 命令将覆盖您的配置文件，因此如果您有任何自定义控制器或视图，请重新修改。

php artisan view:clear

一些组件需要额外的 JavaScript 与 FE Baseline 一起使用，这些 JavaScript 由组件生成，但您需要将代码添加到布局页面以显示它。

@stack('scripts')

组件

表单
表单包装
表单字段集
表单组（已弃用）
错误列表
按钮
标签
输入
文本域
复选框
单选按钮
选择框
日期选择器
时间选择器
日期/时间选择器
帮助

修改

您可以通过更改配置文件中的视图和类键来修改/覆盖任何模板。为此，您需要发布供应商文件。

php artisan vendor:publish --provider="Spindogs\LaravelSpinForms\SpinFormsServiceProvider"

return [
    'components' => [
        'form' => [
            'view'  => 'spin-forms::components.form', // DEFAULT
            'view'  => 'components.spin-forms.form', // OVERRIDE
            'class' => \Spindogs\LaravelSpinForms\View\Components\Form::class
        ],
    ]
]

示例

表单

选项

method - 字符串 - 允许方法：DELETE，GET，HEAD，OPTIONS，PATCH，POST，PUT（默认：POST）
files - 布尔值（默认：false）

DELETE，PATCH，PUT 将触发 Laravel @method 命令来模拟动词。

files 变量将为表单标签添加 enctype/multipart。这需要以布尔值的形式发送，因此需要在组件中作为 :files="true"。

<x-form method="POST" :files="true">
</x-form>

错误列表

在列表中显示所有表单错误。

<x-form-error-list />

按钮

选项

type - 字符串 - 预期输入：button/reset/submit（默认：submit）

这需要一个插槽作为按钮内容的入口。

<x-form-button type="submit">
Submit Form
</x-form-button>

表单包装

选项

field-identifier - 字符串 - 将出现的表单元素类型（《null》）

该元素用于围绕所有表单元素控件创建一个 div 包装器。它将显示其内部的内容。字段标识符通常自动生成。

<x-form-wrap field-identifier="__text">
    ...
</x-form-wrap>

表单字段集

该元素用于容纳复选框/单选按钮。应使用 Fieldset 而不是 Group 以提高可访问性。但我们没有删除 Group 以保持向后兼容。这些元素除以下方面外相同：HTML 输出，标题是必需的。

选项

name - 字符串 - 组内要显示的输入名称，这是正确样式错误所必需的（必需）
type - 字符串 - 要生成 Form Wrap 组件的字段标识符所需的 checkbox 或 radio（必需）
title - 字符串 - 组内元素的标题（必需）
required - 布尔值 - 在标题旁边添加星号（默认：false）
show-error - 布尔值 - 定义是否在元素下显示错误文本（默认：false）

<x-form-fieldset name="some-name-for-input" type="radio" title="This is the title of the elements" :required="true">
    ...
</x-form-fieldset>

表单组（已弃用）

此元素已弃用，但仍将可用于向后兼容。这几乎与 Form Fieldset 相同。

选项

name - 字符串 - 组内要显示的输入名称，这是正确样式错误所必需的（必需）
type - 字符串 - 要生成 Form Wrap 组件的字段标识符所需的 checkbox 或 radio（必需）
title - 字符串 - 组内元素的标题（默认：null）
required - 布尔值 - 在标题旁边添加星号（默认：false）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
show-error - 布尔值 - 定义是否在元素下显示错误文本（默认：false）

<x-form-group name="some-name-for-input" type="radio" title="This is the title of the elements" :required="true">
    ...
</x-form-group>

输入

选项

name - 字符串 - 输入名称（必需）
id - 字符串 - 输入 ID，如果没有提供，将随机生成（默认：null）
label - 字符串 - 输入标签（默认：null）
类型 - 字符串 - 可用于输入的所有适用类型，虽然不推荐用于复选框/单选框（默认：文本）
值 - 字符串 - 这是页面元素上的默认值（默认：空）
必填 - 布尔值 - 在标签旁边添加星号，并在输入中添加必填标签（默认：假）
只读 - 布尔值 - 向输入添加只读属性（默认：假）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
显示错误 - 布尔值 - 定义是否在元素下方显示错误文本（默认：真）

还接受所有属性并合并，如min、max、step等。

<x-form-input type="text" label="Text Input" name="text-input" value="Default text input" />
<x-form-input type="number" label="Number Input" name="number-input" value="Default number input" min="1" max="10" />

文本域

选项

名称 - 字符串 - 文本区域的名称（必填）
id - 字符串 - 文本区域的ID，如果没有提供，将随机生成（默认：空）
标签 - 字符串 - 文本区域的标签（默认：空）
值 - 字符串 - 这是页面元素上的默认值（默认：空）
必填 - 布尔值 - 在标签旁边添加星号，并在输入中添加必填标签（默认：假）
只读 - 布尔值 - 向输入添加只读属性（默认：假）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
显示错误 - 布尔值 - 定义是否在元素下方显示错误文本（默认：真）

还接受所有属性并合并。

<x-form-textarea label="Textarea" name="textarea-input" value="Lorem Ipsum" />

复选框

选项

name - 字符串 - 输入名称（必需）
id - 字符串 - 如果没有提供，复选框的ID将随机生成（默认：空）
标签 - 字符串 - 复选框的标签，如果留为空，则表示为  （默认：空）
值 - 字符串 - 当复选框被选中时的值（默认：1）
选中 - 布尔值 - 表示复选框是否应默认选中（默认：假）
必填 - 布尔值 - 在标签旁边添加星号（默认：假）
只读 - 布尔值 - 向输入添加只读属性（默认：假）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
show-error - 布尔值 - 定义是否在元素下显示错误文本（默认：false）

强烈建议在使用复选框时利用表单组元素。

<x-form-group name="sign-up" type="checkbox">
    <x-form-checkbox name="sign-up" label="Sign up to the Newsletter!" />
</x-form-group>

<x-form-group name="checkbox-items" type="checkbox" title="Select some items!">
    <x-form-checkbox name="checkbox-items[item-1]" label="Item 1" :selected="true" />
    <x-form-checkbox name="checkbox-items[item-2]" label="Item 2" />
    <x-form-checkbox name="checkbox-items[item-3]" label="Item 3" />
    <x-form-checkbox name="checkbox-items[item-4]" label="Item 4" />
</x-form-group>

单选按钮

选项

name - 字符串 - 输入名称（必需）
id - 字符串 - 如果没有提供，单选按钮的ID将随机生成（默认：空）
标签 - 字符串 - 复选框的标签，如果留为空，则表示为  （默认：空）
值 - 字符串 - 当单选按钮被选中时的值（默认：空）
选中 - 布尔值 - 表示复选框是否应默认选中（默认：假）
只读 - 布尔值 - 向输入添加只读属性（默认：假）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
show-error - 布尔值 - 定义是否在元素下显示错误文本（默认：false）

强烈建议在使用单选按钮时利用表单组元素。

<x-form-group name="favourite-team" type="radio" title="Select Your Favourite Team!" :required="true">
    <x-form-radio name="favourite-team" label="Arsenal" :selected="true" />
    <x-form-radio name="favourite-team" label="Chelsea" />
    <x-form-radio name="favourite-team" label="Liverpool" />
    <x-form-radio name="favourite-team" label="Man United" />
</x-form-group>

选择框

选项

名称 - 字符串 - 下拉列表的名称（必填）
id - 字符串 - 下拉列表的ID，如果没有提供，将随机生成（默认：空）
标签 - 字符串 - 下拉列表的标签（默认：空）
选项 - 数组 - 键 => 数组 [name, image] 每个下拉列表的选项数组。（默认：[]）
选中 - 字符串/数组 - 页面视图上的默认选择列表/单个键。（默认：空）
required - 布尔值 - 在标题旁边添加星号（默认：false）
只读 - 布尔值 - 向输入添加只读属性（默认：假）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
多选 - 布尔值 - 允许多选（默认：假）
图片 - 布尔值 - 向每个选项添加图片，必须为数组才能正确工作（默认：假）
搜索 - 布尔值 - 允许在下拉列表中搜索（默认：真）
显示错误 - 布尔值 - 定义是否在元素下方显示错误文本（默认：真）
占位符 - 字符串 - 向下拉列表添加占位符行，添加其内容（默认：空，与图片不兼容）

目前与optgroup不兼容。

关于 $options 和 $selected 的示例

$options = [
    'arsenal' => ['name' => 'Arsenal', 'image' => '/images/badge/arsenal.png'],
    'chelsea' => ['name' => 'Chelsea', 'image' => '/images/badge/chelsea.png'],
    'liverpool' => ['name' => 'Liverpool', 'image' => '/images/badge/liverpool.png'],
    'man-united' => ['name' => 'Manchester United', 'image' => '/images/badge/man-united.png']
];

$selected_singular = 'arsenal';

$selected_multiple = ['arsenal', 'liverpool'];

<x-form-select label="Select" name="select1" :options="$options" :required="true" :selected="$selected" placeholder="Select a Team" />

<x-form-select label="Select - no search" name="select2" :options="$options" :required="true" :selected="$selected" :search="false" placeholder="Select a Team"  />

<x-form-select label="Select - images" name="select3" :options="$options" :required="true" :selected="$selected" :images="true" />

<x-form-select label="Select - multiselect" name="select4[]" :options="$options" placeholder="Select a Team" :multiple="true"/>

<x-form-select label="Select - multiselect" name="select5[]" :options="$options" :required="true" :selected="$selected_multiple" :multiple="true" :images="true" placeholder="Select a Team" />

日期选择器

选项

name - 字符串 - 输入名称（必需）
id - 字符串 - 输入 ID，如果没有提供，将随机生成（默认：null）
label - 字符串 - 输入标签（默认：null）
值 - 字符串 - 这是页面元素上的默认值。必须是 Y-m-d 格式，否则不会渲染默认日期（默认：空）
required - 布尔值 - 在标题旁边添加星号（默认：false）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
显示错误 - 布尔值 - 定义是否在元素下方显示错误文本（默认：真）

<x-form-date-picker label="Date Picker" name="date-picker" default="2020-12-01" />

日期和时间选择器

选项

name - 字符串 - 输入名称（必需）
id - 字符串 - 输入 ID，如果没有提供，将随机生成（默认：null）
label - 字符串 - 输入标签（默认：null）
值 - 字符串 - 这是页面元素上的默认值。必须是 Y-m-d H:i 格式，否则不会渲染默认日期/时间（默认：空）
required - 布尔值 - 在标题旁边添加星号（默认：false）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
显示错误 - 布尔值 - 定义是否在元素下方显示错误文本（默认：真）

<x-form-date-time-picker label="Date/Time Picker" name="date-time-picker" default="2020-12-01 13:44" />

时间选择器

选项

name - 字符串 - 输入名称（必需）
id - 字符串 - 输入 ID，如果没有提供，将随机生成（默认：null）
label - 字符串 - 输入标签（默认：null）
值 - 字符串 - 这是页面元素上的默认值。必须是 H:i 格式，否则不会渲染默认时间。正则表达式以验证（默认：空）
required - 布尔值 - 在标题旁边添加星号（默认：false）
field-wrap - 布尔值 - 在 field wrap div/class 内包装输入（默认：true）
显示错误 - 布尔值 - 定义是否在元素下方显示错误文本（默认：真）

<x-form-time-picker label="Time Picker" name="time-picker" value="12:34" />

帮助

您还可以使用插槽 pre_help 和 post_help 添加帮助文本，在输入元素之前和/或之后

<x-form-input type="text" id="adam" name="text-input">
    @slot('pre_help')
        Some help text before the form element
    @endslot
    @slot('post_help')
        Some help text after the form element
    @endslot
</x-form-input>

变更日志

请参阅变更日志获取最近更改的更多信息。

贡献

请参阅contributing.md获取详细信息和待办事项列表。

安全性

如果您发现任何与安全相关的问题，请通过achapman@spindogs.com发送电子邮件，而不是使用问题跟踪器。

spindogs / laravel-spin-forms

维护者

详细信息