README

安装
基本用法
使用material icons
自动验证状态
模型绑定
不同类型
高级用法
待办事项
致谢
许可证

安装

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

composer require bcdbuddy/portfolio-form

Laravel

此包作为Laravel 5中已删除的表单构建器的替代品表现良好。API不同，但所有功能都在。

如果您正在使用Laravel 4或5，您可以注册FormServiceProvider以自动获取旧输入和错误信息功能。

要这样做，只需更新您的config/app.php中的providers数组。

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

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

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

现在，您可以通过调用PortfolioForm外观的方法来开始使用MaterialForms。

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

Laravel之外

在Laravel之外的使用稍微有些复杂，因为您需要构建一定的依赖堆栈，但这并不太复杂。

$formBuilder = new bcdbuddy\PortfolioForm\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\PortfolioForm($basicMaterialFormsBuilder, $horizontalMaterialFormsBuilder);

注意：当不使用为Laravel准备的实现时，您必须提供自己的bcdbuddy\Form\OldInputInterface和bcdbuddy\Form\ErrorStoreInterface实现。

基本用法

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

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

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

自定义元素

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

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

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

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

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

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

使用material icons

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

或者

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

减少模板代码

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

<form>
  <div class="form-field">
    <input type="text" name="first_name" id="first_name">
    <label for="first_name">First Name</label>
  </div>
  <div class="form-field">
    <input type="text" name="last_name" id="last_name">
    <label for="last_name">Last Name</label>
  </div>
  <div class="form-field">
    <input type="date" name="date_of_birth" id="date_of_birth">
    <label for="date_of_birth">Date of Birth</label>
  </div>
  <div class="form-field">
    <input type="email" name="email" id="email">
    <label for="email">Email address</label>
  </div>
  <div class="form-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为您做了一些决定，并允许您进一步精简它

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

自动验证状态

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

基本上，这会将通常看起来像这样的代码

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

减少到这样

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

...如果会话中有错误，将自动添加data-error类。

模型绑定

MaterialForms使将对象绑定到表单以提供默认值变得容易。更多信息请参阅这里。

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

不同类型

    {!! PortfolioForm::text("Field label", "field_name") !!}
    {!! PortfolioForm::textarea("Field label", "field_name") !!}
    {!! PortfolioForm::email("Field label", "field_name") !!}
    {!! PortfolioForm::password("Field label", "field_name") !!}
    {!! PortfolioForm::file("Field label", "field_name") !!}    
    {!! PortfolioForm::checkbox("Field label", "field_name") !!}
    {!! PortfolioForm::datetime("Field label", "field_name") !!}
    {!! PortfolioForm::date("Field label", "field_name") !!}
    {!! PortfolioForm::time("Field label", "field_name") !!}

高级用法

{!! PortfolioForm::open() !!}
    {!! PortfolioForm::text("Last name", "last_name") !!}
    {!! PortfolioForm::email("Email", "email") !!}
    {!! PortfolioForm::password("Password", "password") !!}
    {!! PortfolioForm::file("File", "file")->placeholder("some file to upload") !!}
    {!! PortfolioForm::checkbox("Remember", "remember")->checked() !!}
    {!! PortfolioForm::checkbox("HTML", "html")->disabled()->checked() !!}
    {!! PortfolioForm::checkbox("Remember filled-in", "remember filled-in")->addClass("filled-in")->checked() !!}
    {!! PortfolioForm::checkbox("Safe", "safe")->addClass("filled-in")->disabled()->checked() !!}
    {!! PortfolioForm::checkbox("Save", "save")->addClass("filled-in")->disabled()!!}
    {!! PortfolioForm::switchCheck("On", "Off", "state") !!}
    {!! PortfolioForm::select("One Select", "one_select", ["1", "2", "5", "10"]) !!}
    {!! PortfolioForm::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()
    {!! PortfolioForm::submit("Send")->icon("send") !!}
{!! PortfolioForm::close() !!}

输出

待办事项

单选按钮输入
开关输入
文件输入

致谢

Adam Wathan BootForms

许可证

MIT

bcdbuddy / portfolio-form

维护者

详细信息