Skip to content

Commit d764b90

Browse files
dgdg
committed
examples: improved bootstrap rendering
1 parent c7c2d0d commit d764b90

File tree

3 files changed

+174
-70
lines changed

3 files changed

+174
-70
lines changed

‎examples/bootstrap2-rendering.php‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?php
22

33
/**
4-
* Nette Forms & Bootstap 2 rendering example.
4+
* Nette Forms & Bootstap v2 rendering example.
55
*/
66

77

@@ -16,7 +16,35 @@
1616
Debugger::enable();
1717

1818

19+
function makeBootstrap2(Form $form)
20+
{
21+
$renderer = $form->getRenderer();
22+
$renderer->wrappers['controls']['container'] = NULL;
23+
$renderer->wrappers['pair']['container'] = 'div class=control-group';
24+
$renderer->wrappers['pair']['.error'] = 'error';
25+
$renderer->wrappers['control']['container'] = 'div class=controls';
26+
$renderer->wrappers['label']['container'] = 'div class=control-label';
27+
$renderer->wrappers['control']['description'] = 'span class=help-inline';
28+
$renderer->wrappers['control']['errorcontainer'] = 'span class=help-inline';
29+
$form->getElementPrototype()->class('form-horizontal');
30+
31+
$form->onRender[] = function ($form) {
32+
foreach ($form->getControls() as $control) {
33+
$type = $control->getOption('type');
34+
if ($type === 'button') {
35+
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn');
36+
$usedPrimary = TRUE;
37+
38+
} elseif (in_array($type, ['checkbox', 'radio'], TRUE)) {
39+
$control->getSeparatorPrototype()->setName('div')->addClass($type);
40+
}
41+
}
42+
};
43+
}
44+
45+
1946
$form = new Form;
47+
makeBootstrap2($form);
2048

2149
$form->addGroup('Personal data');
2250
$form->addText('name', 'Your name')
@@ -26,7 +54,7 @@
2654
'male', 'female',
2755
]);
2856

