venca-x/nette-form-renderer

Nette 表单渲染器（Twitter Bootstrap v5 和 v4）

维护者

详细信息

github.com/venca-x/nette-form-renderer

源代码

问题

安装次数: 255

依赖项: 0

建议者: 0

安全性: 0

星标: 1

关注者: 1

分支: 1

公开问题: 0

1.1.0 2023-12-30 08:55 UTC

Requires

Requires (Dev)

MIT, BSD-3-Clause, GPL-2.0, GPL-3.0 1670fd604c00d29259212b63ca59abcebff93e33

  • vEnCa-X <venca-x.woop@seznam.cz>

This package is auto-updated.

Last update: 2024-08-30 01:38:08 UTC

README

Tests Coverage Status Latest Stable Version Latest Unstable Version Total Downloads License

Nette Forms 的表单渲染器 - TwitterBootstrap v5 和 v4

安装

使用 composer 安装

composer require venca-x/nette-form-renderer
composer require venca-x/nette-form-renderer:dev-master

基本信息

表单方向的类型

  • 垂直
  • 水平
  • 内联

垂直表单方向是默认的。

Bootstrap v5 渲染

垂直方向表单

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV5());

$form->addEmail('exampleInputEmail1', 'Email address:')
    ->setHtmlAttribute('placeholder', 'Enter email')
    ->setOption('description', 'We\'ll never share your email with anyone else.');
$form->addPassword('exampleInputPassword1', 'Password')
    ->setHtmlAttribute('placeholder', 'Password');
$form->addCheckbox('checkbox', 'Check me out');
$form->addCheckbox('checkbox2', 'Check me out2');

$form->addRadioList('country', 'Country', [
    'cz' => 'Česká republika',
    'sk' => 'Slovensko',
    'eu' => 'EU',
]);

$form->addEmail('exampleInputEmail2', 'Email address')
    ->setHtmlAttribute('placeholder', 'name@example.com');

$form->addSelect('exampleSelect', 'Example select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addMultiSelect('exampleMultipleSelect', 'Example multiple select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addTextArea('textarea', 'Example textarea');

$form->addUpload('upload', 'Example upload');

$form->addMultiUpload('multiUpload', 'Example multiUpload');


//sizes
$form->addEmail('formControlLg', '.form-control-lg')
    ->setHtmlAttribute('class', 'form-control-lg')
    ->setHtmlAttribute('placeholder', '.form-control-lg');

$form->addEmail('formControl', '.form-control')
    ->setHtmlAttribute('placeholder', 'Default input');

$form->addEmail('formControlSm', '.form-control-sm')
    ->setHtmlAttribute('class', 'form-control-sm')
    ->setHtmlAttribute('placeholder', '.form-control-sm');


//sizes select
$form->addSelect('largeSelect', 'Large select', ['Large select'])
    ->setHtmlAttribute('class', 'form-control-lg');

$form->addSelect('defaultSelect', ' Default select', ['Default select']);

$form->addSelect('smallSelect', 'Small select', ['Small select'])
    ->setHtmlAttribute('class', 'form-control-sm');


//disables
$form->addText('disabled', 'Disabled:')
    ->setHtmlAttribute('placeholder', 'Disabled input here…')
    ->setDisabled(true);


$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

垂直方向表单 - 内联的无线电按钮和复选框

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV5());

