我可以使用 Twig 将 html 放入 Symfony 表单按钮中吗?

2024-04-21

我试图将 html 放入带有树枝的表单按钮中,例如:

{{ form_widget(form.jiraStatus, {
        'label': '<i class="fa fa-bug"></i>Bug',
        'attr':{'class': 'btn btn-large btn-default btn-block' }
}) }}

但这样做时,渲染的按钮显示如下:

<button type="submit" name="SolveTask[taskTypesFormObj][bugStatus]"
    class="btn btn-large btn-default btn-block">
    &lt;i class=&quot;fa fa-bug&quot;&gt;&lt;/i&gt;Bug
</button>

正如你所看到的,按钮内的 html 是经过编码的。我尝试使用raw滤镜,但效果是一样的。有办法做到这一点吗?

Thanks!


是的,但是你必须定制您的表单主题 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'
        ]
    );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我可以使用 Twig 将 html 放入 Symfony 表单按钮中吗? 的相关文章

随机推荐

  • 如何在.net core项目中使用SignalR Core监听postgresql数据库?

    我正在开发 net core Web 应用程序 我想监听我的 PostgreSQL 数据库 如果桌面上有任何变化 我必须得到它 所以根据我的研究 我必须使用SignalR Core 我用 SignalR 做了一些示例应用程序 例如聊天应用程
  • pod init 获得未初始化的常量 ActiveSupport::XmlMini::IsolatedExecutionState (NameError)

    mac os 成功安装cocoapods 1 11 2 红宝石 v ruby 3 1 1p18 2022 02 18 修订版 53f5fc4236 x86 64 darwin21 宝石 v 3 3 8 但 exec pod init 收到错
  • django 管理中的多态行为

    问题 假设我有三个类A B和C 其中B是A的子类 C是B的子类 A lt B lt C 当我打开管理并列出所有 A 时 我看到所有 A B 和 C 但是 当我点击其中一个链接查看详细信息并编辑该特定 B 时 我只会看到 B 的字段 即使该实
  • 突出显示用户选择的文本片段

    我有一个 div with some text div 我需要突出显示用户选择的文本片段 我已经部分实现了这个 这是我的代码 http jsfiddle net Greatshock fy09jo8w 8 thisRespondHightl
  • 能否在上传 Azure CloudBlockBlob 的同时在其上设置元数据?

    我目前使用以下方式上传 CloudBlockBlob CloudBlockBlob UploadFromStreamAsync 然后我立即在上面设置了一堆用户元数据 问题是 我有一个事件网格事件 该事件在上传 blob 时触发 但事件处理程
  • 如何在多个 HTML 页面上播放背景音频?

    是否有解决方案可以让背景音频 音乐在网站上的多个页面上播放 而无需在每个页面加载时重新启动 该网站当前使用框架集 但我正在寻找替代方案 如果不让整个网站都 AJAX 我认为框架是唯一的方法 如果您需要的话 这里有一个关于制作 ajax 站点
  • JavaScript 多行字符串[重复]

    这个问题在这里已经有答案了 问题是 像在 PHP 中一样将多行字符串存储到变量中的 JavaScript 方法是什么 如果 多行字符串 是指包含换行符的字符串 则可以通过使用转义它们来编写这些字符串 n 对于换行符 var multilin
  • 如何从命令行将 Svelte 文件编译为 JavaScript?

    我是新来的Svelte https svelte dev 快速提问 Svelte 编译器有 CLI 吗 如何访问它 我知道 Svelte 有一个使用 rollup 的预配置设置 但不使用什么 用于构建应用程序 一切都很好 但我只需要 CLI
  • Sublime Text 2 在 Java 开发方面是否胜过 Eclipse [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 是时候使用 Django 1.5 了吗? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • a += b 与 a = a + b 不同[重复]

    这个问题在这里已经有答案了 可能的重复 为什么 在列表上表现异常 https stackoverflow com questions 2347265 why does behave unexpectedly on lists 今天我发现了P
  • C++ 编译器会优化重复的函数调用吗?

    编译器 通常或特别 是否优化重复的函数调用 例如 考虑这种情况 struct foo member type m return type f const returns by value 函数定义在一个翻译单元中 return type f
  • 使用样式化组件设置滑块拇指样式

    我正在尝试使用 React 的样式组件来设置滑块的样式 但我不知道如何设置拇指的样式 我有一个看起来像这样的CSS faderInput webkit slider thumb webkit appearance none width 15
  • Javascript C++ 绑定?

    我有一些 C 代码想要公开给 Web 应用程序的客户端 理想情况下 我想为我的 C 类编写 Javascript 包装对象 以便我可以在客户端使用它们 这以前做过吗 有谁有链接来展示如何实现这一目标 有一个库可以将 C 代码转换为 java
  • 是否可以使用 JNI 在 C 或 C++ 中实现 Java 接口?

    假设一个 Java 库包含一个类 我们称它为Foo 该类包含一个构造函数和两个方法 constructor Foo returns a random int public int bar generates a random int x a
  • 泛型和(超级?)类型标记可以帮助构建类型安全的新闻聚合器吗?

    我有这个基本的News界面 interface News String getHeader String getText 和具体的类 如SportsNews and FinancialNews提供具体方法 例如getStockPrice g
  • 如何为DialogFragment设置主题

    有人可以解释一下为什么这个声明效果很好 setStyle DialogFragment STYLE NO TITLE android R style Theme Holo 并且下一个声明没有传递 setStyle DialogFragmen
  • Python/vtk - 在 vtkPolyData 对象中单独设置每个点的大小?

    我使用以下代码来填充点云 如何在vtk中以不同的颜色显示点云 https stackoverflow com questions 7591204 how to display point cloud in vtk in different
  • 命名空间中的特殊字符

    我正在考虑在自定义框架的命名空间中使用带有变音标记的字符 例如 这个想法是作为区分产品的一种方式而提出的 但我想确定这不是一个坏主意 如果有什么关于它的事情 稍后会回来咬我 我在搜索中没有看到使用特殊字符的名称空间的其他示例 也没有看到有关
  • 我可以使用 Twig 将 html 放入 Symfony 表单按钮中吗?

    我试图将 html 放入带有树枝的表单按钮中 例如 form widget form jiraStatus label i class fa fa bug i Bug attr class btn btn large btn default