README

Laravel Livewire 表单组件，具有声明式 Bootstrap 5 字段和按钮。

安装

composer require codions/laravel-livewire-forms

使用方法

创建新的表单

php artisan make:form users.create-user-form

声明字段

public function fields()
{
    return [
        Input::make('name', 'Name'),
        Input::make('email', 'Email')->type('email'),
        Input::make('password', 'Password')->type('password'),
    ];
}

声明按钮

public function buttons()
{
    return [
        Button::make('Create User')->click('createUser'),
        Button::make('Cancel', 'secondary')->url('/'),
    ];
}

声明规则

public function rules()
{
    return [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => ['required', 'string', 'min:8'],
    ];
}

声明一个操作（注意上面按钮示例中使用了 ->click('createUser')）

public function createUser()
{
    $this->validate();

    User::create([
        'name' => $this->data('name'),
        'email' => $this->data('email'),
        'password' => Hash::make($this->data('password')),
    ]);

    return redirect('/');
}

表单滑块

通过指定 title、layout 和要使用的 route 来创建一个可以滑出的表单

class Login extends FormSliderComponent
{
    public $title = 'Login';
    public $layout = 'layouts.card';
    public $btnText = 'Login';
}

设置初始数据

您可以通过组件的 mount 方法中的 data 数组属性设置初始表单数据/默认值

class UpdateUserForm extends FormComponent
{
    public $title = 'Update User';
    
    public function mount(User $user)
    {
        $this->data = $user->toArray();
    }
}

访问数据

使用组件中的 data 方法访问当前表单数据（您可以使用点表示法来表示数组值）

public function createUser()
{
    User::create([
        'name' => $this->data('name'),
        'email' => $this->data('email'),
        'likes_turtles' => $this->data('answers.likes_turtles'),
    ]);
}

数据绑定

大多数字段允许您通过附加到字段的辅助方法来更改 livewire 绑定数据的方式，例如。

Input::make('name', 'Name'), // defaults to defer
Input::make('name', 'Name')->instant(), // bind on keyup 
Input::make('name', 'Name')->defer(), // bind on action 
Input::make('name', 'Name')->lazy(), // bind on change
Input::make('name', 'Name')->debounce(500), // bind after 500ms delay 

大小

许多字段也允许您指定输入的大小，例如。

Input::make('name', 'Name'), // defaults to normal sizing
Input::make('name', 'Name')->small(), // small sizing
Input::make('name', 'Name')->large(), // large sizing

禁用

某些字段允许您禁用或将其设置为只读，甚至将输入设置为纯文本

Input::make('name', 'Name')->disabled(),
Input::make('name', 'Name')->readonly(),
Input::make('name', 'Name')->plaintext(),

辅助文本

通过使用 help 方法为字段指定辅助文本

Input::make('name', 'Name')->help('Please tell us your name!'),

可用字段

警报 ($message, $style = 'success')

一个警报框。

Alert::make('It worked!'),
Alert::make('Something bad happened.', 'danger'),
Alert::make('Something else happened.')->dismissible(),

$style 参数接受一个 Bootstrap 警报样式，例如 success、danger、primary 等。使用 dismissible 方法使警报可消失。

可用方法：dismissible

可数 ($name, $label = null)

字段数组。

Arrayable::make('locations', 'Locations')->fields([
    Input::make('city')->placeholder('City'),
    Select::make('state')->placeholder('State')->options(['FL', 'TX']),
]),

可用方法：fields、help、disabled

Bootstrap 网格

对表单的 Bootstrap 支持。

行 ($label = null) 和 行列 ($label = null)

在 Bootstrap 行或列中显示字段数组。

Row::make()->fields([
    Input::make('city')->placeholder('City'),
    Select::make('state')->placeholder('State')->options(['FL', 'TX']),
]),

可用方法：fields、help、disabled、isColumn、col_class

按钮 ($label = 'Submit', $style = 'primary')

用于操作和链接的按钮。

Button::make('Register')->click('register'),
Button::make('Already registered?', 'secondary')->route('login'),
Button::make('Go back home', 'link')->url('/'),

$style 参数接受一个 Bootstrap 按钮样式，例如 primary、outline-secondary、link 等。使用 block 方法使按钮全宽。

可用方法：block、click、href、route、url

复选框 ($name, $label)

复选框字段。

Checkbox::make('accept', 'I accept the terms'),
Checkbox::make('accept', 'I accept')->help('Please accept our terms'),
Checkbox::make('active', 'This user is active')->switch(),

使用 switch 方法将复选框样式设置为开关。

可用方法：switch、help、instant、addAttrs、defer、lazy、debounce、disabled

复选框 ($name, $label = null)

复选框字段数组。

