Bootstrap 4 forms for Nette
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 early alpha, so it may be buggy. That is where you can help by reporting issues.
Features
- Fully valid Bootstrap 4 forms HTML generation
- All layout modes: vertical, side-by-side and inline
- TextInput placeholders
- Mostly just extends vanilla functionality, so all features should be preserved
- DateTime picker, variety of human readable date/time formats, placeholder example generation
What is missing (but is planned)
This is where you can help by contributing
- Multilingual support
- More configurability
Installation
The best way is via composer:
composer require czubehead/bootstrap-4-formsRequirements
- 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)
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(which is default) - Built-in AJAX support (adds
ajaxclass upon rendering) viaajax(bool) property - Has direct access to render mode property of renderer
- All add* methods are overridden by bootstrap-enabled controls
- Can change autocomplete on/off on all controls
It will behave pretty much the same as the default Nette form
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.
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>- Made by czubehead
- Componette link
- Packagist link
