govuk frontend wtf 다운로드 -Govuk govuk frontend wtf 소스 코드 다운로드

govuk frontend wtf

타사 구성 요소

3.2.0

다운로드

gov.uk frontend wtforms 위젯

gov.uk frontend wtforms는 gov.uk 디자인 시스템의 커뮤니티 도구입니다. 디자인 시스템 팀은 책임을지지 않으며이를 사용하여 지원할 수 없습니다. 도움이 필요하거나 기능을 요청하려면 관리자에게 직접 문의하십시오.

이 저장소에는 Gov.uk Frontend 구성 요소 스타일링을 사용하여 WTFORM 필드를 렌더링하는 데 사용되는 WTForms 위젯 세트가 포함되어 있습니다. 이것은 Gov.uk Frontend Nunjucks Macros의 Gov.uk Frontend Jinja 항구의 Jinja 매크로를 사용하여 수행됩니다. 이들은 Gov.uk Frontend 릴리스를 사용하여 최신 상태로 유지되며 철저히 테스트되며 100% 동등한 마크 업을 생산합니다.

이 접근법은 또한 관련 오류 메시지를 적절한 위치에 렌더링하고 페이지 상단의 오류 요약 구성 요소를 보여주고 모든 관련 접근성 ARIA 속성을 설정합니다. 기존 양식 파이썬 클래스에 적절한 위젯을 추가하면 훨씬 간단한 템플릿과 함께 완전한 gov.uk 호환 양식을 빠르고 쉽게 생산할 수 있습니다.

Gov.uk Frontend Jinja 및 Gov.uk Frontend Wtforms와 통합되는 완전히 특징 플라스크 앱을 구축하려면 Gov.uk Frontend Flask Template Repository를 사용하여 앱을 생성하십시오.

사용 방법

자세한 내용은 데모 앱 소스 코드를 참조하십시오.

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() 이 표준 플라스크 -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 설계 시스템 안내에 따라 양식 유효성 검사 오류가있는 경우 페이지 제목을 적절하게 설정하십시오. content 블록의 시작시 govukErrorSummary() 구성 요소를 포함하십시오. 관련 구성 요소 매크로 옵션에 따라 사전의 매개 변수를 양식 필드로 전달하십시오.

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 %}

위젯

사용 가능한 위젯과 해당 플라스크 -WTF 필드 유형은 다음과 같습니다.

wtforms 필드	Gov. 영국 위젯 (S)	메모
부울 필드	govcheckboxinput
날짜 필드	govdateinput
DateTimefield	govdateinput
십진형 필드	govtextinput
파일 필드	govfileinput
다중 파일 필드	govfileInput (Multiple = true)	양식 클래스에서 위젯을 호출 할 때 `multiple=True` 지정해야합니다. Jinja 템플릿에서 렌더링 할 때는 아닙니다 .
플로트 필드	govtextinput
정수 필드	govtextinput	html5 숫자 요소를 사용해야하는 경우 `params` 사용하여 `type` 지정하십시오. 이것은 자동으로 발생하지 않습니다.
비밀번호	govpasswordinput
Radiofield	Govradioinput
SELECTFIELD	govselect
SelectMultiplefield	govcheckboxesinput	이 확인란은 `<select multiple>` 요소가 눈살을 찌푸리기 때문에 확인란을 렌더링합니다.
제출 필드	govsubmitinput
문자열 필드	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