README

常用的表单组件，使在 Blade 视图中创建表单更加容易和灵活。

旨在供任何人使用。

为便于 Pod Point 员工使用，当未指定类时，默认使用 Pod Point UI 工具包 中的类。

编辑

要编辑此项目，请克隆仓库

git clone git@github.com:Pod-Point/form-components.git

安装 PHP 依赖项

cd form-components
composer install

Laravel 安装

更常见的是，您可能想要导入这些组件以在 Laravel 应用程序（或其他使用 Blade 的框架）中使用。

要使用 Composer 安装它，请要求软件包

composer require pod-point/form-components:^3.0

然后在 Laravel 中，在您的 config/app.php 文件中包含服务提供者

PodPoint\FormComponents\FormComponentsServiceProvider::class,

使用方法

您可以使用 form:: 包前缀将组件插入到 Blade 视图中。

示例

按钮

@include('form::_components.button', [
    'name'     => 'myButton', // optional, sets name and id
    'element'  => 'button', // optional, defaults to button
    'text'     => 'Submit',
    'attributes' => [ // optional
        'type'     => 'submit',
        'disabled' => true,
        ...
    ],
    'classes' => [ // optional
        'input' => 'myInputClass', // button - defaults to 'btn'
    ],
])

@include('form::_components.button', [
    'element'  => 'a',
    'text'     => 'Cancel',
    'attributes' => [ // optional
        'href' => 'http://somewhere',
        ...
    ],
])

复选框

@include('form::_components.checkbox', [
    'name'        => 'myCheckbox', // sets name and id
    'labelText'   => 'Choose option(s)', // optional
    'options'     => [
        'option1' => 'Option 1',
        'option2' => 'Option 2',
    ],
    'values'      => ['option1'], // optional default selected values
    'attributes' => [ // optional
        'disabled' => true,
        ...
    ],
    'classes' => [ // optional
        'formGroup' => 'myFormGroupClass', // outermost container div - defaults to 'form__group'
        'label' => 'myLabelClass', // span that appears above all checkboxes - defaults to 'form__label'
        'inputContainer' => 'myInputContainerClass', // label element container wrapping around each checkbox - defaults to 'checkbox form__field'
        'input' => 'myInputClass', // input checkbox element - defaults to 'form__control'
    ],
])

文件上传

@include('form::_components.file-upload', [
    'name'       => 'myUpload', // sets name and id
    'labelText'  => 'Upload your file', // optional
    'attributes' => [ // optional
        'disabled' => true,
        ...
    ],
    'classes' => [ // optional
        'formGroup' => 'myFormGroupClass', // container div - defaults to 'form__group'
        'label' => 'myLabelClass', // label that appears above input - defaults to 'form__label'
        'input' => 'myInputClass', // input file upload element - defaults to 'form__control form__field'
    ],
])

文本/密码输入

@include('form::_components.input', [
    'name'        => 'myTextbox', // sets name and id
    'type'        => 'text', // optional, defaults to 'text'
    'value'       => 'Some text', // optional default value
    'labelText'   => 'Type here', // optional
    'explanation' => 'Explanation copy', // optional
    'attributes' => [ // optional 
        'placeholder' => 'A hint to the user',
        'required' => true,
        ...
    ],
    'classes' => [ // optional
        'formGroup' => 'myFormGroupClass', // container div - defaults to 'form__group'
        'label' => 'myLabelClass', // label that appears above input - defaults to 'form__label'
        'input' => 'myInputClass', // input element - defaults to 'form__control form__field'
    ],
])

单选按钮

@include('form::_components.radio', [
    'name'        => 'myRadio', // sets name and id
    'labelText'   => 'Choose an option', // optional
    'options'     => [
        'option1' => 'Option 1',
        'option2' => 'Option 2',
    ],
    'value'       => 'option1', // optional default selected value
    'attributes' => [ // optional
        'disabled' => true,
        ...
    ],
    'classes' => [ // optional
        'formGroup' => 'myFormGroupClass', // outermost container div - defaults to 'form__group'
        'label' => 'myLabelClass', // span that appears above all radio buttons - defaults to 'form__label'
        'inputContainer' => 'myInputContainerClass', // label element container wrapping around each radio button - defaults to 'radio form__field'
        'input' => 'myInputClass', // input radio element - defaults to 'form__control'
    ],
])

下拉选择框

@include('form::_components.select', [
    'name'        => 'mySelect', // sets name and id
    'labelText'   => 'Choose an option',
    'options'     => [
        'option1' => 'Option 1',
        'option2' => 'Option 2',
    ],
    'value'       => 'option1', // optional default selected value
    'attributes' => [ // optional 
        'required' => true,
        ...
    ],
    'classes' => [ // optional
        'formGroup' => 'myFormGroupClass', // outermost container div - defaults to 'form__group'
        'label' => 'myLabelClass', // label that appears above input - defaults to 'form__label'
        'inputContainer' => 'myInputContainerClass', // div container wrapping around select - defaults to 'select form__field'
        'input' => 'myInputClass', // select element - defaults to 'form__control'
    ],
])

文本域

@include('form::_components.textarea', [
    'name'       => 'myTextarea', // sets name and id
    'labelText'  => 'Type here', // optional
    'value'      => 'Some text', // optional default value
    'attributes' => [ // optional 
        'placeholder' => 'A hint to the user',
        'required' => true,
        ...
    ],
    'classes' => [ // optional
        'formGroup' => 'myFormGroupClass', // container div - defaults to 'form__group'
        'label' => 'myLabelClass', // label that appears above input - defaults to 'form__label'
        'input' => 'myInputClass', // textarea element - defaults to 'form__control form__field'
    ],
])

分组自动完成选择（请注意这依赖于 typeahead JS 文件）

@include('form::_components.grouped-typeahead', [
    'name'        => 'phoneNumber', // sets name and of the number field
    'countryName' => 'country', // sets name and id of the country select field
    'labelText'   => 'Type here', // optional
    'options'     => $countryCodeOptions,
    'value'       => 'GB',
    'attributes' => [
        'required' => true,
        ...
    ],
    'classes' => [ // optional
        'formGroup' => 'myFormGroupClass', // outermost container div - defaults to 'form__group'
        'label' => 'myLabelClass', // label that appears above input - defaults to 'form__label'
    ],
])

属性

一些关键属性，例如 name，可以直接设置（请参阅每个组件的示例）。

对于所有组件，可以使用 attributes 数组设置任何其他属性。这些是可选的。

当需要时，attributes 可以接受文本值，例如

...
    'attributes' => [
        'type' => 'submit',
    ],
...

或者它们可以接受布尔值 - 如果使用了布尔值，则该属性将在值为真时包含，例如 <input disabled>，或在值为假时省略，例如 <input>

...
    'attributes' => [
        'disabled' => true,
    ],
...

类

对于所有组件，所有 classes 都是可选的。

如果未指定元素类，则默认为 Pod Point UI 工具包中适当类（请参阅以下每个组件的详细信息）。

如果您希望元素没有任何类，请将该元素的类设置为 ''，例如

...
    'classes' => [
        'input' => '',
    ],
...