表单 – Symfony-Twig:在form_widget中插入fontawesome图标

前端之家收集整理的这篇文章主要介绍了表单 – Symfony-Twig:在form_widget中插入fontawesome图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
要验证表单,我使用的是标准:
{{ form_widget(form.save,{'attr': {'class': 'btn btn-sm btn-danger'},'label': 'Submit form'}) }}
@H_502_4@我想在按钮中插入一个fontawsome图标.我试过了:

{{ form_widget(form.save,'label': '<i class="fa fa-envelope-o"></i> Submit form'}) }}
@H_502_4@但它不起作用;明显

@H_502_4@知道怎么做吗?

解决方法

我会在同一视图中定义一个新的表单模板(如果需要重用代码,则在模板中定义).更多细节 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 %}
@H_502_4@编辑

@H_502_4@您还可以将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'
)));
@H_502_4@创建一个新类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
        ]);
    }
}
@H_502_4@在服务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' }
@H_502_4@应用程序/资源/视图/表格/ 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 -%}

猜你在找的HTML相关文章