srmklive/bootforms

一个带有一些Bootstrap特定便利性的表单构建器。记住旧输入,检索错误信息,并自动处理所有你的Bootstrap模板标记。

v1.0.3 2019-06-20 12:02 UTC

This package is auto-updated.

Last update: 2024-09-10 01:46:29 UTC


README

StyleCI Build Status

简介

此插件允许您在Laravel应用程序中快速生成表单。

致谢

此软件包是基于bootforms(由Adam Wathan维护)的分支,后者不再积极维护。

使用Composer安装

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

composer require srmklive/bootforms

Laravel

如果您正在使用Laravel 5或更高版本,您可以通过注册包含的服务提供程序来快速开始。

修改config/app.php中的providers数组以包含BootFormsServiceProvider

'providers' => [
    //...
    Srmklive\BootForms\BootFormsServiceProvider::class
  ],

BootForm外观添加到config/app.php中的aliases数组

'aliases' => [
    //...
    'BootForm' => Srmklive\BootForms\Facades\BootForm::class
  ],

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

BootForm::text('Email', 'email');

使用BootForms

基本用法

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

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

注意:在尝试创建字段之前,别忘了使用open()打开表单!BootForms需要在渲染字段之前知道您是否打开了垂直或水平表单,所以如果您忘记,您将收到一个错误。

自定义元素

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

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

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

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

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

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

减少模板代码

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

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

BootForms为您做了一些决定,并允许您进一步缩减它

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

自动验证状态

BootForms的另一个优点是,如果它在错误存储中看到某个控件有错误,它会自动将错误状态和错误消息添加到控件中。

实质上,这会将通常看起来像这样的代码

<div class="form-group {!! $errors->has('first_name') ? 'has-error' : '' !!}">
  <label for="first_name">First Name</label>
  <input type="text" class="form-control" id="first_name">
  {!! $errors->first('first_name', '<p class="help-block">:message</p>') !!}
</div>

并缩减为这样

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

...如果会话中有错误,则自动添加has-error类。

水平表单

要使用水平表单而不是标准基本表单,只需将BootForm::open()调用与openHorizontal($columnSizes)调用交换即可

// Width in columns of the left and right side
// for each breakpoint you'd like to specify.
$columnSizes = [
  'sm' => [4, 8],
  'lg' => [2, 10]
];

{!! BootForm::openHorizontal($columnSizes) !!}
  {!! BootForm::text('First Name', 'first_name') !!}
  {!! BootForm::text('Last Name', 'last_name') !!}
  {!! BootForm::text('Date of Birth', 'date_of_birth') !!}
  {!! BootForm::email('Email', 'email') !!}
  {!! BootForm::password('Password', 'password') !!}
  {!! BootForm::submit('Submit') !!}
{!! BootForm::close() !!}

其他技巧

隐藏标签

您可以通过从任何元素定义中链式调用hideLabel()辅助函数来隐藏标签。

BootForm::text('First Name', 'first_name')->hideLabel()

标签仍然会在标记中生成,但会使用Bootstrap的.sr-only类隐藏,这样您就不会降低表单的可访问性。

帮助块

您可以使用helpBlock()辅助函数在表单元素下方添加帮助块。

BootForm::text('Password', 'password')->helpBlock('一个强壮的密码应该很长且难以猜测。')

注意:如果有验证错误,此帮助块将被错误覆盖。

模型绑定

BootForms使绑定对象到表单以提供默认值变得容易。有关更多信息,请参阅此处

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

相关资源