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
- Fully valid 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
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
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 | meaning |
|---|---|
| mode | see render mode above in form section |
| gridBreakPoint | Bootstrap grid breakpoint for side-by-side view. Default is 'sm' |
| groupInlineInputs | If consecutive inline elements, such as buttons should be grouped together. For list of elements, see Czubehead\BootstrapForms\Enums\RendererConfig::inlineClasses |
- Made by czubehead
- Componette link
- Packagist link
-
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
