將 CSS 添加到表單類型是 Symfony2

Question

我有一個編輯表單，該表單是通過 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 嗎？

謝謝

Answer 1

這是您在構建表單時可以執行的方法，

 $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 中的表單主題。

Answer 2

這可能有幫助：

$builder->add('patent_name', 'text', array('label' => 'Patent Name', 'attr' => array('class' => 'someclass')));

Answer 3

如果要向字段添加類，則必須以這種方式在構建表單的add操作中使用attr特殊屬性

$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是你的捆綁）

Answer 4

這將幫助你：

http://symfony.com/doc/2.0/cookbook/form/form_customization.html#form-theming-in-twig

Answer 5

您可以像這樣為 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 樣式。