README

安装
基本用法
使用material icons
自动验证状态
模型绑定
高级用法
许可证

安装

您可以通过在项目根目录下的终端中运行此命令来使用Composer安装此包：

composer require bcdbuddy/material-form

Laravel

此包作为Laravel 5中删除的Form Builder的替代品表现良好。API不同，但所有功能都齐全。

如果您正在使用Laravel 4或5，可以通过更新config/app.php中的providers数组来注册FormServiceProvider，从而自动获得对旧输入和错误信息功能的访问。

为此，只需更新您的config/app.php中的providers数组

'providers' => [
    //...
    'bcdbuddy\MaterialForm\ServiceProvider'
],

您还可以选择通过在config/app.php中添加别名来使用外观

'aliases' => [
    //...
    'MaterialForm' => 'bcdbuddy\MaterialForm\Facades\MaterialForm',
],

现在，您可以通过直接在MaterialForm外观上调用方法来开始使用MaterialForms

MaterialForm::email('Email', 'email');
MaterialForm::text('First name', 'first_name');
MaterialForm::password('Password', 'password');

Laravel之外

在Laravel之外使用稍微有点棘手，因为您需要构建一个依赖栈，但这并不太难。

$formBuilder = new bcdbuddy\MaterialForm\FormBuilder;

$formBuilder->setOldInputProvider($myOldInputProvider);
$formBuilder->setErrorStore($myErrorStore);
$formBuilder->setToken($myCsrfToken);

$basicMaterialFormsBuilder = new bcdbuddy\MaterialForms\BasicFormBuilder($formBuilder);
$horizontalMaterialFormsBuilder = new bcdbuddy\MaterialForms\HorizontalFormBuilder($formBuilder);

$bootForm = new bcdbuddy\MaterialForms\MaterialForm($basicMaterialFormsBuilder, $horizontalMaterialFormsBuilder);

注意：如果您不使用为Laravel提供的实现，则必须提供自己的bcdbuddy\Form\OldInputInterface和bcdbuddy\Form\ErrorStoreInterface实现。

基本用法

MaterialForms允许您在单个调用中创建标签和表单控件，并将其包装在表单组中。

//  <form method="POST">
//    <div class="input-field">
//      <label for="field_name">Field Label</label>
//      <input type="text" id="field_name" name="field_name">
//    </div>
//  </form>
{!! MaterialForm::open() !!}
    {!! MaterialForm::text('Field Label', 'field_name') !!}
{!! MaterialForm::close() !!}

注意：在尝试创建字段之前，不要忘记调用open()表单！

自定义元素

如果您需要以任何方式自定义表单元素（例如，向文本元素添加默认值或占位符），只需按需链式调用所需的方法，它们将传递到底层的表单元素。

可以通过attribute方法添加属性，或者简单地使用属性名称作为方法名称。

// <div class="input-field">
//    <input type="text" id="first_name" name="first_name" placeholder="John Doe">
//    <label for="first_name">First Name</label>
// </div>
MaterialForm::text('First Name', 'first_name')->placeholder('John Doe');

// <div class="input-field">
//   <select  id="color" name="color">
//     <option value="red">Red</option>
//     <option value="green" selected>Green</option>
//   </select>
//   <label for="color">Color</label>
// </div>
MaterialForm::select('Color', 'color')->options(['red' => 'Red', 'green' => 'Green'])->select('green');

// <form method="GET" action="/users">
MaterialForm::open()->get()->action('/users');

// <div class="input-field">
//    <label for="first_name">First Name</label>
//    <input type="text" id="first_name" name="first_name" value="John Doe">
// </div>
MaterialForm::text('First Name', 'first_name')->defaultValue('John Doe');

使用material icons

MaterialForm::open()->post()->action('/posts/'. $post->id);
    MaterialForm::bind($post)
    MaterialForm::text("Title", "title")
    MaterialForm::textarea("Content", "content")
    MaterialForm::submit("Save")->icon('save')