$form->addCheckbox('mondayCheckbox', 'Monday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('tuesdayCheckbox', 'Tuesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('wednesdayCheckbox', 'Wednesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('thurstdayCheckbox', 'Thurstday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('fridayCheckbox', 'Friday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('saturdayCheckbox', 'Saturday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('sundayCheckbox', 'Sunday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);

$form->addRadioList('weekRadionline', 'Week radio 2', [
    'monday' => 'Monday',
    'tuesday' => 'Tuesday',
    'wednesday' => 'Wednesday',
    'thurstday' => 'Thurstday',
    'friday' => 'Friday',
    'saturday' => 'Saturday',
    'sunday' => 'Sunday',
])->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);

$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

水平方向表单

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV5());

//horizontal form
$renderer = $form->getRenderer();
$renderer->setFormHorizontalOrientation();

//$renderer->setFormControlLabelWidth('col-sm-6');
//$renderer->setFormControlContainerWidth('col-sm-6');

$form->addEmail('exampleInputEmail1', 'Email address:')
    ->setHtmlAttribute('placeholder', 'Enter email')
    ->setOption('description', 'We\'ll never share your email with anyone else.');
$form->addPassword('exampleInputPassword1', 'Password')
    ->setHtmlAttribute('placeholder', 'Password');
$form->addCheckbox('checkbox', 'Check me out');
$form->addCheckbox('checkbox2', 'Check me out2');

$form->addRadioList('country', 'Country', [
    'cz' => 'Česká republika',
    'sk' => 'Slovensko',
    'eu' => 'EU',
]);

$form->addEmail('exampleInputEmail2', 'Email address')
    ->setHtmlAttribute('placeholder', 'name@example.com');

$form->addSelect('exampleSelect', 'Example select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addMultiSelect('exampleMultipleSelect', 'Example multiple select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addTextArea('textarea', 'Example textarea');

$form->addUpload('upload', 'Example upload');

$form->addMultiUpload('multiUpload', 'Example multiUpload');

//sizes
$form->addEmail('formControlLg', '.form-control-lg')
    ->setHtmlAttribute('class', 'form-control-lg')
    ->setHtmlAttribute('placeholder', '.form-control-lg');

$form->addEmail('formControl', '.form-control')
    ->setHtmlAttribute('placeholder', 'Default input');

$form->addEmail('formControlSm', '.form-control-sm')
    ->setHtmlAttribute('class', 'form-control-sm')
    ->setHtmlAttribute('placeholder', '.form-control-sm');


//sizes select
$form->addSelect('largeSelect', 'Large select', ['Large select'])
    ->setHtmlAttribute('class', 'form-control-lg');

$form->addSelect('defaultSelect', ' Default select', ['Default select']);

$form->addSelect('smallSelect', 'Small select', ['Small select'])
    ->setHtmlAttribute('class', 'form-control-sm');


//disables
$form->addText('disabled', 'Disabled:')
    ->setHtmlAttribute('placeholder', 'Disabled input here…')
    ->setDisabled(true);


$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

水平方向表单 - 内联的无线电按钮和复选框

无法将复选框放在同一行上，只有无线电按钮可以内联。

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV5());

//horizontal form
$renderer = $form->getRenderer();
$renderer->setFormHorizontalOrientation();

//$renderer->setFormControlLabelWidth('col-sm-6');
//$renderer->setFormControlContainerWidth('col-sm-6');

//!!!!!!!!! this orientation **don't work** !!!!!!!!!!!!!!!!!
$form->addCheckbox('mondayCheckbox', 'Monday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('tuesdayCheckbox', 'Tuesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('wednesdayCheckbox', 'Wednesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('thurstdayCheckbox', 'Thurstday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('fridayCheckbox', 'Friday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('saturdayCheckbox', 'Saturday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);
$form->addCheckbox('sundayCheckbox', 'Sunday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);

$form->addRadioList('weekRadionline', 'Week radio 2', [
    'monday' => 'Monday',
    'tuesday' => 'Tuesday',
    'wednesday' => 'Wednesday',
    'thurstday' => 'Thurstday',
    'friday' => 'Friday',
    'saturday' => 'Saturday',
    'sunday' => 'Sunday',
])->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV5::FORM_CHECK_INLINE);

$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

内联方向表单

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV5());

//inline form
$renderer = $form->getRenderer();
$renderer->setFormInline();

$form->addEmail('loginemail', 'E-mail address:')
    ->setHtmlAttribute('placeholder', 'Enter e-mail');
$form->addPassword('password', 'Password')
    ->setHtmlAttribute('placeholder', 'Password');
$form->addCheckbox('checkbox', 'Check me out');

$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

Bootstrap v4 渲染

垂直方向表单

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV4());

$form->addEmail('exampleInputEmail1', 'Email address:')
    ->setHtmlAttribute('placeholder', 'Enter email')
    ->setOption('description', 'We\'ll never share your email with anyone else.');
$form->addPassword('exampleInputPassword1', 'Password')
    ->setHtmlAttribute('placeholder', 'Password');
$form->addCheckbox('checkbox', 'Check me out');
$form->addCheckbox('checkbox2', 'Check me out2');

$form->addRadioList('country', 'Country', [
    'cz' => 'Česká republika',
    'sk' => 'Slovensko',
    'eu' => 'EU',
]);

$form->addEmail('exampleInputEmail2', 'Email address')
    ->setHtmlAttribute('placeholder', 'name@example.com');

$form->addSelect('exampleSelect', 'Example select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addMultiSelect('exampleMultipleSelect', 'Example multiple select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addTextArea('textarea', 'Example textarea');

$form->addUpload('upload', 'Example upload');

$form->addMultiUpload('multiUpload', 'Example multiUpload');


//sizes
$form->addEmail('formControlLg', '.form-control-lg')
    ->setHtmlAttribute('class', 'form-control-lg')
    ->setHtmlAttribute('placeholder', '.form-control-lg');

$form->addEmail('formControl', '.form-control')
    ->setHtmlAttribute('placeholder', 'Default input');

$form->addEmail('formControlSm', '.form-control-sm')
    ->setHtmlAttribute('class', 'form-control-sm')
    ->setHtmlAttribute('placeholder', '.form-control-sm');


//sizes select
$form->addSelect('largeSelect', 'Large select', ['Large select'])
    ->setHtmlAttribute('class', 'form-control-lg');

$form->addSelect('defaultSelect', ' Default select', ['Default select']);

$form->addSelect('smallSelect', 'Small select', ['Small select'])
    ->setHtmlAttribute('class', 'form-control-sm');


//disables
$form->addText('disabled', 'Disabled:')
    ->setHtmlAttribute('placeholder', 'Disabled input here…')
    ->setDisabled(true);


$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

垂直方向表单 - 内联的无线电按钮和复选框

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV4());

$form->addCheckbox('mondayCheckbox', 'Monday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('tuesdayCheckbox', 'Tuesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('wednesdayCheckbox', 'Wednesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('thurstdayCheckbox', 'Thurstday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('fridayCheckbox', 'Friday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('saturdayCheckbox', 'Saturday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('sundayCheckbox', 'Sunday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);

$form->addRadioList('weekRadionline', 'Week radio 2', [
    'monday' => 'Monday',
    'tuesday' => 'Tuesday',
    'wednesday' => 'Wednesday',
    'thurstday' => 'Thurstday',
    'friday' => 'Friday',
    'saturday' => 'Saturday',
    'sunday' => 'Sunday',
])->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);

$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

水平方向表单

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV4());

//horizontal form
$renderer = $form->getRenderer();
$renderer->setFormHorizontalOrientation();

//$renderer->setFormControlLabelWidth('col-sm-6');
//$renderer->setFormControlContainerWidth('col-sm-6');

$form->addEmail('exampleInputEmail1', 'Email address:')
    ->setHtmlAttribute('placeholder', 'Enter email')
    ->setOption('description', 'We\'ll never share your email with anyone else.');
$form->addPassword('exampleInputPassword1', 'Password')
    ->setHtmlAttribute('placeholder', 'Password');
$form->addCheckbox('checkbox', 'Check me out');
$form->addCheckbox('checkbox2', 'Check me out2');

$form->addRadioList('country', 'Country', [
    'cz' => 'Česká republika',
    'sk' => 'Slovensko',
    'eu' => 'EU',
]);

$form->addEmail('exampleInputEmail2', 'Email address')
    ->setHtmlAttribute('placeholder', 'name@example.com');

$form->addSelect('exampleSelect', 'Example select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addMultiSelect('exampleMultipleSelect', 'Example multiple select', [
    '1',
    '2',
    '3',
    '4',
    '5', ]);

$form->addTextArea('textarea', 'Example textarea');

$form->addUpload('upload', 'Example upload');

$form->addMultiUpload('multiUpload', 'Example multiUpload');

//sizes
$form->addEmail('formControlLg', '.form-control-lg')
    ->setHtmlAttribute('class', 'form-control-lg')
    ->setHtmlAttribute('placeholder', '.form-control-lg');

$form->addEmail('formControl', '.form-control')
    ->setHtmlAttribute('placeholder', 'Default input');

$form->addEmail('formControlSm', '.form-control-sm')
    ->setHtmlAttribute('class', 'form-control-sm')
    ->setHtmlAttribute('placeholder', '.form-control-sm');


//sizes select
$form->addSelect('largeSelect', 'Large select', ['Large select'])
    ->setHtmlAttribute('class', 'form-control-lg');

$form->addSelect('defaultSelect', ' Default select', ['Default select']);

$form->addSelect('smallSelect', 'Small select', ['Small select'])
    ->setHtmlAttribute('class', 'form-control-sm');


//disables
$form->addText('disabled', 'Disabled:')
    ->setHtmlAttribute('placeholder', 'Disabled input here…')
    ->setDisabled(true);


$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

水平方向表单 - 内联的无线电按钮和复选框

无法将复选框放在同一行上，只有无线电按钮可以内联。

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV4());

//horizontal form
$renderer = $form->getRenderer();
$renderer->setFormHorizontalOrientation();

//$renderer->setFormControlLabelWidth('col-sm-6');
//$renderer->setFormControlContainerWidth('col-sm-6');

//!!!!!!!!! this orientation **don't work** !!!!!!!!!!!!!!!!!
$form->addCheckbox('mondayCheckbox', 'Monday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('tuesdayCheckbox', 'Tuesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('wednesdayCheckbox', 'Wednesday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('thurstdayCheckbox', 'Thurstday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('fridayCheckbox', 'Friday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('saturdayCheckbox', 'Saturday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);
$form->addCheckbox('sundayCheckbox', 'Sunday')->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);

$form->addRadioList('weekRadionline', 'Week radio 2', [
    'monday' => 'Monday',
    'tuesday' => 'Tuesday',
    'wednesday' => 'Wednesday',
    'thurstday' => 'Thurstday',
    'friday' => 'Friday',
    'saturday' => 'Saturday',
    'sunday' => 'Sunday',
])->setOption('orientation', VencaX\NetteFormRenderer\BootstrapRendererV4::FORM_CHECK_INLINE);

$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;

内联方向表单

$form = new Form;
$form->setRenderer(new VencaX\NetteFormRenderer\BootstrapRendererV4());

//inline form
$renderer = $form->getRenderer();
$renderer->setFormInline();

$form->addEmail('loginemail', 'E-mail address:')
    ->setHtmlAttribute('placeholder', 'Enter e-mail');
$form->addPassword('password', 'Password')
    ->setHtmlAttribute('placeholder', 'Password');
$form->addCheckbox('checkbox', 'Check me out');

$form->addSubmit('submit', 'Submit')->setHtmlAttribute('class', 'btn btn-primary');

return $form;