Checkboxes::make('colors', 'Colors')->options(['Red', 'Green', 'Blue']),

可用方法：options、switch、help、instant、addAttrs、defer、lazy、debounce、disabled

颜色 ($name, $label = null)

颜色选择器字段。

Color::make('hair_color', 'Hair Color'),

可用方法：small、large、containerSize、help、instant、addAttrs、defer、lazy、debounce、disabled、readonly

条件

用于有条件地显示字段的语句。

Conditional::if($this->data('color') == 'green', [
    Input::make('green', 'Green'),
])->elseif($this->data('color') == 'blue', [
    Input::make('blue', 'Blue'),
])->else([
    Input::make('red', 'Red'),
]),

可用方法：if、elseif、else

动态组件 ($name, $attrs = [])

用于显示动态第三方组件的字段。

DynamicComponent::make('honey'),
DynamicComponent::make('honey', ['recaptcha' => true]),

这将在您的表单中转换为 <x-honey/> 和 <x-honey recaptcha="recaptcha"/>。

文件 ($name, $label = null)

文件上传字段。

File::make('avatar', 'Avatar'),
File::make('photos', 'Photos')->multiple(),
File::make('documents', 'Documents')->multiple()->disk('s3'),

使用 multiple 方法允许多文件上传。可以通过 disk 方法指定要使用的文件系统磁盘（用于文件链接，默认为文件系统配置 default）。

可用方法：disk、multiple、help、disabled

输入 ($name, $label = null)

一个输入字段。

Input::make('name', 'Name'),
Input::make('phone')->placeholder('Phone')->type('tel'),
Input::make('email', 'Email')->type('email')->large(),
Input::make('price', 'Price')->type('number')->append('$')->prepend('.00'),

type 方法接受标准的 HTML 输入类型。与其他输入一样，使用 small 或 large 来调整输入大小。输入字段还支持追加/前置和纯文本。

可用方法：small、large、containerSize、help、instant、addAttrs、defer、lazy、debounce、disabled、readonly、placeholder、type、append、prepend、plaintext

单选框 ($name, $label = null)

一个单选框字段。

Radio::make('gender', 'Gender')->options(['Male', 'Female']),

可用方法：options、switch、help、instant、addAttrs、defer、lazy、debounce、disabled

选择 ($name, $label = null)

一个选择下拉字段。

Select::make('color', 'Color')->options(['Red', 'Green', 'Blue']),
Select::make('color', 'Color')->options([
    '#ff0000' => 'Red',
    '#00ff00' => 'Green',
    '#0000ff' => 'Blue',
])->instant(),
Select::make('user_id', 'User')->options(User::pluck('name', 'id')->toArray()),

可用方法：options、small、large、containerSize、help、instant、addAttrs、defer、lazy、debounce、disabled、placeholder

文本域 ($name, $label = null)

一个文本域字段。

Input::Textarea('bio', 'Biography'),
Input::Textarea('bio', 'Biography')->rows(5),

可用方法：small、large、containerSize、help、instant、addAttrs、defer、lazy、debounce、disabled、readonly、placeholder、rows

视图 ($name, $data = [])

用于在表单内渲染自定义 Blade 视图。

View::make('custom-view', ['hello' => 'world']),

示例示例

代码

namespace App\Http\Livewire\Clients;

use Codions\LaravelLivewireForms\Components\Button;
use Codions\LaravelLivewireForms\Components\FormComponent;
use Codions\LaravelLivewireForms\Components\Input;
use Codions\LaravelLivewireForms\Components\Select;

class CreateClientForm extends FormComponent
{
    public $gridClass = 'row';

    public function fields()
    {
        return [
            Row::make()->fields([
                Input::make('name', 'Name')
                    ->placeholder('Full Name'),
                Input::make('email', 'Email')
                    ->type('email')
                    ->placeholder('Email, example: user@example.com'),
                Select::make('gender', 'Gender')
                    ->placeholder('Gender')
                    ->options(['Male', 'Female'])
                    ->addAttrs(['class' => 'd-block w-full']),
                Input::make('phone_no', 'Contact Number')
                    ->placeholder('(xxx) xxx xxxxx'),
                Input::make('street_address', 'Street Address'),
                Input::make('city', 'City'),
                Input::make('state', 'State / Parist'),
                Input::make('country', 'Country'),
            ])
        ];
    }

    public function buttons()
    {
        return [
            Button::make('Cancel', 'secondary')->url(route('team.index')),
            Button::make()->click('submit'),
        ];
    }
}

致谢

• 本项目是 bastinald/laravel-livewire-forms 的修改版本，作为一个分支，并增加了额外的更改。

许可

Laravel 主题管理器是开源软件，许可协议为 MIT 许可协议。