govuk frontend wtf

Gov.uk frontend wtforms виджеты

Gov.uk Frontend WTForms - это общественный инструмент системы проектирования GOV.UK. Команда System Design не несет ответственности за это и не может поддержать вас в использовании. Свяжитесь с сопровождающими напрямую, если вам нужна помощь, или вы хотите запросить функцию.

Этот репозиторий содержит набор виджетов WTForms, используемых для отображения поля WTForm с использованием стиля компонентов GOV.UK. Это делается с использованием макросов Jinja из порта Gov.uk Frontend Jinja Original Gov.uk Frontend Macros Nunjucks. Они поддерживаются в актуальном состоянии с выпусками Gov.uk Frontend, тщательно протестированы и производят 100% эквивалентную наценку.

Этот подход также отображает соответствующие сообщения об ошибках в соответствующем месте, показывает компонент резюме ошибки в верхней части страницы и устанавливает все связанные атрибуты ARIA, связанные с доступностью. Добавление соответствующего виджета в ваш существующий класс Python, а также гораздо более простые шаблоны, делает его быстро и легко производить полностью совместимые с Gov.uk.

Если вы хотите построить полностью изготовленное приложение Flask, которое интегрируется с gov.uk Frontend Jinja и Gov.uk Frontend WTForms, пожалуйста, используйте репозиторий шаблона фронта Gov.uk для создания вашего приложения.

Как использовать

Для получения более подробных примеров, пожалуйста, обратитесь к исходному коду Demo App.

После запуска pip install govuk-frontend-wtf , убедитесь, что вы сообщите Jinja, где загружать шаблоны с использования PackageLoader , зарегистрировать WTFormsHelpers , а затем установите переменную среды для SECRET_KEY .

app/__init__.py :

 from flask import Flask
from govuk_frontend_wtf . main import WTFormsHelpers
from jinja2 import ChoiceLoader , PackageLoader , PrefixLoader

app = Flask ( __name__ )
app . config [ "SECRET_KEY" ] = os . environ . get ( "SECRET_KEY" )

app . jinja_loader = ChoiceLoader (
    [
        PackageLoader ( "app" ),
        PrefixLoader (
            {
                "govuk_frontend_jinja" : PackageLoader ( "govuk_frontend_jinja" ),
                "govuk_frontend_wtf" : PackageLoader ( "govuk_frontend_wtf" ),
            }
        ),
    ]
)

WTFormsHelpers ( app )

Импорт и включите соответствующий виджет в каждом поле в классе формы (см. Таблицу ниже). Обратите внимание, что в этом примере widget=GovTextInput() является единственным отличием относительно стандартного определения формы Flask-WTF.

app/forms.py :

 from flask_wtf import FlaskForm
from govuk_frontend_wtf . wtforms_widgets import GovSubmitInput , GovTextInput
from wtforms import StringField , SubmitField
from wtforms . validators import Email , InputRequired , Length


class ExampleForm ( FlaskForm ):
    email_address = StringField (
        "Email address" ,
        widget = GovTextInput (),
        validators = [
            InputRequired ( message = "Enter an email address" ),
            Length ( max = 256 , message = "Email address must be 256 characters or fewer" ),
            Email ( message = "Enter an email address in the correct format, like [email protected]" ),
        ],
        description = "We’ll only use this to send you a receipt" ,
    )

    submit = SubmitField ( "Continue" , widget = GovSubmitInput ())

Создайте маршрут, чтобы обслуживать свою форму и шаблон.

app/routes.py :

 from flask import redirect , render_template , url_for

from app import app
from app . forms import ExampleForm

@ app . route ( "/" )
def index ():
    return render_template ( "index.html" )


@ app . route ( "/example-form" , methods = [ "GET" , "POST" ])
def example ():
    form = ExampleForm ()
    if form . validate_on_submit ():
        return redirect ( url_for ( "index" ))
    return render_template ( "example_form.html" , form = form )

Наконец, в своем шаблоне установите заголовок страницы надлежащим образом, если есть какие -либо ошибки проверки формы, согласно руководству системы проектирования gov.uk. Включите компонент govukErrorSummary() в начале блока content . Передайте параметры в словаре в поле вашей формы в соответствии с соответствующими параметрами макропонентов.

app/templates/example_form.html :

{% extends "base.html" %}

{%- from 'govuk_frontend_jinja/components/error-summary/macro.html' import govukErrorSummary -%}

{% block pageTitle %}{%- if form and form.errors %}Error: {% endif -%}Example form – GOV.UK Frontend WTForms Demo{% endblock %}

{% block content %}
< div class =" govuk-grid-row " >
    < div class =" govuk-grid-column-two-thirds " >
        {% if form.errors %}
            {{ govukErrorSummary(wtforms_errors(form)) }}
        {% endif %}

        < h1 class =" govuk-heading-xl " > Example form </ h1 >

        < form action ="" method =" post " novalidate >
            {{ form.csrf_token }}
            
            {{ form.email_address(params={
              'type': 'email',
              'autocomplete': 'email',
              'spellcheck': false
            }) }}
            
            {{ form.submit }}
        </ form >
    </ div >
</ div >
{% endblock %}

Виджеты

Доступные виджеты и их соответствующие типы поля Flask-WTF следующие:

WTForms Field	Gov. UK Widget (ы)	Примечания
Booleanfield	GovCheckBoxInput
Датфилд	Правительство
DateTimefield	Правительство
Десятичное поле	GovTextInput
FileField	Govfileinput
Несколькофилфилд	Govfileinput (множественная = true)	Обратите внимание, что вам нужно указать multiple=True при вызове виджета в классе формы. Не тогда, когда вы делаете его в шаблоне джинджи.
Поплавок	GovTextInput
Integerfield	GovTextInput	Используйте params , чтобы указать type , если вам нужно использовать элементы номера HTML5. Это не произойдет автоматически.
Поле пароля	GovpasswordInput
Радиофильм	Говрадиоинпунт
Выберите	Правительство
SelectMultiplefield	Govcheckboxesinput	Обратите внимание, что это отображает флажки как <select multiple> .
Отправить поле	GovSubmitInput
Stringfield	GovTextInput
Textareafield	Govtextarea, govcharactercount

Чтобы сгенерировать такие вещи, как поля электронной почты с использованием GovTextInput , вам нужно будет пройти дополнительные параметры, когда он приведет следующим образом:

{{ form.email_address(params={'type': 'email', 'autocomplete': 'email', 'spellcheck': false}) }}

Запуск тестов

python3 -m venv venv
source venv/bin/activate
pip install -r tests/requirements.txt
pytest --cov=govuk_frontend_wtf --cov-report=term-missing --cov-branch

Версии

Мы используем SEMVER для управления версиями. Для доступных версий см. Теги в этом репозитории.

Как внести свой вклад

Мы приветствуем вклад сообщества. Если вы хотите внести свой вклад в этот проект, просмотрите руководящие принципы поведения и взносов.

Участники

• Мэтт Шоу (первичный сопровождающий)
• Энди Мантелл (оригинальный автор)

Смотрите полный список участников на GitHub

Поддерживать

Это программное обеспечение предоставляется «как есть» без гарантии. Поддержка предоставляется на основе «лучших усилий» со стороны сопровождающих и сообщества с открытым исходным кодом.

Если вы являетесь государственным служащим, вы можете зарегистрироваться в цифровом рабочем пространстве правительства Великобритании, чтобы связаться с сохраненными вышеуподателями, и сообществом людей, использующих этот проект в канале #Govuk-Design-System.

В противном случае, пожалуйста, смотрите руководящие принципы взноса для того, как поднять отчет об ошибке или запрос функции.