包简介

Nette extension for Bootstrap 4 forms

README 文档

README

Please use English in potential issues, let's keep it clean, shall we?

This is a library that lets you use Bootstrap 4 forms in Nette framework.

Rather than being just a renderer, this introduces a custom set of controls (which covers all default controls) and a renderer.

Note that this is an alpha, so it may be buggy. That is where you can help by reporting issues.

See example here

Features

Bootstrap 4 forms HTML generation
All layout modes: vertical, side-by-side and inline
TextInput placeholders
Highly configurable renderer
Custom Bootstrap controls
DateTime picker, variety of human readable date/time formats, placeholder example generation
Validation styles
Programmatically generated Bootstrap grid
Assisted manual rendering

Installation

The best way is via composer:

composer require czubehead/bootstrap-4-forms

Note that if you simply clone the main branch from this repo, it is not guaranteed to work, use releases instead

Requirements

Works with Nette\Application\UI\Form, not Nette\Forms\Form, so you need the whole Nette framework.
PHP 5.6+
Client-side bootstrap 4 stylesheets and JS (obviously)

Compatibility

This package is compatible with any version version of Bootstrap 4 (last tested on v4.0.0-beta.2)

How to use

Form

Probably the main class you will be using is Czubehead\BootstrapForms\BootstrapForm. It has all the features of this library pre-configured and extends Nette\Application\UI\Form functionality by:

Only accepts Czubehead\BootstrapForms\BootstrapRenderer or its children (which is default)
Built-in AJAX support (adds ajax class upon rendering) via ajax(bool) property
Has direct access to render mode property of renderer (property renderMode)
All add* methods are overridden by bootstrap-enabled controls

$form = new BootstrapForm;
$form->renderMode = RenderMode::Vertical;

It will behave pretty much the same as the default Nette form, with the exception of not grouping buttons. That feature would only add unnecessary and deceiving overhead to this library, use grid instead, it will give you much finer control

Render modes

Vertical (Enums\RenderMode::VerticalMode) all controls are below their labels
Side-by-side (Enums\RenderMode::SideBySideMode) controls have their labels on the left. It is made up using Bootstrap grid. The default layout is 3 columns for labels and 9 for controls. This can be altered using BootstrapRenderer::setColumns($label, $input).
Inline Enums\RenderMode::Inline all controls and labels will be in one enormous line

Controls / inputs

Each default control has has been extended bootstrap-enabled controls and will render itself correctly even without the renderer. You can distinguish them easily - they all have Input suffix.

TextInput

TextInput can have placeholder set ($input->setPlaceholder($val)). All text-based inputs (except for TextArea) inherit from this control.

DateTimeInput

Its format can be set ($input->setFormat($str)), the default is d.m.yyyy h:mm (though you must specify it in standard PHP format!).

You may use DateTimeFormats class constants as a list of pretty much all formats:

DateTimeFormat::D_DMY_DOTS_NO_LEAD . ' ' . DateTimeFormat::T_24_NO_LEAD

is the default format for DateTime. See its PhpDoc for further explanation.

UploadInput

Nothing out of ordinary, but it Needs <html lang="xx"> attribute to work.

Has property buttonCaption, which sets the text on the button on the left. The right button is set by Bootstrap CSS, which depends <html lang="xx">.

SelectInput, MultiSelectInput

These can accept nested arrays of options.

[
    'sub' => [
        1 => 'opt1',
        2 => 'opt2'
    ],
    3     => 'opt3',
]

will generate

<optgroup label="sub">
    <option value="1">opt1</option>
    <option value="2">opt2</option>
</optgroup>
<option value="3">opt3</option>

Renderer

The renderer is enhanced by the following API:

property	type	meaning
mode	int constant	see render mode above in form section
gridBreakPoint	string / null	Bootstrap grid breakpoint for side-by-side view. Default is 'sm'
groupHidden	bool	if true, hidden fields will be grouped at the end. If false, hidden fields are placed where they were added. Default is true.

Grid

The library provides a way to programmatically place controls into Bootstrap grid and thus greatly reduces the need for manual rendering.

Simply add a new row like this:

$row = $form->addRow();
$row->addCell(6)
    ->addText('firstname', 'First name');
$row->addCell(6)
    ->addText('surname', 'Surname');

And firstname and surname will be beside each other.

Notes

By calling getElementPrototype() on row or cell, you can influence the elements of row / cell
A cell can only hold one control (or none)
You are not limited to numerical column specification. Also check out \Czubehead\BootstrapForms\Grid\BootstrapCell::COLUMNS_NONE and \Czubehead\BootstrapForms\Grid\BootstrapCell::COLUMNS_AUTO

Assisted manual rendering

Why do we use manual rendering? Mostly to just rearrange the inputs, we rarely create a completely different feel. But there is a hefty price for using manual rendering - we have to do almost everything ourselves, even the things the renderer could do for us. Only if there were a way to let the renderer do most of the work...

What can it do

Assisted manual rendering will render label-input pairs for you using a filter. This means that it will take care of wrapping things into div.form-group and validation messages - the most mundane thing to implement in a template.

Implementation

First of all, you must implement this yourself, this won't work out of the box! The implementation is quite dirty, but I think the benefits outweigh this cost.

It works like this:

1. Implement a filter

add a new filter to your latte engine, for example:

$this->template->addFilter('formPair', function ($control) {
    /** @var BootstrapRenderer $renderer */
    $renderer = $control->form->renderer;
    $renderer->attachForm($control->form);

    return $renderer->renderPair($control);
});

2. Use it

{$form['firstname']|formPair|noescape}

That will result in

<div class="form-group row">
    <label for="frm-form-firstname" class="col-sm-3">First name</label>

    <div class="col-sm-9">
        <input type="text" name="firstname" id="frm-form-firstname" class="form-control">
    </div>
</div>

czubehead/bootstrap-4-forms 适用场景与选型建议

czubehead/bootstrap-4-forms 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 19.52k 次下载、GitHub Stars 达 10，最近一次更新时间为 2017 年 07 月 09 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「bootstrap」「library」「Forms」「nette」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 czubehead/bootstrap-4-forms 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 czubehead/bootstrap-4-forms 我们能提供哪些服务？

定制开发 / 二次开发

基于 czubehead/bootstrap-4-forms 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 czubehead/bootstrap-4-forms 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

atk14/confirmation-field 0

ConfirmationField is a form field for Atk14 applications. It's like the BooleanField (checkbox) but the ConfirmationField must be ticked.

atk14/localized-decimal-field 0

Field for number with restricted count of digits and decimal places

axelarge/html-helpers 6

HTML and form generation

shipsaas/laravel-inbox-process 13

Inbox pattern process implementation for your Laravel Applications

emmanuel/livewire-datatable-bs4 16

Views for the package MedicOneSystems Livewire Datatables with Bootstrap 4

tlapnet/datus 1

Build forms from schema

czubehead/bootstrap-4-forms

包简介

关键字：