Zmena renderovania Control-u
- zerb
- Člen | 7
Ahojte,
v aplikácii potrebujem urobiť formuláre v štýle material design.
Na formuláre používam bootstrap4 renderer z examplov na githube nette forms.
Potrebujem prinútiť TextInput, aby vyrenderoval takýto zápis:
<input>
<label>
<span class="xx">
Aktuálne sa mi TextInput vyrenderuje takto:
<label>
<input>
Potrebujem teda zmeniť poradie vyrenderovaného inputu a labelu a pridať za ne span.
Manuálny rendering formov nie je pre mňa riešenie, nakoľko má mať tento štýl každý formulár v aplikácii.
Vie mi niekto poradiť, ako by som toto mohol dosiahnuť? Vopred ďakujem.
- lightteka
- Backer | 17
Ja bych na to sel asi upravou (prepsanim) metody renderPair() v rendereru. Rad se ale poucim o lepsim postupu.
class MyRenderer extends \Nette\Forms\Rendering\DefaultFormRenderer
{
public function renderPair(Nette\Forms\IControl $control)
{
if ($control instanceof Nette\Forms\Controls\TextInput) {
$pair = $this->getWrapper('pair container');
// Prohozeni poradi
$pair->addHtml($this->renderControl($control));
$pair->addHtml($this->renderLabel($control));
// pridani vlastniho spanu
$pair->addHtml(Nette\Utils\Html::el('span')->setAttribute('class', 'xx'));
$pair->class($this->getValue($control->isRequired() ? 'pair .required' : 'pair .optional'), TRUE);
$pair->class($control->hasErrors() ? $this->getValue('pair .error') : NULL, TRUE);
$pair->class($control->getOption('class'), TRUE);
if (++$this->counter % 2) {
$pair->class($this->getValue('pair .odd'), TRUE);
}
$pair->id = $control->getOption('id');
return $pair->render(0);
}
return parent::renderPair($control);
}
}
class MyForm extends \Nette\Application\UI\Form
{
public function __construct(Nette\ComponentModel\IContainer $parent = null, $name = null)
{
parent::__construct($parent, $name);
$this->setRenderer(new MyRenderer());
}
}
public function createComponentForm($name)
{
$form = new MyForm();
$form->addText('test', 'Label');
$form->addSubmit('send', 'Odeslat');
$form->onRender[] = 'makeBootstrap4';
return $form;
}