是的,但是你必须定制您的表单主题 http://symfony.com/doc/current/cookbook/form/form_customization.html.
Note:该答案已被编辑以与 Symfony 2.8 3.x 和 4.x 兼容。对于旧版本,请查看编辑历史记录。
支持按钮中的图标的一个好方法是使用表单扩展。首先创建一个定义新属性的表单扩展类icon您可以在表单中使用:
<?php
namespace Foo\BarBundle\Form\Extension;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\Form\Extension\Core\Type\ButtonType;
use Symfony\Component\OptionsResolver\OptionsResolver;
class ButtonTypeIconExtension extends AbstractTypeExtension
{
/**
* @param FormBuilderInterface $builder
* @param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->setAttribute('icon', $options['icon']);
}
/**
* @param FormView $view
* @param FormInterface $form
* @param array $options
*/
public function buildView(FormView $view, FormInterface $form, array $options)
{
$view->vars['icon'] = $options['icon'];
}
/**
* @param OptionsResolver $resolver
*/
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(['icon' => null]);
$resolver->setDefined(['icon']);
}
/**
* Returns the name of the type being extended.
*
* @return string The name of the type being extended
*/
public function getExtendedType()
{
return ButtonType::class; // Extend the button field type
}
}
在 services.yml(或 xml 文件)中注册此扩展。别名必须与上面返回的字符串对应getExtendedType()
method.
# Form extension for adding icons
foobar.form_extension.icon:
class: Foo\BarBundle\Form\Extension\ButtonTypeIconExtension
tags:
- { name: form.type_extension, extended_type: Symfony\Component\Form\Extension\Core\Type\ButtonType }
接下来,覆盖你的form_div_layout.html.twig
。 (参见上面的链接)您现在可以使用icon
作为这些主题中的变量。对于按钮我们重写button_widget
block:
{% block button_widget -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' btn')|trim}) %}
{% if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
{% if icon|default %}
{% set iconHtml = '<i class="fa ' ~ icon ~ '"></i> ' %}
{% else %}
{% set iconHtml = '' %}
{% endif %}
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</button>
{%- endblock button_widget %}
最后,您可以在模板中使用图标选项:
{{ form_widget(form.jiraStatus, {
'icon': 'fa-bug',
'label': 'Bug',
'attr':{'class': 'btn btn-large btn-default btn-block' }
}) }}
或者在您的表单类中:
$builder
->add('jiraStatus', SubmitType::class, [
'label' => 'Bug',
'icon' => 'fa-bug',
'attr' => [
'class' => 'btn btn-large btn-default btn-block',
],
]
);
注意:通常最好在模板中添加图标,因为图标是表示的问题,而您的表单类实际上应该与业务逻辑有关。
让它更通用:
通过在 getExtendedType() 中返回 ButtonType 的 FQCN,我们告诉 Symfony 我们正在扩展继承自的所有可能的表单元素按钮类型例如提交类型。不幸的是,我们没有可以用来定位所有可能的表单元素的类型,但我们可以添加一个额外的扩展来定位FormType。所有表单字段(例如输入框和选择元素)都继承自此类型。因此,如果您希望它适用于两个表单字段and按钮,我建议如下:
创建一个抽象类abstract class AbstractIconExtension extends AbstractTypeExtension
与上面的内容完全相同,但省略getExtendedType
方法。然后创建两个从该类扩展的类(例如FieldTypeIconExtension
and ButtonTypeIconExtension
)其中仅包含getExtendedType
方法。返回 FQCN 的一个FormType
另一个返回 FQCNButtonType
:
Foo/BarBundle/Form/Extension/ButtonTypeIconExtension.php:
<?php
namespace Foo\BarBundle\Form\Extension;
use Symfony\Component\Form\Extension\Core\Type\ButtonType;
class ButtonTypeIconExtension extends AbstractIconExtension
{
/**
* Returns the name of the type being extended.
*
* @return string The name of the type being extended
*/
public function getExtendedType()
{
return ButtonType::class; // extend all buttons
}
}
Foo/BarBundle/Form/Extension/FieldTypeIconExtension.php:
<?php
namespace Foo\BarBundle\Form\Extension;
use Symfony\Component\Form\Extension\Core\Type\FormType;
class FieldTypeIconExtension extends AbstractIconExtension
{
/**
* Returns the name of the type being extended.
*
* @return string The name of the type being extended
*/
public function getExtendedType()
{
return FormType::class; // extend all field types
}
}
使用相应的别名在您的服务中注册这两个类:
# Form extensions for adding icons to form elements
foobar.form_extension.button_icon:
class: Foo\BarBundle\Form\Extension\ButtonTypeIconExtension
tags:
- { name: form.type_extension, extended_type: Symfony\Component\Form\Extension\Core\Type\ButtonType }
foobar.form_extension.form_icon:
class: Foo\BarBundle\Form\Extension\FieldTypeIconExtension
tags:
- { name: form.type_extension, extended_type: Symfony\Component\Form\Extension\Core\Type\FormType }
现在您可以使用icon
在表单主题的其他地方也可以变量。例如,要将图标添加到标签,您可以覆盖form_label
block:
{% block form_label -%}
{% if label is not sameas(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif %}
{% if required -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
{%- endif %}
{% if label is empty -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
{% if icon|default %}
{% set iconHtml = '<i class="fa ' ~ icon ~ '"></i> ' %}
{% else %}
{% set iconHtml = '' %}
{% endif %}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</label>
{%- endif %}
{%- endblock form_label %}
然后将图标添加到表单类中该字段的标签中:
$builder
->add('mytextfield', TextType::class, [
'label' => 'My fancy text field',
'icon' => 'fa-thumbs-o-up'
]
);