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
-------
::
pip django-materializecss-form
`on pypi`_
::
https://github.com/kalwalkden/django-materializecss-form
`on Github`_
Add to INSTALLED\_APPS:
::
INSTALLED_APPS = (
'materializecssform',
...
)
Add Materializecss to your project:
In your base.html:
::
<head>
{% block css %}
<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
-----
Use it like this, simple.
{% load materializecss %}
All the form
~~~~~~~~~~~~
{{ form\|materializecss }}
Individual field
~~~~~~~~~~~~~~~~
{{ form.\|materializecss }}
Custom size (default is 's12')
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{{ form\|materializecss:'m6' }}
Demo
----
.. figure:: https://cloud.githubusercontent.com/assets/3958123/6165004/a1984f52-b2a4-11e4-8ae2-078505991b0d.png
:alt: Basic form
Basic form
.. figure:: https://cloud.githubusercontent.com/assets/3958123/6165005/a19bf044-b2a4-11e4-9989-6a64f9c97087.png
:alt: DatePicker
DatePicker
Help
----
Widget
~~~~~~
- TextInput
- Textarea
- Select
- Filefield
- DateField
Inspired by
-----------
`django-bootstrap-form`_
Originally Built By
-----------
Florent CLAPIÉ
`Florent CLAPIÉ`_
.. _Materializecss: http://materializecss.com/
.. _on pypi: https://pypi.python.org/pypi/django-materializecss-form
.. _on GitHub: https://github.com/kalwalkden/django-materializecss-form
.. _Florent CLAPIÉ: ttps://pypi.org/user/florent1933/
.. _django-bootstrap-form: https://github.com/tzangms/django-bootstrap-form
====================
Materializecss for Django Form
A simple Django template tag to work with `Materializecss`_
Install
-------
::
pip django-materializecss-form
`on pypi`_
::
https://github.com/kalwalkden/django-materializecss-form
`on Github`_
Add to INSTALLED\_APPS:
::
INSTALLED_APPS = (
'materializecssform',
...
)
Add Materializecss to your project:
In your base.html:
::
<head>
{% block css %}
<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
-----
Use it like this, simple.
{% load materializecss %}
All the form
~~~~~~~~~~~~
{{ form\|materializecss }}
Individual field
~~~~~~~~~~~~~~~~
{{ form.\|materializecss }}
Custom size (default is 's12')
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{{ form\|materializecss:'m6' }}
Demo
----
.. figure:: https://cloud.githubusercontent.com/assets/3958123/6165004/a1984f52-b2a4-11e4-8ae2-078505991b0d.png
:alt: Basic form
Basic form
.. figure:: https://cloud.githubusercontent.com/assets/3958123/6165005/a19bf044-b2a4-11e4-9989-6a64f9c97087.png
:alt: DatePicker
DatePicker
Help
----
Widget
~~~~~~
- TextInput
- Textarea
- Select
- Filefield
- DateField
Inspired by
-----------
`django-bootstrap-form`_
Originally Built By
-----------
Florent CLAPIÉ
`Florent CLAPIÉ`_
.. _Materializecss: http://materializecss.com/
.. _on pypi: https://pypi.python.org/pypi/django-materializecss-form
.. _on GitHub: https://github.com/kalwalkden/django-materializecss-form
.. _Florent CLAPIÉ: ttps://pypi.org/user/florent1933/
.. _django-bootstrap-form: https://github.com/tzangms/django-bootstrap-form
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.
Source Distribution
Close
Hashes for django-materializecss-form-1.1.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 1030569220a17fac844b29b0eec9e44cfa63f7ecaf069d27255a49fc1bacc936 |
|
| MD5 | 9a25ce92e53f2282c690532a137d364e |
|
| BLAKE2b-256 | 348056b98270577566e0b4736a25e054d2e9478b3898dd7eab5277b52274a6d6 |
