12

我有一个编辑表单，该表单是通过 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 吗？

谢谢

4

4 回答 4

16

这是构建表单时可以执行的方式，

 $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 中的表单主题。

于 2012-10-09T21:36:14.163 回答
0

如果要向字段添加类，则必须以这种方式在attr构建表单的add操作中使用特殊属性

$builder->add('field_name', 'yourType', array('attr' => array('class' => 'fieldClass')));

如果你想链接你的样式表，你必须使用资产。 您可以在此处
找到有关资产的更多信息

要使用资产，您必须：

  • 创建你的css文件
  • 安装您的资产assets:install（我建议使用--symlink将反映 css 更改的选项，除非它们被缓存）
  • 通过在模板中使用 CSS 来享受它。如果是树枝，你必须这样做 < link href="{{ asset('bundles/acmebundle/css/style.css') }}" type="text/css" rel="stylesheet">（acmebundle你的包在哪里）
于 2012-10-10T07:05:16.790 回答
0

这可能会有所帮助：

$builder->add('patent_name', 'text', array('label' => 'Patent Name', 'attr' => array('class' => 'someclass')));
于 2012-10-09T21:31:19.757 回答
0

您可以像这样为 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 样式。

于 2019-12-02T06:06:55.207 回答