Jak udělat hezký formulář Bootstrap
- mimacala
- Člen | 113
Opět zdravím s prosíkem :)
Pokud mohu v latte takto snadno udělat bootstrap formulář.
{block content}
<div class="container" >
<div class="row justify-content-center">
<div class="col">
</div>
<div class="col">
<form>
<div class="form-group">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
</div>
<div class="col">
</div>
</div>
</div>
{/block}
Je nějaká možnost jak jej zasadit do presenteru popřípadě jak
v presenteru vytvořit nastylovaný formulář ?
Já použil část kódu na vyzkoušení z jiného vlákna viz. níže, ale
zdá se mi to zbytečně krkolomné, určitě existuje i nějaký jednodušší
a rychlejší způsob jak udělat hezký formulář ?
Moc děkuji
<?php
namespace App\Components\Formulare;
use Nette\Application\UI\Form;
use App\model\Kontrola;
use Nette\Security\User;
class FormularPrihlaseni
{
public function __construct(
private Kontrola $kontrola,
private User $user,
)
{
}
public function create(): Form
{
$form = new Form;
$form->addEmail('email', 'Email:');
$form->addPassword('heslo', 'Heslo:');
$form->addSubmit('send', 'Přihlásit');
$this->makeBootstrap4($form);
$form->onSuccess[] = [$this, 'OnSucceeded'];
return $form;
}
public function OnSucceeded(Form $form, $data): void
{
$identity = $this->kontrola->authenticate($data->email, $data->heslo);
$this->user->login($identity);
}
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']['description'] = 'span class=form-text';
$renderer->wrappers['control']['errorcontainer'] = 'span class=form-control-feedback';
$renderer->wrappers['control']['.error'] = 'is-invalid';
foreach ($form->getControls() as $control) {
$type = $control->getOption('type');
if ($type === 'button') {
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
$usedPrimary = true;
} elseif (in_array($type, ['text', 'textarea', 'select'], true)) {
$control->getControlPrototype()->addClass('form-control');
} elseif ($type === 'file') {
$control->getControlPrototype()->addClass('form-control-file');
} elseif (in_array($type, ['checkbox', 'radio'], true)) {
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->getSeparatorPrototype()->setName('div')->addClass('form-check');
}
}
}
}
- JakubH
- Člen | 13
Ahoj,
je možné vložit n:name tag i do @layout ?
áno je to možné.
Zkouším ted formulář v headeru ale k @layout není presenter :/.
K @layout presenter nie je, to čo si predáš v tvojom presentri sa predá aj do @layout.
- Marek Bartoš
- Nette Blogger | 1280
Vykresluješ klasický presenter nebo error presenter? Hlásí to nějakou chybu? Jak vypadá vykreslovaná šablona?
Jinak jak psal Jakub, layout se vykresluje v kontextu presenteru, takže funguje totéž co v šabloně presenteru.