Skip to content

Commit bbb18f4

Browse files
dgdg
committed
examples: updated bootstrap examples
1 parent c1794e6 commit bbb18f4

File tree

8 files changed

+160
-167
lines changed

8 files changed

+160
-167
lines changed

‎examples/bootstrap2-rendering.php‎

Lines changed: 0 additions & 97 deletions
This file was deleted.

‎examples/bootstrap4-rendering.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,20 @@ function makeBootstrap4(Form $form): void
2323
$renderer = $form->getRenderer();
2424
$renderer->wrappers['controls']['container'] = null;
2525
$renderer->wrappers['pair']['container'] = 'div class="form-group row"';
26-
$renderer->wrappers['pair']['.error'] = 'has-danger';
27-
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
2826
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
27+
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
2928
$renderer->wrappers['control']['description'] = 'span class=form-text';
30-
$renderer->wrappers['control']['errorcontainer'] = 'span class=form-control-feedback';
29+
$renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback';
3130
$renderer->wrappers['control']['.error'] = 'is-invalid';
31+
$renderer->wrappers['error']['container'] = 'div class="alert alert-danger"';
3232

3333
foreach ($form->getControls() as $control) {
3434
$type = $control->getOption('type');
3535
if ($type === 'button') {
3636
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
3737
$usedPrimary = true;
3838

39-
} elseif (in_array($type, ['text', 'textarea', 'select'], true)) {
39+
} elseif (in_array($type, ['text', 'textarea', 'select', 'datetime'], true)) {
4040
$control->getControlPrototype()->addClass('form-control');
4141

4242
} elseif ($type === 'file') {
@@ -49,7 +49,7 @@ function makeBootstrap4(Form $form): void
4949
$control->getItemLabelPrototype()->addClass('form-check-label');
5050
}
5151
$control->getControlPrototype()->addClass('form-check-input');
52-
$control->getSeparatorPrototype()->setName('div')->addClass('form-check');
52+
$control->getContainerPrototype()->setName('div')->addClass('form-check');
5353
}
5454
}
5555
}
@@ -98,7 +98,7 @@ function makeBootstrap4(Form $form): void
9898
<meta charset="utf-8">
9999
<title>Nette Forms & Bootstrap v4 rendering example</title>
100100

101-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
101+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
102102

103103
<div class="container">
104104
<h1>Nette Forms & Bootstrap v4 rendering example</h1>

‎examples/bootstrap3-rendering.php‎ renamed to ‎examples/bootstrap5-rendering.php‎

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

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

77
declare(strict_types=1);
@@ -18,40 +18,52 @@
1818
Debugger::enable();
1919

2020

21-
function makeBootstrap3(Form $form): void
21+
function makeBootstrap5(Form $form): void
2222
{
2323
$renderer = $form->getRenderer();
2424
$renderer->wrappers['controls']['container'] = null;
25-
$renderer->wrappers['pair']['container'] = 'div class=form-group';
26-
$renderer->wrappers['pair']['.error'] = 'has-error';
25+
$renderer->wrappers['pair']['container'] = 'div class="mb-3 row"';
26+
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
2727
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
28-
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"';
29-
$renderer->wrappers['control']['description'] = 'span class=help-block';
30-
$renderer->wrappers['control']['errorcontainer'] = 'span class=help-block';
31-
$form->getElementPrototype()->class('form-horizontal');
28+
$renderer->wrappers['control']['description'] = 'span class=form-text';
29+
$renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback';
30+
$renderer->wrappers['control']['.error'] = 'is-invalid';
31+
$renderer->wrappers['error']['container'] = 'div class="alert alert-danger"';
3232

3333
foreach ($form->getControls() as $control) {
3434
$type = $control->getOption('type');
3535
if ($type === 'button') {
36-
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default');
36+
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
3737
$usedPrimary = true;
3838

39-
} elseif (in_array($type, ['text', 'textarea', 'select'], true)) {
39+
} elseif (in_array($type, ['text', 'textarea', 'select', 'datetime', 'file'], true)) {
4040
$control->getControlPrototype()->addClass('form-control');
4141

4242
} elseif (in_array($type, ['checkbox', 'radio'], true)) {
43-
$control->getSeparatorPrototype()->setName('div')->addClass($type);
43+
if ($control instanceof Nette\Forms\Controls\Checkbox) {
44+
$control->getLabelPrototype()->addClass('form-check-label');
45+
} else {
46+
$control->getItemLabelPrototype()->addClass('form-check-label');
47+
}
48+
$control->getControlPrototype()->addClass('form-check-input');
49+
$control->getContainerPrototype()->setName('div')->addClass('form-check');
50+
51+
} elseif ($type === 'color') {
52+
$control->getControlPrototype()->addClass('form-control form-control-color');
4453
}
4554
}
4655
}
4756

4857

4958
$form = new Form;
50-
$form->onRender[] = 'makeBootstrap3';
59+
$form->onRender[] = 'makeBootstrap5';
5160

5261
$form->addGroup('Personal data');
5362
$form->addText('name', 'Your name')
54-
->setRequired('Enter your name');
63+
->setRequired('Enter your name')
64+
->setOption('description', 'Name and surname');
65+
66+
$form->addDate('birth', 'Date of birth');
5567

