分类导航

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了表单 – Symfony-Twig：在form_widget中插入fontawesome图标，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

要验证表单,我使用的是标准：

{{ form_widget(form.save,{'attr': {'class': 'btn btn-sm btn-danger'},'label': 'Submit form'}) }}

我想在按钮中插入一个fontawsome图标.我试过了：

{{ form_widget(form.save,'label': '<i class="fa fa-envelope-o"></i> Submit form'}) }}

但它不起作用;明显

知道怎么做吗？

解决方法

我会在同一视图中定义一个新的表单模板(如果需要重用代码,则在模板中定义).更多细节 here

{% extends '::base.html.twig' %}

{% form_theme form _self %}

{%- block submit_widget -%}
    {%- set type = type|default('submit') -%}

    {%- 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 -%}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>
        <i class="fa fa-envelope-o"></i>
        {{ label|trans({},translation_domain) }}
    </button>
{%- endblock submit_widget -%}


{% block content %}
    {# ... render the form #}

    {{ form_row(form.agE) }}
{% endblock %}

编辑

您还可以将ButtonType扩展为允许icon_before和icon_after,以便在表单定义中轻松添加图标：

$form->add('submitReportV2Show',SubmitType::class,array(
    'label' => 'My test','icon_before' => 'fa-refresh','icon_after' => 'fa-refresh','attr' => array('class' => 'btn btn-sm btn-success'
)));

创建一个新类src / bundle / Form / Extension：

namespace YourBundle\ToolBoxBundle\Form\Extension;

use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\ButtonType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class IconButtonExtension extends AbstractTypeExtension
{
    public function getExtendedType()
    {
        return ButtonType::class;
    }

    public function buildView(FormView $view,FormInterface $form,array $options)
    {
        $view->vars['icon_before'] = $options['icon_before'] ?? '';
        $view->vars['icon_after'] = $options['icon_after'] ?? '';
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'icon_before' => null,'icon_after' => null
        ]);
    }
}

在服务src / bundle / resources / config / service.yml中声明它

bundle.tools.form.type_extension.icon_button:
    class: YourBundle\ToolBoxBundle\Form\Extension\IconButtonExtension
    tags:
      - { name: 'form.type_extension',extended_type: 'Symfony\Component\Form\Extension\Core\Type\ButtonType' }

应用程序/资源/视图/表格/ fields.html.twig

{%- block button_widget -%}
    {%- if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,}) %}
        {%- elseif label is same as(false) -%}
            {% set translation_domain = false %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}

    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>
        {% if icon_before is defined and icon_before is not null %}
            <i class="fa {{ icon_before }}"></i>
        {% endif %}
        {{ translation_domain is same as(false) ? label : label|trans({},translation_domain) }}
        {% if icon_after is defined and icon_after is not null %}
            <i class="fa {{ icon_after }}"></i>
        {% endif %}
    </button>
{%- endblock button_widget -%}