Bootstrap 4 forms for Nette
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.
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-formsNote 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, notNette\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\BootstrapRendereror its children (which is default) - Built-in AJAX support (adds
ajaxclass upon rendering) viaajax(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 usingBootstrapRenderer::setColumns($label, $input). - Inline
Enums\RenderMode::Inlineall 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_LEADis 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_NONEand\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>-
v0.3 Bootstrap grid
The most important change is that inputs can now be programatically arranged into a Bootstrap grid. Some more minor features were added.
One feature was removed - renderer propertygroupInlineInputs, as it is fully replaced by the grid system. -
v0.2.2 First stable
Seems to be working well. Fixed bugs.
This is mostly a checkpoint stable release before grid experiments. -
v0.2.1 Bug fixes, correct custom controls.
This release has mainly changed radios, checkboxes and upload input.
-
v0.2 Support for B4 beta, new core, overall structural improvements
This mainly addresses the fact that I didn't really know what the default renderer did, so I rewrote it completely adding some new features along the way:
- Validation (green or red outline + feedback)
- What should be handled at control level is controlled at control level (for manual rendering)
- A distinct and complete list of supported options and configurations
- Inline controls (buttons by default) are grouped in one line.
- Wiki, so you can customise this library
- Bug fixes and consistency fixes
-
v0.1.2 Bug fixes
DateTime input fixed, DateTime has auto placeholder generation.
-
v0.1.1 first alpha
You can normally use this. Future not-backwards compatible updates reserved.
-
v0.1.0 test, do not use
