govuk frontend wtf
3.2.0
gov.uk frontend wtforms เป็นเครื่องมือชุมชนของระบบออกแบบ gov.uk ทีมระบบการออกแบบไม่รับผิดชอบและไม่สามารถสนับสนุนคุณได้ ติดต่อผู้ดูแลโดยตรงหากคุณต้องการความช่วยเหลือหรือคุณต้องการขอคุณสมบัติ
พื้นที่เก็บข้อมูลนี้มีชุดวิดเจ็ต WTForms ที่ใช้ในการแสดงฟิลด์ WTFORM โดยใช้การจัดแต่งทรงผมส่วนประกอบของ GOV.UK สิ่งนี้ทำได้โดยใช้ Jinja Macros จากพอร์ต Jinja Frontend ของ Gov.uk ของ Macros Nunjucks Frontend Frontend ดั้งเดิม สิ่งเหล่านี้ได้รับการปรับปรุงให้ทันสมัยด้วยการเปิดตัวส่วนหน้า gov.uk ได้รับการทดสอบอย่างละเอียดและผลิตมาร์กอัปที่เทียบเท่า 100%
วิธีการนี้ยังแสดงข้อความแสดงข้อผิดพลาดที่เกี่ยวข้องในสถานที่ที่เหมาะสมแสดงองค์ประกอบสรุปข้อผิดพลาดที่ด้านบนของหน้าและตั้งค่าแอตทริบิวต์การเข้าถึงที่เกี่ยวข้องทั้งหมด การเพิ่มวิดเจ็ตที่เหมาะสมในคลาส Python แบบฟอร์มที่มีอยู่ของคุณพร้อมกับเทมเพลตที่ง่ายกว่าทำให้ง่ายและรวดเร็วในการผลิตแบบฟอร์มที่สอดคล้องกับ gov.uk อย่างเต็มที่
หากคุณกำลังมองหาการสร้างแอพ Flask ที่โดดเด่นอย่างเต็มที่ซึ่งรวมเข้ากับ Gov.uk Frontend Jinja และ Gov.uk frontend wtforms โปรดใช้ที่เก็บเทมเพลต Frontend Flask Flask Gov.uk เพื่อสร้างแอปของคุณ
สำหรับตัวอย่างรายละเอียดเพิ่มเติมโปรดดูที่ซอร์สโค้ดแอพสาธิต
หลังจากเรียก 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 | Gov. UK วิดเจ็ต (s) | หมายเหตุ |
|---|---|---|
| บูลีนฟีลด์ | govcheckboxInput | |
| สนามวันที่ | govdateInput | |
| DateTimeField | govdateInput | |
| ทศนิยม | GovTextInput | |
| ฟีลล์ฟีลด์ | govfileinput | |
| Multiplefilefield | govfileinput (multiple = true) | โปรดทราบว่าคุณต้องระบุ multiple=True เมื่อเรียกใช้วิดเจ็ตในคลาสแบบฟอร์มของคุณ ไม่ใช่ เมื่อคุณแสดงในเทมเพลต Jinja |
| ฟีลด์ฟีลด์ | GovTextInput | |
| ฟีลด์ฟีลด์ | GovTextInput | ใช้ params เพื่อระบุ type หากคุณต้องการใช้องค์ประกอบหมายเลข HTML5 สิ่งนี้จะไม่เกิดขึ้นโดยอัตโนมัติ |
| ฟิลด์รหัสผ่าน | govpasswordInput | |
| เรดิโอฟิลด์ | govradioinput | |
| เลือกฟิลด์ | govselect | |
| SelectMultiplefield | govcheckboxesinput | โปรดทราบว่าช่องทำเครื่องหมายที่แสดงผลเป็น <select multiple> ขมวดคิ้ว |
| Submentfield | 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เราใช้ semver สำหรับการกำหนดเวอร์ชัน สำหรับเวอร์ชันที่มีให้ดูที่แท็กในที่เก็บนี้
เรายินดีต้อนรับการมีส่วนร่วมจากชุมชน หากคุณต้องการมีส่วนร่วมในโครงการนี้โปรดตรวจสอบหลักปฏิบัติหลักปฏิบัติและแนวทางการบริจาค
ดูรายชื่อผู้มีส่วนร่วมทั้งหมดใน GitHub
ซอฟต์แวร์นี้มีให้ "เป็น" โดย ไม่มีการรับประกัน การสนับสนุนมีให้บนพื้นฐาน "ความพยายามที่ดีที่สุด" โดยผู้ดูแลและชุมชนโอเพ่นซอร์ส
หากคุณเป็นข้าราชการพลเรือนคุณสามารถลงทะเบียนไปยังพื้นที่ทำงาน Digital Slack ของรัฐบาลสหราชอาณาจักรเพื่อติดต่อผู้ดูแลที่ระบุไว้ข้างต้นและชุมชนของผู้คนที่ใช้โครงการนี้ในช่อง #Govuk-Design-System
มิฉะนั้นโปรดดูแนวทางการบริจาคสำหรับวิธีการเพิ่มรายงานข้อผิดพลาดหรือคำขอคุณสมบัติ
