A simple Django form template tag to work with Materializecss
Project description
materialize-css-form
Materializecss for Django Form
A simple Django template tag to work with Materializecss
Install
From PyPi:
pip install django-materializecss-form
From GitHub
Add module to INSTALLED_APPS:
INSTALLED_APPS = (
'materializecssform',
...
)
Add Materialize CSS to your project (Official Documentation):
In your base.html:
<head>
{% block css %}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
{% endblock css %}
</head>
<body >
{% block javascript %}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// Initialize materialize data picker
$('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
$('select').formSelect();
});
</script>
{% endblock javascript %}
...
</body>
Usage
Import the module simply like this:
{% load materializecss %}
Full form
Format a whole form:
{{ form|materializecss }}
Individual field
Format only a specific field:
{{ form.<field name>|materializecss }}
Custom size (default is 's12')
Apply custom sizes in grid (see Materialize CSS documentation):
{{ form|materializecss:'m6' }}
{{ form|materializecss:'custom_size=m6' }}
Icons support
This is most useful for adding a descriptive icon when you are creating a custom layout by building the form one field at a time. Substitue FIELD_NAME below with one of the field names from your form.
{{ form.FIELD_NAME|materializecss:'s12 m6, icon=person' }}
{{ form.FIELD_NAME|materializecss:'custom_size=s12 m6, icon=person' }}
Optional icon sets
If you're using optional icon sets you need to set MATERIALIZECSS_ICON_SET in your settings file:
MATERIALIZECSS_ICON_SET = 'fontawesome'
Currently Font Awesome and GLYPHICONS is supported, however you might need to modify your CSS for full support.
Note about DateTimeField
Input field is rendered as a datetime-local type, this lets the user easily enter both a date and a time. As this field requires ISO-8601 format, your main project settings need to include the ISO format in order for the form to interpret this field valid:
from django.conf.global_settings import DATETIME_INPUT_FORMATS
# ISO 8601 datetime format to accept html5 datetime input values
DATETIME_INPUT_FORMATS += ["%Y-%m-%dT%H:%M:%S", "%Y-%m-%dT%H:%M"]
Demo
Help
Widget
- TextInput
- Textarea
- CheckboxInput
- RadioSelect
- Select
- SelectMultiple
- CheckboxSelectMultiple
- Filefield
- DateField
- DateTimeField
Inspired by
Originally Built By
Florent CLAPIÉ (PyPI)
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
| Filename, size | File type | Python version | Upload date | Hashes |
|---|---|---|---|---|
| Filename, size django_materializecss_form-1.1.17-py2.py3-none-any.whl (10.1 kB) | File type Wheel | Python version py2.py3 | Upload date | Hashes View |
| Filename, size django-materializecss-form-1.1.17.tar.gz (7.7 kB) | File type Source | Python version None | Upload date | Hashes View |
Hashes for django_materializecss_form-1.1.17-py2.py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 648e81cc801fda172c7405966b29877d1242d9712b3d52c7b20aa3a78833a96a |
|
| MD5 | 1b0822d3bafb2ff0720cc8b1e63d615b |
|
| BLAKE2-256 | 8e767d9d0094101705b47a1863c176eb2059d719f96bc939306107e01140eb3d |
Hashes for django-materializecss-form-1.1.17.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 29cb4f1cb371d0f7a2b2c10af842e03d6e8b5de5b78aadf1416f24efd854494b |
|
| MD5 | a12a235cb15ad119e1a0ba01257ebe88 |
|
| BLAKE2-256 | 1ff28a430fffdfa69e13539ec96eb289e5069a4e8b23daa8ae9096d3dff4cf40 |
