Material Django¶

Polymer Paper-UI widgets and tools for Django.

Contents¶

Getting Started¶

Installation¶

pip install materialdjango

add materialdjango to your INSTALLED_APPS in settings.py

re-run manage.py collectstatic

Features¶

<link rel="import" href="materialdjango/components/bower_components/paper-input/paper-input-container.html>

becomes {{ "paper-input/paper-input-container.html" |dep}}

We vendor polymer elements for import from PolymerElements/paper-elements and PolymerElements/iron-elements. Approximate versions specified in our bower.json. If you’d like another suite added to our vendoring file an issue on github.

We also ship widgets for use in Django forms.

Usage¶

{% load polymerdep %}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
{{polymer_shim}} # this belongs at the head of document
{{ "polymer/polymer.html" |dep}}
{{ "paper-input/paper-input-container.html" |dep}}
{{ "iron-input/iron-input.html" |dep}}
</head>
<body>
    {{form.as_p}}
</body>

in app/forms.py

from django import forms
from django.contrib.auth.forms import AuthenticationForm
from widgets import PaperTextInput, PaperPasswordInput


class PaperLoginForm(AuthenticationForm):
    username = forms.CharField(max_length=254, label='', widget=PaperTextInput)
    password = forms.CharField(label='', widget=PaperPasswordInput)
    def __init__(self, request, *args, **kwargs):
        super(PaperLoginForm, self).__init__(*args, **kwargs)

Forms¶

class PaperLoginForm¶: Subclass of Django’s AuthenticationForm. Uses PaperTextInput and PaperPasswordInput widgets.

mangle_form(form)¶: Utility to monkeypatch forms into PaperInputs. Currently untested.

Widgets¶

Each widget is a subclass of their respective django.forms.widgets classes (e.g., materialdjango.PaperTextInput is subclassed from django.forms.widgets.TextInput). For more information, see Django’s widgets documentation.

Note

While the following widgets are prefixed with Paper, they actually use <iron-input> styling for the moment, as <paper-input> styling doesn’t work properly with <form> tags. This will be fixed eventually, and these will likely be renamed with Iron prefixes.

class PaperTextInput¶: Subclass of Django’s TextInput with <iron-input> Material Design styling.

class PaperPasswordInput¶: Subclass of Django’s PasswordInput widget with <iron-input> Material Design styling.

class PaperEmailInput¶: Subclass of Django’s EmailInput widget with <iron-input> Material Design styling.

class PaperTextArea¶: Subclass of Django’s TextArea widget with <iron-input> Material Design styling.

class PaperCheckboxInput¶: Subclass of Django’s CheckboxInput widget with <iron-input> Material Design styling.