php 将 CSS 添加到表单类型是 Symfony2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12808660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add CSS to Form Type is Symfony2
提问by Wearybands
I have an edit form, The form is made through symfony2 Form types. I checked the documentation but couldn't find any option for adding CSS to the form. The form display the data correctly and everything is fine what I want to do is to add styling to each field.
我有一个编辑表单，该表单是通过 symfony2 表单类型制作的。我检查了文档，但找不到任何将 CSS 添加到表单的选项。表单正确显示数据，一切都很好，我想做的是为每个字段添加样式。
My Edit Type is
我的编辑类型是
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'))
;
}
Anyone has any idea ho I can add css ?
任何人都知道我可以添加 css 吗？
Thanks
谢谢
回答by Ahmed Siouani
Here is the way you can do it when building your form,
这是您在构建表单时可以执行的方法，
$builder->add('field_name', 'text', array('label' => 'Field Label', 'attr' => array('class' => 'fieldClass')));
You can also do it when rendering your form fields, take a look at Twig template form function reference
您也可以在渲染表单字段时执行此操作，查看Twig 模板表单函数参考
{{ form_label(form.field, 'label', { 'attr': {'class': 'foo'} }) }}
{{ form_widget(form.field, { 'attr': {'class': 'bar'} }) }}
You can then add a css file in your bundle public assets and call it in your template using,
然后，您可以在您的捆绑公共资产中添加一个 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 %}
You've then to make your public assets be accessible through your web/ directory. The best way to do it is to create symbolic links targeting your bundle public assets, you've then to execute
然后，您必须使您的公共资产可通过您的 web/ 目录访问。最好的方法是创建针对捆绑公共资产的符号链接，然后执行
assets:install web/ --symlink
Another useful approach when you want to thoroughly customize specific form field rendering block (Twig) is to define a new form theme, here's the documentation > Form theming in Twig.
当您想要彻底自定义特定的表单字段呈现块 (Twig) 时，另一种有用的方法是定义一个新的表单主题，这里是文档 > Twig 中的表单主题。
回答by Omid Kamangar
This might help:
这可能有帮助：
$builder->add('patent_name', 'text', array('label' => 'Patent Name', 'attr' => array('class' => 'someclass')));
回答by DonCallisto
If you want to add class to your fields, you have to use attrspecial attribute with your build form's addaction in that way
如果要将类添加到字段中，则必须以这种方式在attr构建表单的add操作中使用特殊属性
$builder->add('field_name', 'yourType', array('attr' => array('class' => 'fieldClass')));
If you want to link your style sheet instead, you have to use assets.
You can find more on assets here
如果要改为链接样式表，则必须使用资产。
您可以在此处找到有关资产的更多信息
To work with assets you have to do:
要使用资产，您必须执行以下操作：
- create your css file
- install your assets with
assets:install(I suggest to use--symlinkoption that will reflect css changes unless they are cached) - enjoy your CSS by using it into your template. In case of twig, you have do to <
link href="{{ asset('bundles/acmebundle/css/style.css') }}" type="text/css" rel="stylesheet">(whereacmebundleis your bundle)
- 创建你的 css 文件
- 安装您的资产
assets:install（我建议使用--symlink将反映 css 更改的选项，除非它们被缓存） - 通过在模板中使用 CSS 来享受它。如果是树枝，你必须做 <
link href="{{ asset('bundles/acmebundle/css/style.css') }}" type="text/css" rel="stylesheet">（acmebundle你的包在哪里）
回答by Abhi Das
You can add CSS styling for ChoiceType like this:
您可以像这样为 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',
])
Here I'd used the data from the choice to select the CSS style.
在这里，我使用了选择中的数据来选择 CSS 样式。
