README

BootForms最初由Adam Wathan创建。它基于更通用的Form包，通过添加另一层抽象来快速生成标准Bootstrap 5表单的标记。可能不适合您的超级定制品牌发布应用，但在原型设计阶段可以节省大量时间！

安装
使用BootForms
相关资源

使用Composer安装

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

composer require typicms/bootforms

Laravel

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

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

'providers' => [
    //...
    'TypiCMS\BootForms\BootFormsServiceProvider'
  ],

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

'aliases' => [
    //...
    'BootForm' => 'TypiCMS\BootForms\Facades\BootForm'
  ],

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

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

外部Laravel

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

$formBuilder = new TypiCMS\Form\FormBuilder;

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

$basicBootFormsBuilder = new TypiCMS\BootForms\BasicFormBuilder($formBuilder);
$horizontalBootFormsBuilder = new TypiCMS\BootForms\HorizontalFormBuilder($formBuilder);

$bootForm = new TypiCMS\BootForms\BootForm($basicBootFormsBuilder, $horizontalBootFormsBuilder);

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

使用BootForms

基本用法

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

//  <form method="post">
//    <div class="mb-3">
//      <label for="field_name" class="form-label">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="mb-3">
//    <label for="first_name" class="form-label">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="mb-3">
//   <label for="color" class="form-label">Color</label>
//   <select class="form-select" 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="mb-3">
//    <label for="first_name" class="form-label">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');

有关更多信息，请参阅Form包的文档。

减少样板代码

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

<form>
  <div class="mb-3">
    <label for="first_name" class="form-label">First Name</label>
    <input type="text" class="form-control" name="first_name" id="first_name" />
  </div>
  <div class="mb-3">
    <label for="last_name" class="form-label">Last Name</label>
    <input type="text" class="form-control" name="last_name" id="last_name" />
  </div>
  <div class="mb-3">
    <label for="date_of_birth" class="form-label">Date of Birth</label>
    <input type="date" class="form-control" name="date_of_birth" id="date_of_birth" />
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" name="email" id="email" />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" name="password" id="password" />
  </div>
  <button type="submit" class="btn btn-primary">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="mb-3">
//      <label for="amount" class="form-label">Amount</label>
//      <div class="input-group">
//          <span class="input-group-text">$</span>
//          <input type="number" name="amount" id="amount" class="form-control">
//      </div>
//  </div>
{!! BootForm::inputGroup('Amount', 'amount')->type('number')->beforeAddon('<span class="input-group-text">$</span>') !!}

附加按钮。

//  <div class="mb-3">
//      <label for="email">Email</label>
//      <div class="input-group">
//          <input type="text" name="email" id="email" class="form-control">
//          <button type="submit" class="btn btn-primary">OK</button>
//      </div>
//  </div>
{!! BootForm::inputGroup('Email', 'email')->afterAddon(BootForm::submit('OK')) !!}

自动验证状态

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

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

<div class="mb-3">
  <label for="first_name" class="form-label">First Name</label>
  <input type="text" class="form-control {!! $errors->has('first_name') ? 'is-invalid' : '' !!}" id="first_name">
  {!! $errors->first('first_name', '<div class="invalid-feedback">:message</div>') !!}
</div>

简化为这个

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

…如果有错误在会话中，自动添加is-invalid类。

水平表单

要使用水平表单而不是标准基本表单，只需将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的.visually-hidden类来隐藏，这样就不会降低你表单的可访问性。

表单文本

你可以使用formText()辅助函数在表单元素下方添加一个文本块。

BootForm::text('Password', 'password')->formText('A strong password should be long and hard to guess.')

模型绑定

BootForms使得将对象绑定到表单以提供默认值变得简单。更多关于它的信息请参阅这里。

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

typicms / bootforms

维护者

详细信息