Ajouter une classe css à un champ dans wtform
je génère une forme dynamique en utilisant des wtforms (et un flacon). J'aimerais ajouter des classes CSS personnalisées aux champs que je génère, mais jusqu'à présent je n'ai pas pu le faire. En utilisant la réponse que j'ai trouvé ici , j'ai essayé d'utiliser un widget personnalisé pour ajouter cette fonctionnalité. Il est mis en œuvre presque exactement de la même manière que la réponse à cette question:
class ClassedWidgetMixin(object):
"""Adds the field's name as a class.
(when subclassed with any WTForms Field type).
"""
def __init__(self, *args, **kwargs):
print 'got to classed widget'
super(ClassedWidgetMixin, self).__init__(*args, **kwargs)
def __call__(self, field, **kwargs):
print 'got to call'
c = kwargs.pop('class', '') or kwargs.pop('class_', '')
# kwargs['class'] = u'%s %s' % (field.name, c)
kwargs['class'] = u'%s %s' % ('testclass', c)
return super(ClassedWidgetMixin, self).__call__(field, **kwargs)
class ClassedTextField(TextField, ClassedWidgetMixin):
print 'got to classed text field'
dans la vue, je fais ceci pour créer le champ (ClassedTextField est importé à partir de formes, et f est une instance de la forme de base):
f.test_field = forms.ClassedTextField('Test Name')
le reste de la forme est créé correctement, mais ce jinja:
{{f.test_field}}
produit cette sortie (Aucune classe):
<input id="test_field" name="test_field" type="text" value="">
tous les conseils seraient Grands, merci.
1 réponses
en fait, vous n'avez pas besoin d'aller au niveau widget pour attacher un attribut HTML class au rendu du champ. Vous pouvez simplement le spécifier en utilisant le paramètre class_
dans le modèle jinja.
p.ex.
{{ form.email(class_="form-control") }}
résultera en HTML::
<input class="form-control" id="email" name="email" type="text" value="">
pour faire cela dynamiquement, disons, en utilisant le nom de la forme comme valeur de L'attribut de classe HTML, vous pouvez faire ce qui suit:
Jinja:
{{ form.email(class_="form-style-"+form.email.name) }}
sortie:
<input class="form-style-email" id="email" name="email" type="text" value="">
pour plus d'informations sur l'injection des attributs HTML, consultez la documentation officielle .