django-widget-tweaks

[원본] 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

소스 체크 아웃에서.