- Notifications
You must be signed in to change notification settings - Fork40
Materializecss for Django Form
License
kalwalkden/django-materializecss-form
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Materializecss for Django Form
A simple Django template tag to work withMaterializecss
FromPyPi:
pip install django-materializecss-formFromGitHub
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>Import the module simply like this:
{% load materializecss %}Format a whole form:
{{ form|materializecss }}Format only a specific field:
{{ form.<fieldname>|materializecss }}Apply custom sizes in grid (see Materialize CSS documentation):
{{ form|materializecss:'m6' }}{{ form|materializecss:'custom_size=m6' }}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' }}If you're using optional icon sets you need to setMATERIALIZECSS_ICON_SET in your settings file:
MATERIALIZECSS_ICON_SET='fontawesome'
CurrentlyFont Awesome andGLYPHICONS is supported, however you might need to modify your CSS for full support.
Input field is rendered as adatetime-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 valuesDATETIME_INPUT_FORMATS += ["%Y-%m-%dT%H:%M:%S", "%Y-%m-%dT%H:%M"]
- TextInput
- Textarea
- CheckboxInput
- RadioSelect
- Select
- SelectMultiple
- CheckboxSelectMultiple
- Filefield
- DateField
- DateTimeField
Florent CLAPIÉ (PyPI)
About
Materializecss for Django Form
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.