So fügen Sie eine css-Klasse auf eine "form_row" in twig Vorlage

Ich würde gerne wissen, wie kann ich das hinzufügen einer css-Klasse auf "{{ form_row() }}" in Zweig. Für den moment habe ich diesen code :

{{ form_row(form.username, {'label' : "Login", 'attr': {'class': 'loginForm'}}) }}

... Aber die CSS-Klasse "loginForm" ist nicht im HTML-code.

Danke 🙂 !

  • Sie können form_widget als eine Arbeit um. Scheint, wie es funktionieren sollte mit form_row, aber ich habe nicht hingeschaut.
  • Ich war auf der Suche zu verwenden, 'label' und 'attr" in der gleichen form_row. Danke!
InformationsquelleAutor axool | 2012-04-06
  1. 13

    Wenn Sie möchten, dass die gemeinsame Klasse für die form_row (es bedeutet eine Klasse für form_label, form_widget und form_errors), sollten Sie sich anpassen field_row block.

    Dieser Artikel erläutert das anpassen der Formular-Felder: Anpassen von Formular-Rendering.
    Es gibt einige Methoden, um dies zu tun.

    Zum Beispiel bin ich mit der Methode 2 (So passen Sie die Form der Darstellung: Methode 2):

    {% extends 'form_div_layout.html.twig' %}

{% block field_row %}
{% spaceless %}
    {% set class='' %}
    {% if attr.class is defined %}
    {% set class = 'class="' ~ attr.class ~ '"' %}
    {% endif %}

    <div {{ class }} >
        {{ form_label(form, label|default(null)) }}
        {{ form_errors(form) }}
        {{ form_widget(form) }}
    </div>
{% endspaceless %}
{% endblock field_row %}
    • Es mag auch erwähnenswert sein, müssen Sie möglicherweise verwenden Sie {{ Klasse|raw }} für diese zu arbeiten, ohne es versucht zu entkommen, der doppelten Anführungszeichen.
    InformationsquelleAutor nni6
  2. 4

    Meine Antwort ist sehr ähnlich zu nni6 ist, aber Sie können Sie gehen durch die ganze attr array.

    Meine HTML-Struktur ist für Twitter Bootstrap, aber Sie können haben, was Sie wollen. Dieses Beispiel stellt auch eine error-Klasse auf dem wrapper-div, wenn Fehler vorhanden sind - dieser Teil ist nicht erforderlich, aber nützlich, wenn Sie die Verwendung von Bootstrap:

    {% extends 'form_div_layout.html.twig' %}

{% block field_row %}
{% spaceless %}
    {% set field_row_classes = ['control-group'] %}
    {% if errors|length > 0 %}
        {% set field_row_classes = field_row_classes|merge(['error']) %}    
    {% endif %}

    <div class="{{ field_row_classes|join(' ') }}">
        {{ form_label(form, label|default(null)) }}
        <div class="controls">
            {{ form_widget(form, { 'attr' : attr|default({}) }) }}
            {{ form_errors(form) }}
            {% if help is defined %}
                <p class="help-block">{{ help }}</p>
            {% endif %}
        </div>
    </div>
{% endspaceless %}
{% endblock field_row %}

    Der Unterschied hier ist, dass ich den Aufruf form_widget mit der attr array (wenn es angegeben wurde, standardmäßig {})

    Nun können Sie Ihr Formular als normal, aber pass über eine benutzerdefinierte Klasse:

    {{ form_row(myentity.myproperty, { 'label' : 'mylabel', 'attr' : { 'class' : 'myclass' }}) }}
    InformationsquelleAutor OrganicPanda
  3. 2

    Ich diesen code verwenden, zum konfigurieren von bootstrap in symfony

    {% block field_row %}
{% spaceless %}
    <div class="control-group {% if errors|length > 0 %}error{% endif %}">
        {{ form_label(form, label, { 'attr': { 'class': 'control-label' } }) }}
        <div class="controls">
            {{ form_widget(form, { 'attr' : attr|default({}) }) }}
            {{ form_errors(form) }}
        </div>
    </div>
{% endspaceless %}
{% endblock field_row %}
    InformationsquelleAutor Pablo Veintimilla Vargas
  4. 1

    Der einfachste Weg, dies zu erreichen ohne das überschreiben von Blöcken, ist dies:

    {% set attr = {'class' : form.myElement.vars.attr.class ~ ' addedClasses...', 'style' : form.myElement.vars.attr.style ~ '; addedStyles...'} %}
{{ - form_row(form.myElement, {'attr' : attr}) - }}
    InformationsquelleAutor Nickolaus
Schreibe einen Kommentar