29-
$form->addCheckboxList('colors', 'Favorite colors:', [
57+
$form->addCheckboxList('colors', 'Favorite colors', [
3058
'red', 'green', 'blue',
3159
]);
3260

@@ -53,43 +81,16 @@
5381
}
5482

5583

56-
57-
// setup form rendering
58-
$renderer = $form->getRenderer();
59-
$renderer->wrappers['controls']['container'] = NULL;
60-
$renderer->wrappers['pair']['container'] = 'div class=control-group';
61-
$renderer->wrappers['pair']['.error'] = 'error';
62-
$renderer->wrappers['control']['container'] = 'div class=controls';
63-
$renderer->wrappers['label']['container'] = 'div class=control-label';
64-
$renderer->wrappers['control']['description'] = 'span class=help-inline';
65-
$renderer->wrappers['control']['errorcontainer'] = 'span class=help-inline';
66-
67-
// make form and controls compatible with Twitter Bootstrap
68-
$form->getElementPrototype()->class('form-horizontal');
69-
70-
foreach ($form->getControls() as $control) {
71-
$type = $control->getOption('type');
72-
if ($type === 'button') {
73-
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn');
74-
$usedPrimary = TRUE;
75-
76-
} elseif (in_array($type, ['checkbox', 'radio'], TRUE)) {
77-
$control->getLabelPrototype()->addClass($type);
78-
$control->getSeparatorPrototype()->setName(NULL);
79-
}
80-
}
81-
82-
8384
?>
8485
<!DOCTYPE html>
8586
<meta charset="utf-8">
86-
<title>Nette Forms & Bootstrap 2 rendering example</title>
87+
<title>Nette Forms & Bootstrap v2 rendering example</title>
8788

8889
<link rel="stylesheet" media="screen" href="https://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" />
8990

9091
<div class="container">
9192
<div class="page-header">
92-
<h1>Nette Forms & Bootstrap 2 rendering example</h1>
93+
<h1>Nette Forms & Bootstrap v2 rendering example</h1>
9394
</div>
9495

9596
<?php echo $form ?>

‎examples/bootstrap3-rendering.php‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?php
22

33
/**
4-
* Nette Forms & Bootstap 3 rendering example.
4+
* Nette Forms & Bootstap v3 rendering example.
55
*/
66

77

@@ -16,7 +16,38 @@
1616
Debugger::enable();
1717

1818

19+
function makeBootstrap3(Form $form)
20+
{
21+
$renderer = $form->getRenderer();
22+
$renderer->wrappers['controls']['container'] = NULL;
23+
$renderer->wrappers['pair']['container'] = 'div class=form-group';
24+
$renderer->wrappers['pair']['.error'] = 'has-error';
25+
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
26+
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"';
27+
$renderer->wrappers['control']['description'] = 'span class=help-block';
28+
$renderer->wrappers['control']['errorcontainer'] = 'span class=help-block';
29+
$form->getElementPrototype()->class('form-horizontal');
30+
31+
$form->onRender[] = function ($form) {
32+
foreach ($form->getControls() as $control) {
33+
$type = $control->getOption('type');
34+
if ($type === 'button') {
35+
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default');
36+
$usedPrimary = TRUE;
37+
38+
} elseif (in_array($type, ['text', 'textarea', 'select'], TRUE)) {
39+
$control->getControlPrototype()->addClass('form-control');
40+
41+
} elseif (in_array($type, ['checkbox', 'radio'], TRUE)) {
42+
$control->getSeparatorPrototype()->setName('div')->addClass($type);
43+
}
44+
}
45+
};
46+
}
47+
48+
1949
$form = new Form;
50+
makeBootstrap3($form);
2051

2152
$form->addGroup('Personal data');
2253
$form->addText('name', 'Your name')
@@ -26,7 +57,7 @@
2657
'male', 'female',
2758
]);
2859

