添加 CSS 到表单类型是 Symfony2

Posted

技术标签:

【中文标题】添加 CSS 到表单类型是 Symfony2【英文标题】:Add CSS to Form Type is Symfony2 【发布时间】:2012-09-30 07:02:54 【问题描述】:

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

谢谢

【问题讨论】:

向您的 FormTypes(逻辑)添加演示文稿内容(CSS 样式,...)在语义上是错误的。所以即使有可能也不要这样做 【参考方案1】:

这是您在构建表单时可以做到的方式,

 $builder->add('field_name', 'text', array('label' => 'Field Label', 'attr' => array('class' => 'fieldClass')));

您也可以在渲染表单字段时这样做,看看Twig template form function reference

 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) 时,另一个有用的方法是定义一个新的 form theme,这是文档 > Form theming in Twig。

【讨论】:

【参考方案2】:

这可能会有所帮助:

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

【讨论】:

【参考方案3】:

如果你想为你的字段添加类,你必须以这种方式使用 attr 特殊属性和你的构建表单的 add 操作

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

如果你想链接你的样式表,你必须使用资产。 你可以找到更多关于资产here

要使用您必须做的资产:

创建您的 css 文件 使用assets:install 安装您的资产(我建议使用--symlink 选项,该选项将反映css 更改,除非它们被缓存) 通过在模板中使用 CSS 来享受它。如果是树枝,你必须这样做 link href=" asset('bundles/acmebundle/css/style.css') " type="text/css" rel="stylesheet">(acmebundle 是你的捆绑包)

【讨论】:

【参考方案4】:

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

【讨论】:

以上是关于添加 CSS 到表单类型是 Symfony2的主要内容,如果未能解决你的问题,请参考以下文章

css 自动将占位符文本添加到客户查询表单。这适用于我们当前的表单生成器。

css 自动将占位符文本添加到客户查询表单。这适用于我们当前的表单生成器。

将css类添加到输入标签thymeleaf + spring

如何在表单的输入类型=“文件”中添加图像并将它们都提交到同一个表单后生成缩略图

在 django 中将 css 类添加到验证错误的字段

css基础 CSS 媒体类型CSS 属性 选择器CSS 表单CSS 计数器