Saltar al contenido

Symfony-Twig: inserta el ícono de fontawesome en un form_widget

Posterior a observar en varios repositorios y páginas webs al concluir nos encontramos con la resolución que te mostraremos pronto.

Solución:

Definiría una nueva plantilla de formulario en la misma vista (o en una plantilla si necesita reutilizar el código). Más detalles aquí

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

% form_theme form _self %

%- block submit_widget -%
    %- set type = type

    %- if label is empty -%
        %- if label_format is not empty -%
            % set label = label_format
        %- else -%
            humanize %
        %- endif -%
    %- endif -%
    
%- endblock submit_widget -%


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

     form_row(form.age) 
% endblock %

EDITAR

También puedes extender ButtonType permitir icon_before y icon_after para agregar iconos fácilmente en la definición del formulario:

$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'
)));

Cree una nueva clase src / bundle / Form / Extension:

namespace YourBundleToolBoxBundleFormExtension;

use SymfonyComponentFormAbstractTypeExtension;
use SymfonyComponentFormExtensionCoreTypeButtonType;
use SymfonyComponentFormFormInterface;
use SymfonyComponentFormFormView;
use SymfonyComponentOptionsResolverOptionsResolver;

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
        ]);
    

Declararlo en service src / bundle / Resources / config / service.yml

bundle.tools.form.type_extension.icon_button:
    class: YourBundleToolBoxBundleFormExtensionIconButtonExtension
    tags:
      -  name: 'form.type_extension', extended_type: 'SymfonyComponentFormExtensionCoreTypeButtonType' 

app / Resources / views / Form / fields.html.twig

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

    
%- endblock button_widget -%

La respuesta de sdespont es la respuesta correcta y digna de ser seleccionada. Sin embargo, he ampliado la funcionalidad para incluir la adición del icono de clase fa personalizado, así como si el icono se coloca a la izquierda o derecha del texto del botón.

Dado que esta funcionalidad acepta variables, lo mejor que puede hacer es crear una plantilla para reutilizarla en lugar de personalizar solo la vista.

Plantilla de formulario: app / Resources / views / form / submit.html.twig

# app/Resources/views/form/submit.html.twig #

% block submit_widget %
% set type = type

% if label is empty %
    % if label_format is not empty %
        % set label = label_format
    % else %
        % set label = name
    % endif %
% endif %

% endblock submit_widget %

Controlador:

$form = $this->createFormBuilder($user)
            ...
            ->add('submit', SubmitType::class, array(
                'attr'=> array('class'=>'myclass')
            ))
            ->getForm();

Plantilla de ramita:

 form_widget(form.submit, 'fa' : 'fa-long-arrow-right','right' : true) 

Puede configurar cualquier ícono fa antiguo e incluso dimensionarlo así: fa-long-arrow-right fa-2x

Lo más fácil, puede poner su botón con html y formar vars:

<

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *