From f13a4d2d9fb411f364a0ab02d93cc766e18d027b Mon Sep 17 00:00:00 2001 From: David Grudl Date: Mon, 6 Nov 2023 18:19:32 +0100 Subject: [PATCH] examples: updated bootstrap examples --- examples/bootstrap2-rendering.php | 97 ------------------- examples/bootstrap4-rendering.php | 12 +-- ...rendering.php => bootstrap5-rendering.php} | 48 +++++---- examples/latte.php | 34 +++++-- examples/latte/form-bootstrap3.latte | 28 ------ examples/latte/form-bootstrap5.latte | 47 +++++++++ examples/latte/form.latte | 12 ++- examples/latte/page.latte | 8 +- 8 files changed, 125 insertions(+), 161 deletions(-) delete mode 100644 examples/bootstrap2-rendering.php rename examples/{bootstrap3-rendering.php => bootstrap5-rendering.php} (52%) delete mode 100644 examples/latte/form-bootstrap3.latte create mode 100644 examples/latte/form-bootstrap5.latte diff --git a/examples/bootstrap2-rendering.php b/examples/bootstrap2-rendering.php deleted file mode 100644 index 3c8353261..000000000 --- a/examples/bootstrap2-rendering.php +++ /dev/null @@ -1,97 +0,0 @@ -getRenderer(); - $renderer->wrappers['controls']['container'] = null; - $renderer->wrappers['pair']['container'] = 'div class=control-group'; - $renderer->wrappers['pair']['.error'] = 'error'; - $renderer->wrappers['control']['container'] = 'div class=controls'; - $renderer->wrappers['label']['container'] = 'div class=control-label'; - $renderer->wrappers['control']['description'] = 'span class=help-inline'; - $renderer->wrappers['control']['errorcontainer'] = 'span class=help-inline'; - $form->getElementPrototype()->class('form-horizontal'); - - foreach ($form->getControls() as $control) { - $type = $control->getOption('type'); - if ($type === 'button') { - $control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn'); - $usedPrimary = true; - - } elseif (in_array($type, ['checkbox', 'radio'], true)) { - $control->getSeparatorPrototype()->setName('div')->addClass($type); - } - } -} - - -$form = new Form; -$form->onRender[] = 'makeBootstrap2'; - -$form->addGroup('Personal data'); -$form->addText('name', 'Your name') - ->setRequired('Enter your name'); - -$form->addRadioList('gender', 'Your gender', [ - 'male', 'female', -]); - -$form->addCheckboxList('colors', 'Favorite colors', [ - 'red', 'green', 'blue', -]); - -$form->addSelect('country', 'Country', [ - 'Buranda', 'Qumran', 'Saint Georges Island', -]); - -$form->addCheckbox('send', 'Ship to address'); - -$form->addGroup('Your account'); -$form->addPassword('password', 'Choose password'); -$form->addUpload('avatar', 'Picture'); -$form->addTextArea('note', 'Comment'); - -$form->addGroup(); -$form->addSubmit('submit', 'Send'); -$form->addSubmit('cancel', 'Cancel'); - - -if ($form->isSuccess()) { - echo '

Form was submitted and successfully validated

'; - Dumper::dump($form->getValues()); - exit; -} - - -?> - - -Nette Forms & Bootstrap v2 rendering example - - - -
-
-

Nette Forms & Bootstrap v2 rendering example

-
- - render() ?> -
diff --git a/examples/bootstrap4-rendering.php b/examples/bootstrap4-rendering.php index 392ef104c..8abd4a17a 100644 --- a/examples/bootstrap4-rendering.php +++ b/examples/bootstrap4-rendering.php @@ -23,12 +23,12 @@ function makeBootstrap4(Form $form): void $renderer = $form->getRenderer(); $renderer->wrappers['controls']['container'] = null; $renderer->wrappers['pair']['container'] = 'div class="form-group row"'; - $renderer->wrappers['pair']['.error'] = 'has-danger'; - $renderer->wrappers['control']['container'] = 'div class=col-sm-9'; $renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"'; + $renderer->wrappers['control']['container'] = 'div class=col-sm-9'; $renderer->wrappers['control']['description'] = 'span class=form-text'; - $renderer->wrappers['control']['errorcontainer'] = 'span class=form-control-feedback'; + $renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback'; $renderer->wrappers['control']['.error'] = 'is-invalid'; + $renderer->wrappers['error']['container'] = 'div class="alert alert-danger"'; foreach ($form->getControls() as $control) { $type = $control->getOption('type'); @@ -36,7 +36,7 @@ function makeBootstrap4(Form $form): void $control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary'); $usedPrimary = true; - } elseif (in_array($type, ['text', 'textarea', 'select'], true)) { + } elseif (in_array($type, ['text', 'textarea', 'select', 'datetime'], true)) { $control->getControlPrototype()->addClass('form-control'); } elseif ($type === 'file') { @@ -49,7 +49,7 @@ function makeBootstrap4(Form $form): void $control->getItemLabelPrototype()->addClass('form-check-label'); } $control->getControlPrototype()->addClass('form-check-input'); - $control->getSeparatorPrototype()->setName('div')->addClass('form-check'); + $control->getContainerPrototype()->setName('div')->addClass('form-check'); } } } @@ -98,7 +98,7 @@ function makeBootstrap4(Form $form): void Nette Forms & Bootstrap v4 rendering example - +

Nette Forms & Bootstrap v4 rendering example

diff --git a/examples/bootstrap3-rendering.php b/examples/bootstrap5-rendering.php similarity index 52% rename from examples/bootstrap3-rendering.php rename to examples/bootstrap5-rendering.php index 9166e2cb0..5c1a845f0 100644 --- a/examples/bootstrap3-rendering.php +++ b/examples/bootstrap5-rendering.php @@ -1,7 +1,7 @@ getRenderer(); $renderer->wrappers['controls']['container'] = null; - $renderer->wrappers['pair']['container'] = 'div class=form-group'; - $renderer->wrappers['pair']['.error'] = 'has-error'; + $renderer->wrappers['pair']['container'] = 'div class="mb-3 row"'; + $renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"'; $renderer->wrappers['control']['container'] = 'div class=col-sm-9'; - $renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"'; - $renderer->wrappers['control']['description'] = 'span class=help-block'; - $renderer->wrappers['control']['errorcontainer'] = 'span class=help-block'; - $form->getElementPrototype()->class('form-horizontal'); + $renderer->wrappers['control']['description'] = 'span class=form-text'; + $renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback'; + $renderer->wrappers['control']['.error'] = 'is-invalid'; + $renderer->wrappers['error']['container'] = 'div class="alert alert-danger"'; foreach ($form->getControls() as $control) { $type = $control->getOption('type'); if ($type === 'button') { - $control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default'); + $control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary'); $usedPrimary = true; - } elseif (in_array($type, ['text', 'textarea', 'select'], true)) { + } elseif (in_array($type, ['text', 'textarea', 'select', 'datetime', 'file'], true)) { $control->getControlPrototype()->addClass('form-control'); } elseif (in_array($type, ['checkbox', 'radio'], true)) { - $control->getSeparatorPrototype()->setName('div')->addClass($type); + if ($control instanceof Nette\Forms\Controls\Checkbox) { + $control->getLabelPrototype()->addClass('form-check-label'); + } else { + $control->getItemLabelPrototype()->addClass('form-check-label'); + } + $control->getControlPrototype()->addClass('form-check-input'); + $control->getContainerPrototype()->setName('div')->addClass('form-check'); + + } elseif ($type === 'color') { + $control->getControlPrototype()->addClass('form-control form-control-color'); } } } $form = new Form; -$form->onRender[] = 'makeBootstrap3'; +$form->onRender[] = 'makeBootstrap5'; $form->addGroup('Personal data'); $form->addText('name', 'Your name') - ->setRequired('Enter your name'); + ->setRequired('Enter your name') + ->setOption('description', 'Name and surname'); + +$form->addDate('birth', 'Date of birth'); $form->addRadioList('gender', 'Your gender', [ 'male', 'female', @@ -67,6 +79,8 @@ function makeBootstrap3(Form $form): void $form->addCheckbox('send', 'Ship to address'); +$form->addColor('color', 'Favourite colour'); + $form->addGroup('Your account'); $form->addPassword('password', 'Choose password'); $form->addUpload('avatar', 'Picture'); @@ -87,14 +101,12 @@ function makeBootstrap3(Form $form): void ?> -Nette Forms & Bootstrap v3 rendering example +Nette Forms & Bootstrap v5 rendering example - +
-
-

Nette Forms & Bootstrap v3 rendering example

-
+

Nette Forms & Bootstrap v5 rendering example

render() ?>
diff --git a/examples/latte.php b/examples/latte.php index 42b8b83a1..07c2fa179 100644 --- a/examples/latte.php +++ b/examples/latte.php @@ -19,18 +19,36 @@ $form = new Form; -$form->addText('name', 'Your name:') - ->setRequired('Enter your name'); +$form->addText('name', 'Your name') + ->setRequired('Enter your name') + ->setOption('description', 'Name and surname'); -$form->addPassword('password', 'Choose password:') - ->setRequired('Choose your password') - ->addRule($form::MinLength, 'The password is too short: it must be at least %d characters', 3); +$form->addDate('birth', 'Date of birth'); -$form->addPassword('password2', 'Reenter password:') - ->setRequired('Reenter your password') - ->addRule($form::Equal, 'Passwords do not match', $form['password']); +$form->addRadioList('gender', 'Your gender', [ + 'male', 'female', +]); + +$form->addCheckboxList('colors', 'Favorite colors', [ + 'red', 'green', 'blue', +]); + +$form->addSelect('country', 'Country', [ + 'Buranda', 'Qumran', 'Saint Georges Island', +]); + +$form->addCheckbox('send', 'Ship to address'); + +$form->addColor('color', 'Favourite colour'); + +$form->addPassword('password', 'Choose password'); +$form->addUpload('avatar', 'Picture'); +$form->addTextArea('note', 'Comment'); $form->addSubmit('submit', 'Send'); +$form->addSubmit('cancel', 'Cancel'); + + if ($form->isSuccess()) { echo '

Form was submitted and successfully validated

'; diff --git a/examples/latte/form-bootstrap3.latte b/examples/latte/form-bootstrap3.latte deleted file mode 100644 index 39af9ffe7..000000000 --- a/examples/latte/form-bootstrap3.latte +++ /dev/null @@ -1,28 +0,0 @@ -
-
    -
  • {$error}
    • -
- -
- -
{label $input /}
- -
- {if $input->getOption(type) in [text, select, textarea]} - {input $input class => form-control} - {elseif $input->getOption(type) === button} - {input $input class => "btn btn-default"} - {elseif $input->getOption(type) === checkbox} -
{input $input}
- {elseif $input->getOption(type) === radio} -
{input $input}
- {else} - {input $input} - {/if} - - {$input->error ?: $input->getOption(description)} -
-
-
diff --git a/examples/latte/form-bootstrap5.latte b/examples/latte/form-bootstrap5.latte new file mode 100644 index 000000000..6726b6346 --- /dev/null +++ b/examples/latte/form-bootstrap5.latte @@ -0,0 +1,47 @@ +{* Generic form template for Bootstrap v5 *} + +
+ {* List for form-level error messages *} +
    +
  • {$error}
    • +
+ + {* Loop over form controls and render each one *} +
+ + {* Label for the input *} +
{label $input /}
+ +
+ {* Conditionally render inputs based on their type with appropriate Bootstrap classes *} + {if $input->getOption(type) in [text, select, textarea, datetime, file]} + {input $input class => form-control} + + {elseif $input->getOption(type) === button} + {input $input class => "btn btn-primary"} + {while $iterator->nextValue?->getOption(type) === button} + {input $iterator->nextValue class => "btn btn-secondary"} + {do $iterator->next()} + {/while} + + {elseif $input->getOption(type) in [checkbox, radio]} + {var $items = $input instanceof Nette\Forms\Controls\Checkbox ? [''] : $input->getItems()} +
+ {input $input:$k class => form-check-input}{label $input:$k class => form-check-label /} +
+ + {elseif $input->getOption(type) === color} + {input $input class => "form-control form-control-color"} + + {else} + {input $input} + {/if} + + {* Display input-level errors or descriptions, if present *} + {$input->error} + {$input->getOption(description)} +
+
+
diff --git a/examples/latte/form.latte b/examples/latte/form.latte index 2582d3678..680e48897 100644 --- a/examples/latte/form.latte +++ b/examples/latte/form.latte @@ -1,15 +1,25 @@ +{* Generic form template *} +
+ {* List for form-level error messages *}
  • {$error}
+ {* Loop over form controls and render each one *} - + +
{label $input /}{input $input} {$input->error} + {input $input} + + {$input->getOption(description)} + {$input->error} +
diff --git a/examples/latte/page.latte b/examples/latte/page.latte index d3db8fa43..e5d8b36e9 100644 --- a/examples/latte/page.latte +++ b/examples/latte/page.latte @@ -3,13 +3,15 @@ Nette Forms rendering using Latte - + -

Nette Forms rendering using Latte

+
+

Nette Forms & Bootstrap v5 rendering example

- {include form.latte form: $form} + {include form-bootstrap5.latte form: $form} +