MaterialForm::close()

或者

MaterialForm::open()->post()->action('/user/login');
    MaterialForm::text("Login", "login")->icon("account_circle")
    MaterialForm::password("Password", "password")->icon("security")
    MaterialForm::submit("Login")->icon('')
MaterialForm::close()

简化模板

典型的Materialize表单模板可能看起来像这样

<form>
  <div class="input-field">
    <input type="text" name="first_name" id="first_name">
    <label for="first_name">First Name</label>
  </div>
  <div class="input-field">
    <input type="text" name="last_name" id="last_name">
    <label for="last_name">Last Name</label>
  </div>
  <div class="input-field">
    <input type="date" name="date_of_birth" id="date_of_birth">
    <label for="date_of_birth">Date of Birth</label>
  </div>
  <div class="input-field">
    <input type="email" name="email" id="email">
    <label for="email">Email address</label>
  </div>
  <div class="input-field">
    <input type="password" name="password" id="password">
    <label for="password">Password</label>
  </div>
  <button type="submit" class="btn waves-effect waves-light">Submit</button>
</form>

MaterialForms为您做出了一些决定，并允许您进一步精简

{!! MaterialForm::open() !!}
  {!! MaterialForm::text('First Name', 'first_name') !!}
  {!! MaterialForm::text('Last Name', 'last_name') !!}
  {!! MaterialForm::date('Date of Birth', 'date_of_birth') !!}
  {!! MaterialForm::email('Email', 'email') !!}
  {!! MaterialForm::password('Password', 'password') !!}
  {!! MaterialForm::submit('Submit') !!}
{!! MaterialForm::close() !!}

自动验证状态

关于MaterialForms的另一个优点是，如果它看到错误存储中对该控件有错误，则会自动将错误状态和错误消息添加到您的控件中。

基本上，这会将代码简化为以下形式

<div class="input-field">
  <input type="text" id="first_name" data-error="{!! $errors->first('first_name')"/>
  <label for="first_name">First Name</label>
</div>

并减少到以下形式

{!! MaterialForm::text('First Name', 'first_name') !!}

...如果会话中存在错误，则自动添加data-error类。

模型绑定

MaterialForms使您轻松地将对象绑定到表单以提供默认值。更多信息请参阅这里。

MaterialForm::open()->action( route('users.update', $user) )->put()
MaterialForm::bind($user)
MaterialForm::close()

高级用法

{!! MaterialForm::open() !!}
    {!! MaterialForm::text("Last name", "last_name")->data("length", 10) !!}
    {!! MaterialForm::email("Email", "email") !!}
    {!! MaterialForm::password("Password", "password") !!}
    {!! MaterialForm::file("File", "file")->placeholder("some file to upload") !!}
    {!! MaterialForm::checkbox("Remember", "remember")->checked() !!}
    {!! MaterialForm::checkbox("HTML", "html")->disabled()->checked() !!}
    {!! MaterialForm::checkbox("Remember filled-in", "remember filled-in")->addClass("filled-in")->checked() !!}
    {!! MaterialForm::checkbox("Safe", "safe")->addClass("filled-in")->disabled()->checked() !!}
    {!! MaterialForm::checkbox("Save", "save")->addClass("filled-in")->disabled()!!}
    {!! MaterialForm::switchCheck("On", "Off", "state") !!}
    {!! MaterialForm::select("One Select", "one_select", ["1", "2", "5", "10"]) !!}
    {!! MaterialForm::select("One icon Select", "one_icon_select", ["1", "2", "5", "10"], ["http://lorempicsum.com/futurama/350/200/1", "http://lorempicsum.com/futurama/350/200/2", "http://lorempicsum.com/futurama/350/200/5", "http://lorempicsum.com/futurama/350/200/6"])->left() !!} // or right()
    {!! MaterialForm::submit("Send")->icon("send") !!}
{!! MaterialForm::close() !!}

bcdbuddy / material-form

维护者

详细信息