README

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

要求

• Bootstrap 5

安装

composer require simtabi/gechemba

使用

创建新表单

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 FormComponent
{
    public $title = 'Login';
    public $layout = 'layouts.card';

    public function route()
    {
        return Route::get('/login', static::class)
            ->name('login')
            ->middleware('guest');
    }

通过使用我的 laravel-livewire-routes 包，提供了 route 方法。

设置初始数据

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

class UpdateUserForm extends FormComponent
{
    public $title = 'Update User';
    
    public function route()
    {
        return Route::get('/users/update/{user}', static::class)
            ->name('users.update')
            ->middleware('auth');
    }
    
    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!'),

可用字段

Alert ($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

Arrayable ($name, $label = null)

字段数组。

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

可用方法：fields、help、disabled

Button ($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

Checkbox ($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、defer、lazy、debounce、disabled

Checkboxes ($name, $label = null)

复选框字段数组。

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

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

Color ($name, $label = null)

颜色选择器字段。

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

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

Conditional

一个用于条件显示字段的语句。

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

DynamicComponent ($name, $attrs = [])

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

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

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

File ($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、help、instant、defer、lazy、debounce、disabled、readonly、placeholder、type、append、prepend、plaintext

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

一个单选字段。

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

可用方法：options、switch、help、instant、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、help、instant、defer、lazy、debounce、disabled、placeholder

多行文本框($name, $label = null)

一个多行文本字段。

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

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

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

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

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