[원본] jazzband/django-widget-tweaks - 개인적인 필요에 의해 구글 번역함.
장고 - 위젯 - 비틀기
파이썬 수준의 폼 정의가 아닌 템플릿의 폼 필드 렌더링을 조정합니다. CSS 클래스 및 HTML 속성 변경이 지원됩니다.
이는 디자이너가 파이썬 코드를 건드리지 않고도 필드 프리젠테이션을 사용자 정의할 수 있어야 합니다 (CSS와 눈에 거슬리지 않는 자바 스크립트 사용).
라이센스는 MIT입니다.
설치
pip를 사용하여 Django Widget Tweaks를 얻을 수 있습니다.
$ pip install django-widget-tweaks
프로젝트에서 widget_tweaks를 활성화하려면 프로젝트 settings.py 파일의 INSTALLED_APPS에 추가해야합니다.
INSTALLED_APPS = [
...
'widget_tweaks',
...
]
용법
이 앱은 함께 사용되거나 독립형으로 사용될 수 있는 두 가지 도구 세트를 제공합니다.
HTML과 같은 구문을 사용하여 양식 필드를 사용자 정의하기 위한 render_field 템플릿 태그
양식 필드 HTML 속성 및 CSS 클래스 사용자 정의를 위한 여러 가지 템플릿 필터
render_field 태그는 사용하기가 더 쉬워야하며 디자이너와 프런트 엔드 개발자가 양식 필드 사용자 정의를 훨씬 쉽게 수행해야 합니다.
템플릿 필터는 render_field 태그보다 강력하지만 더 복잡하고 HTML과 유사한 구문을 사용합니다.
render_field
이는 앞서 언급한 필터의 대안으로 사용할 수 있는 템플릿 태그입니다. 이 템플릿 태그는 일반 HTML 속성과 유사한 구문을 사용하여 필드를 렌더링합니다.
예:
{% load widget_tweaks %}
<!-- change input type (e.g. to HTML5) -->
{% render_field form.search_query type="search" %}
<!-- add/change several attributes -->
{% render_field form.text rows="20" cols="20" title="Hello, world!" %}
<!-- append to an attribute -->
{% render_field form.title class+="css_class_1 css_class_2" %}
<!-- template variables can be used as attribute values -->
{% render_field form.text placeholder=form.text.label %}
{% render_field %} 태그로 렌더링된 필드의 경우 WIDGET_ERROR_CLASS 및 WIDGET_REQUIRED_CLASS 템플릿 변수를 사용하여 오류 클래스 및 필수 필드 클래스를 설정할 수 있습니다.
{% with WIDGET_ERROR_CLASS = 'my_error'WIDGET_REQUIRED_CLASS = 'my_required'%}
{% render_field form.field1 %}
{% render_field form.field2 %}
{% render_field form.field3 %}
{% endwith %}
다음 변수를 통해 창의력을 발휘할 수 있습니다. 컨텍스트 프로세서는 {% render_field %}에 의해 렌더링된 모든 필드에서 기본 CSS 오류 클래스를 설정할 수 있습니다.
attr
양식 필드에 대한 단일 HTML 속성을 추가하거나 대체합니다.
예 :
{% load widget_tweaks %}
<!-- change input type (e.g. to HTML5) -->
{{ form.search_query|attr:"type:search" }}
<!-- add/change several attributes -->
{{ form.text|attr:"rows:20"|attr:"cols:20"|attr:"title:Hello, world!" }}
<!-- attributes without parameters -->
{{ form.search_query|attr:"autofocus" }}
add_class
CSS 클래스를 필드 요소에 추가합니다. 한 번에 여러 클래스를 추가하려면 공백으로 클래스를 분할하십시오.
예:
{% load widget_tweaks %}
<!-- add 2 extra css classes to field element -->
{{ form.title|add_class:"css_class_1 css_class_2" }}
set_data
HTML5 데이터 속성(http://ejohn.org/blog/html-5-data-attributes/)을 설정합니다. 눈에 잘 띄지 않는 자바 스크립트에 유용합니다. 속성 이름 앞에 'data-'문자열을 붙이는 'attr'필터의 바로 가기입니다.
예:
{% load widget_tweaks %}
<!-- data-filters:"OverText" will be added to input field -->
{{ form.title|set_data:"filters:OverText" }}
append_attr
추가 데이터로 속성 값을 추가합니다.
예:
{% load widget_tweaks %}
<!-- add 2 extra css classes to field element -->
{{ form.title|append_attr:"class:css_class_1 css_class_2" }}
'add_class'필터는 값을 'class'속성에 추가하는 'append_attr' 필터의 바로 가기입니다.
add_label_class
add_class와 같지만 css 클래스를 양식 레이블에 추가합니다.
예:
{% load widget_tweaks %}
<!-- add 2 extra css classes to field label element -->
{{ form.title|add_label_class:"label_class_1 label_class_2" }}
add_error_class
'add_class'와 동일하지만 필드에 대한 유효성 검사가 실패한 경우에만 css 클래스를 추가합니다 (field.errors가 비어 있지 않음).
예:
{% load widget_tweaks %}
<!-- add 'error-border' css class on field error -->
{{ form.title|add_error_class:"error-border" }}
add_error_attr
'attr'과 같지만 필드에 대해 유효성 검사가 실패한 경우에만 속성을 설정합니다 (field.errors가 비어 있지 않음). 접근성을 다룰 때 유용 할 수 있습니다 :
{% load widget_tweaks %}
<!-- add aria-invalid="true" attribute on field error -->
{{ form.title|add_error_attr:"aria-invalid:true" }}
field_type 및 widget_type
'field_type'과 'widget_type'은 필드 클래스 이름과 필드 위젯 클래스 이름 (소문자)을 반환하는 템플릿 필터입니다.
예:
{% load widget_tweaks %}
<div class="field {{ field|field_type }} {{ field|widget_type }} {{ field.html_name }}">
{{ field }}
</div>
산출:
<div class="field charfield textinput name">
<input id="id_name" type="text" name="name" maxlength="100" />
</div>
render_field와 필터의 혼합
위에서 언급한 render_field 태그와 필터는 혼합될 수 있습니다.
예:
{% render_field form.category|append_attr:"readonly:readonly" type="text" placeholder="Category" %}
보고:
<input name="category" placeholder="Profession" readonly="readonly" type="text">
필터 연결
django-widget-tweaks 필터 적용 순서는 반 직관적으로 보일 수 있습니다 (가장 왼쪽 필터 우승).
{{ form.simple|attr:"foo:bar"|attr:"foo:baz" }}
보고:
<input foo="bar" type="text" name="simple" id="id_simple" />
이것은 버그가 아니며, 재정의 할 수있는 기본값으로 재사용 가능한 템플릿을 만들 수있는 기능입니다.
재사용 가능한 필드 템플릿 예제 :
{# inc/field.html #}
{% load widget_tweaks %}
<div>{{ field|attr:"foo:default_foo" }}</div>
사용 예 :
{# my_template.html #}
{% load widget_tweaks %}
<form method='POST' action=''> {% csrf_token %}
{% include "inc/field.html" with field=form.title %}
{% include "inc/field.html" with field=form.description|attr:"foo:non_default_foo" %}
</form>
'가장 오른쪽 필터 승'규칙을 사용하면 기본 템플리트에서 |attr:"foo:default_foo"를 겹쳐 쓸 수 없습니다.
기고
버그를 발견했거나 기능을 구현했거나 제안이 있는 경우 언제든지 저에게 연락하거나 문제를 제기하거나 당겨 받기 요청을 보내십시오.
소스 코드 : https://github.com/jazzband/django-widget-tweaks/
버그 추적기 : https://github.com/jazzband/django-widget-tweaks/issues
테스트
tox가 설치되어 있는지 확인한 다음
tox
소스 체크 아웃에서.
'Sundry > Python' 카테고리의 다른 글
vuengo tutorial (0) | 2018.12.18 |
---|---|
json encode decode 예제 (0) | 2018.12.14 |
How to Render Django Form Manually (0) | 2018.12.02 |
월 - 월 계산하기 (0) | 2018.11.12 |
bdist_wheel error (0) | 2018.11.12 |