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

表单 – Symfony-Twig:在form_widget中插入fontawesome图标,第1张

概述要验证表单,我使用的是标准: {{ form_widget(form.save, {'attr': {'class': 'btn btn-sm btn-danger'}, 'label': 'Submit form'}) }} 我想在按钮中插入一个fontawsome图标.我试过了: {{ form_widget(form.save, {'attr': {'class': 'btn btn-sm 要验证表单,我使用的是标准:
{{ form_Widget(form.save,{'attr': {'class': 'btn btn-sm btn-danger'},'label': 'submit form'}) }}

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

{{ form_Widget(form.save,'label': '<i ></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 ></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 ></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 ></i>        {% endif %}    </button>{%- endblock button_Widget -%}
总结

以上是内存溢出为你收集整理的表单 – Symfony-Twig:在form_widget中插入fontawesome图标全部内容,希望文章能够帮你解决表单 – Symfony-Twig:在form_widget中插入fontawesome图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1132723.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-30
下一篇2022-05-30

发表评论

登录后才能评论

评论列表(0条)

    保存