govuk frontend wtf
3.2.0
Gov.uk Frontend WTForms هي أداة مجتمعية لنظام تصميم Gov.uk. فريق نظام التصميم غير مسؤول عن ذلك ولا يمكنه دعمك باستخدامه. اتصل بالمحامون مباشرة إذا كنت بحاجة إلى مساعدة أو تريد طلب ميزة.
يحتوي هذا المستودع على مجموعة من مصادر WTForms المستخدمة لتقديم حقول WTForm باستخدام تصميم مكون Gov.uk الأمامي. يتم ذلك باستخدام وحدات الماكرو Jinja من Gov.uk الأمامي المنفذ Jinja من Macros Nunjucks من Gov.uk الأصلي. يتم الاحتفاظ بها على تحديث مع إصدارات Gov.uk الأمامية ، ويتم اختبارها بدقة وإنتاج علامة مكافئة بنسبة 100 ٪.
يعرض هذا النهج أيضًا رسائل الخطأ المرتبطة بها في المكان المناسب ، ويظهر مكون ملخص الخطأ في الجزء العلوي من الصفحة ويضع جميع سمات ARIA ذات الصلة. إن إضافة عنصر واجهة المستخدم المناسبة إلى فئة Python النموذجية الحالية ، إلى جانب قوالب أبسط بكثير ، يجعلها سريعة وسهلة إنتاج نماذج متوافقة مع Gov.uk بالكامل.
إذا كنت تتطلع إلى إنشاء تطبيق قارورة مميز بالكامل يتكامل مع Gov.uk Frontend Jinja و Gov.uk Frontend WTForms ، فيرجى استخدام مستودع قالب Gov.uk Frontend Flask لإنشاء تطبيقك.
لمزيد من الأمثلة التفصيلية ، يرجى الرجوع إلى رمز مصدر التطبيق التجريبي.
بعد تشغيل 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 Design System Guidance. قم بتضمين مكون 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 | حاكم المملكة المتحدة (أعطال) المملكة المتحدة | ملحوظات |
|---|---|---|
| Booleanfield | govcheckboxinput | |
| DateField | GovDateInput | |
| DateTimefield | GovDateInput | |
| دينيميالفيلد | GovTextInput | |
| FileField | GovFileInput | |
| Multipilefield | GovFileInput (متعدد = صحيح) | لاحظ أنك تحتاج إلى تحديد multiple=True عند استدعاء القطعة في فئة النموذج الخاصة بك. ليس عندما تقدمه في قالب جينجا. |
| Floatfield | GovTextInput | |
| Integerfield | GovTextInput | استخدم params لتحديد type إذا كنت بحاجة إلى استخدام عناصر رقم HTML5. هذا لن يحدث تلقائيا. |
| PasswordField | GovPasswordInput | |
| Radiofield | GovradioPut | |
| Selectfield | GovSelect | |
| SelectMultiplefield | govcheckboxesinput | لاحظ أن مربعات الاختيار التي تعرض هذه العناصر <select multiple> تعبّر عليها. |
| المرسال | GovSubmitInput | |
| Stringfield | GovTextInput | |
| TextAreefield | 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
يتم توفير هذا البرنامج "AS-IS" دون ضمان. يتم توفير الدعم على أساس "أفضل المساعي" من قبل المشرفين ومجتمع المصادر المفتوحة.
إذا كنت موظفًا مدنيًا ، فيمكنك الاشتراك في مساحة عمل حكومة المملكة المتحدة الرقمية للاتصال بالمحافظة المدرجة أعلاه ومجتمع الأشخاص الذين يستخدمون هذا المشروع في قناة #Govuk-Design-System.
خلاف ذلك ، يرجى الاطلاع على إرشادات المساهمة حول كيفية رفع تقرير الأخطاء أو طلب الميزة.
