[英]Add CSS to Form Type is Symfony2
我有一个编辑表单,该表单是通过 symfony2 表单类型制作的。 我检查了文档,但找不到任何将 CSS 添加到表单的选项。 表单正确显示数据,一切都很好,我想做的是为每个字段添加样式。
我的编辑类型是
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('id', 'hidden')
->add('patent_name', 'text', array('label' => 'Patent Name'))
->add('description', 'textarea', array('label' => 'Description', 'required' => false))
->add('appln_auth','text', array('label' => 'Application Authorization'))
;
}
任何人都知道我可以添加 css 吗?
谢谢
这是您在构建表单时可以执行的方法,
$builder->add('field_name', 'text', array('label' => 'Field Label', 'attr' => array('class' => 'fieldClass')));
您也可以在渲染表单字段时执行此操作,查看Twig 模板表单函数参考
{{ form_label(form.field, 'label', { 'attr': {'class': 'foo'} }) }}
{{ form_widget(form.field, { 'attr': {'class': 'bar'} }) }}
然后,您可以在您的捆绑公共资产中添加一个 css 文件,并使用以下命令在您的模板中调用它,
{% block stylesheets %}
{% parent() %} {# if you want to keep base template's stylesheets #}
<link href="{{ asset('bundle/myBundle/css/stylesheet.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
然后,您必须使您的公共资产可通过您的 web/ 目录访问。 最好的方法是创建针对捆绑公共资产的符号链接,然后执行
assets:install web/ --symlink
当您想要彻底自定义特定的表单字段呈现块 (Twig) 时,另一种有用的方法是定义一个新的表单主题,这里是文档 > Twig 中的表单主题。
这可能有帮助:
$builder->add('patent_name', 'text', array('label' => 'Patent Name', 'attr' => array('class' => 'someclass')));
如果要向字段添加类,则必须以这种方式在构建表单的add
操作中使用attr
特殊属性
$builder->add('field_name', 'yourType', array('attr' => array('class' => 'fieldClass')));
如果要改为链接样式表,则必须使用资产。
您可以在此处找到有关资产的更多信息
要使用资产,您必须执行以下操作:
assets:install
安装您的资产(我建议使用--symlink
选项,该选项将反映 css 更改,除非它们被缓存)link href="{{ asset('bundles/acmebundle/css/style.css') }}" type="text/css" rel="stylesheet">
(其中acmebundle
是你的捆绑)您可以像这样为 ChoiceType 添加 CSS 样式:
->add('triage', DocumentType::class, [
'label' => 'Triage',
'required' => false,
'placeholder' => 'select',
'label_attr' => [
'class' => 'col-sm-2 control-label',
],
'choice_attr' => function($choice, $key, $value) {
return ['style' => 'background:' . $choice->getColorCode().'; color:white;'];
},
'class' => 'AppBundle:TriageMaster',
'choice_label' => 'triage',
])
在这里,我使用了选择中的数据来选择 CSS 样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.