29-
$form->addCheckboxList('colors', 'Favorite colors:', [
60+
$form->addCheckboxList('colors', 'Favorite colors', [
3061
'red', 'green', 'blue',
3162
]);
3263

@@ -53,50 +84,16 @@
5384
}
5485

5586

56-
57-
// setup form rendering
58-
$renderer = $form->getRenderer();
59-
$renderer->wrappers['controls']['container'] = NULL;
60-
$renderer->wrappers['pair']['container'] = 'div class=form-group';
61-
$renderer->wrappers['pair']['.error'] = 'has-error';
62-
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
63-
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"';
64-
$renderer->wrappers['control']['description'] = 'span class=help-block';
65-
$renderer->wrappers['control']['errorcontainer'] = 'span class=help-block';
66-
67-
// make form and controls compatible with Twitter Bootstrap
68-
$form->getElementPrototype()->class('form-horizontal');
69-
70-
foreach ($form->getControls() as $control) {
71-
$type = $control->getOption('type');
72-
if ($type === 'button') {
73-
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default');
74-
$usedPrimary = TRUE;
75-
76-
} elseif (in_array($type, ['text', 'textarea', 'select'], TRUE)) {
77-
$control->getControlPrototype()->addClass('form-control');
78-
79-
} elseif (in_array($type, ['checkbox', 'radio'], TRUE)) {
80-
$control->getSeparatorPrototype()->setName('div')->addClass($type);
81-
}
82-
}
83-
84-
8587
?>
8688
<!DOCTYPE html>
8789
<meta charset="utf-8">
88-
<title>Nette Forms & Bootstrap 3 rendering example</title>
90+
<title>Nette Forms & Bootstrap v3 rendering example</title>
8991

90-
<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
91-
<style>
92-
form {
93-
max-width: 50em;
94-
}
95-
</style>
92+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
9693

9794
<div class="container">
9895
<div class="page-header">
99-
<h1>Nette Forms & Bootstrap 3 rendering example</h1>
96+
<h1>Nette Forms & Bootstrap v3 rendering example</h1>
10097
</div>
10198

10299
<?php echo $form ?>

‎examples/bootstrap4-rendering.php‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<?php
2+
3+
/**
4+
* Nette Forms & Bootstap v4 rendering example.
5+
*/
6+
7+
8+
if (@!include __DIR__ . '/../vendor/autoload.php') {
9+
die('Install packages using `composer install`');
10+
}
11+
12+
use Nette\Forms\Form;
13+
use Tracy\Debugger;
14+
use Tracy\Dumper;
15+
16+
Debugger::enable();
17+
18+
19+
function makeBootstrap4(Form $form)
20+
{
21+
$renderer = $form->getRenderer();
22+
$renderer->wrappers['controls']['container'] = NULL;
23+
$renderer->wrappers['pair']['container'] = 'div class="form-group row"';
24+
$renderer->wrappers['pair']['.error'] = 'has-danger';
25+
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
26+
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
27+
$renderer->wrappers['control']['description'] = 'span class=form-text';
28+
$renderer->wrappers['control']['errorcontainer'] = 'span class=form-control-feedback';
29+
30+
$form->onRender[] = function ($form) {
31+
foreach ($form->getControls() as $control) {
32+
$type = $control->getOption('type');
33+
if ($type === 'button') {
34+
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
35+
$usedPrimary = TRUE;
36+
37+
} elseif (in_array($type, ['text', 'textarea', 'select'], TRUE)) {
38+
$control->getControlPrototype()->addClass('form-control');
39+
40+
} elseif ($type === 'file') {
41+
$control->getControlPrototype()->addClass('form-control-file');
42+
43+
} elseif (in_array($type, ['checkbox', 'radio'], TRUE)) {
44+
if ($control instanceof Nette\Forms\Controls\Checkbox) {
45+
$control->getLabelPrototype()->addClass('form-check-label');
46+
} else {
47+
$control->getItemLabelPrototype()->addClass('form-check-label');
48+
}
49+
$control->getControlPrototype()->addClass('form-check-input');
50+
$control->getSeparatorPrototype()->setName('div')->addClass('form-check');
51+
}
52+
}
53+
};
54+
}
55+
56+
57+
$form = new Form;
58+
makeBootstrap4($form);
59+
60+
$form->addGroup('Personal data');
61+
$form->addText('name', 'Your name')
62+
->setRequired('Enter your name');
63+
64+
$form->addRadioList('gender', 'Your gender', [
65+
'male', 'female',
66+
]);
67+
68+
$form->addCheckboxList('colors', 'Favorite colors', [
69+
'red', 'green', 'blue',
70+
]);
71+
72+
$form->addSelect('country', 'Country', [
73+
'Buranda', 'Qumran', 'Saint Georges Island',
74+
]);
75+
76+
$form->addCheckbox('send', 'Ship to address');
77+
78+
$form->addGroup('Your account');
79+
$form->addPassword('password', 'Choose password');
80+
$form->addUpload('avatar', 'Picture');
81+
$form->addTextArea('note', 'Comment');
82+
83+
$form->addGroup();
84+
$form->addSubmit('submit', 'Send');
85+
$form->addSubmit('cancel', 'Cancel');
86+
87+
88+
if ($form->isSuccess()) {
89+
echo '<h2>Form was submitted and successfully validated</h2>';
90+
Dumper::dump($form->getValues());
91+
exit;
92+
}
93+
94+
95+
?>
96+
<!DOCTYPE html>
97+
<meta charset="utf-8">
98+
<title>Nette Forms & Bootstrap v4 rendering example</title>
99+
100+
<link rel="stylesheet" href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css">
101+
102+
<div class="container">
103+
<h1>Nette Forms & Bootstrap v4 rendering example</h1>
104+
105+
<?php echo $form ?>
106+
</div>

0 commit comments

Comments
 (0)