5668
$form->addRadioList('gender', 'Your gender', [
5769
'male', 'female',
@@ -67,6 +79,8 @@ function makeBootstrap3(Form $form): void
6779

6880
$form->addCheckbox('send', 'Ship to address');
6981

82+
$form->addColor('color', 'Favourite colour');
83+
7084
$form->addGroup('Your account');
7185
$form->addPassword('password', 'Choose password');
7286
$form->addUpload('avatar', 'Picture');
@@ -87,14 +101,12 @@ function makeBootstrap3(Form $form): void
87101
?>
88102
<!DOCTYPE html>
89103
<meta charset="utf-8">
90-
<title>Nette Forms & Bootstrap v3 rendering example</title>
104+
<title>Nette Forms & Bootstrap v5 rendering example</title>
91105

92-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
106+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
93107

94108
<div class="container">
95-
<div class="page-header">
96-
<h1>Nette Forms & Bootstrap v3 rendering example</h1>
97-
</div>
109+
<h1>Nette Forms & Bootstrap v5 rendering example</h1>
98110

99111
<?php $form->render() ?>
100112
</div>

‎examples/latte.php‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,36 @@
1919

2020

2121
$form = new Form;
22-
$form->addText('name', 'Your name:')
23-
->setRequired('Enter your name');
22+
$form->addText('name', 'Your name')
23+
->setRequired('Enter your name')
24+
->setOption('description', 'Name and surname');
2425

25-
$form->addPassword('password', 'Choose password:')
26-
->setRequired('Choose your password')
27-
->addRule($form::MinLength, 'The password is too short: it must be at least %d characters', 3);
26+
$form->addDate('birth', 'Date of birth');
2827

29-
$form->addPassword('password2', 'Reenter password:')
30-
->setRequired('Reenter your password')
31-
->addRule($form::Equal, 'Passwords do not match', $form['password']);
28+
$form->addRadioList('gender', 'Your gender', [
29+
'male', 'female',
30+
]);
31+
32+
$form->addCheckboxList('colors', 'Favorite colors', [
33+
'red', 'green', 'blue',
34+
]);
35+
36+
$form->addSelect('country', 'Country', [
37+
'Buranda', 'Qumran', 'Saint Georges Island',
38+
]);
39+
40+
$form->addCheckbox('send', 'Ship to address');
41+
42+
$form->addColor('color', 'Favourite colour');
43+
44+
$form->addPassword('password', 'Choose password');
45+
$form->addUpload('avatar', 'Picture');
46+
$form->addTextArea('note', 'Comment');
3247

3348
$form->addSubmit('submit', 'Send');
49+
$form->addSubmit('cancel', 'Cancel');
50+
51+
3452

3553
if ($form->isSuccess()) {
3654
echo '<h2>Form was submitted and successfully validated</h2>';

‎examples/latte/form-bootstrap3.latte‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎examples/latte/form-bootstrap5.latte‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{* Generic form template for Bootstrap v5 *}
2+
3+
{parameters $name}
4+
<form n:name=$name>
5+
{* List for form-level error messages *}
6+
<ul class="alert alert-danger" n:ifcontent>
7+
<li n:foreach="$form->ownErrors as $error">{$error}</li>
8+
</ul>
9+
10+
<fieldset n:foreach="$form->getGroups() as $group" n:attr="id => $group->getOption(id)" class="border rounded-3 p-3 mb-3">
11+
<label class="h4" n:ifcontent>{$group->getOption(label)}</label>
12+
{include controls $group->getControls()}
13+
</fieldset>
14+
15+
{include controls $form->getControls()}
16+
</form>
17+
18+
19+
{define controls array $controls}
20+
{* Loop over form controls and render each one *}
21+
<div n:foreach="$controls as $control"
22+
n:if="!$control->getOption(rendered) && $control->getOption(type) !== hidden"
23+
n:class="mb-3, row, $control->required ? required, $control->error ? is-invalid">
24+
25+
{* Label for the control *}
26+
<div class="col-sm-3 col-form-label">{label $control /}</div>
27+
28+
<div class="col-sm-9">
29+
{include control $control}
30+
{if $control->getOption(type) === button}
31+
{while $iterator->nextValue?->getOption(type) === button}
32+
{input $iterator->nextValue class => "btn btn-secondary"}
33+
{do $iterator->next()}
34+
{/while}
35+
{/if}
36+
37+
{* Display control-level errors or descriptions, if present *}
38+
<span class=invalid-feedback n:ifcontent>{$control->error}</span>
39+
<span class=form-text n:ifcontent>{$control->getOption(description)}</span>
40+
</div>
41+
</div>
42+
{/define}
43+
44+
45+
{define control Nette\Forms\Controls\BaseControl $control}
46+
{* Conditionally render controls based on their type with appropriate Bootstrap classes *}
47+
{if $control->getOption(type) in [text, select, textarea, datetime, file]}
48+
{input $control class => form-control}
49+
50+
{elseif $control->getOption(type) === button}
51+
{input $control class => "btn btn-primary"}
52+
53+
{elseif $control->getOption(type) in [checkbox, radio]}
54+
{var $items = $control instanceof Nette\Forms\Controls\Checkbox ? [''] : $control->getItems()}
55+
<div class="form-check" n:foreach="$items as $key => $foo">
56+
{input $control:$key class => form-check-input}{label $control:$key class => form-check-label /}
57+
</div>
58+
59+
{elseif $control->getOption(type) === color}
60+
{input $control class => "form-control form-control-color"}
61+
62+
{else}
63+
{input $control}
64+
{/if}
65+
{/define}

0 commit comments

Comments
 (0)