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](http://materializecss.com/)
## Install
```
pip install django-materializecss-form
```
[on pypi](https://pypi.python.org/pypi/django-materializecss-form)
[on GitHub](https://github.com/kalwalkden/django-materializecss-form)
Add to INSTALLED_APPS:
```
INSTALLED_APPS = (
'materializecssform',
...
)
```
Add Materializecss to your project:
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
Use it like this, simple.
{% load materializecss %}
### All the form
{{ form|materializecss }}
### Individual field
{{ form.<<field name>> | materializecss }}
### Custom size (default is 's12')
{{ form|materializecss:'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.
```html
{{ form.FIELD_NAME|materializecss:'s12 m6, icon=person' }}
{{ form.FIELD_NAME|materializecss:'custom_size=s12 m6, icon=person' }}
```
## Demo
![Basic form](https://cloud.githubusercontent.com/assets/3958123/6165004/a1984f52-b2a4-11e4-8ae2-078505991b0d.png)
![DatePicker](https://cloud.githubusercontent.com/assets/3958123/6165005/a19bf044-b2a4-11e4-9989-6a64f9c97087.png)
## Help
### Widget
- TextInput
- Textarea
- CheckboxInput
- RadioSelect
- Select
- SelectMultiple
- CheckboxSelectMultiple
- Filefield
- DateField
- DateTimeField (doesn't show time yet)
## Inspired by
[django-bootstrap-form](https://github.com/tzangms/django-bootstrap-form)
## Originally Built By
Florent CLAPIÉ
[https://pypi.org/user/florent1933/] https://pypi.org/user/florent1933/
Materializecss for Django Form
A simple Django template tag to work with [Materializecss](http://materializecss.com/)
## Install
```
pip install django-materializecss-form
```
[on pypi](https://pypi.python.org/pypi/django-materializecss-form)
[on GitHub](https://github.com/kalwalkden/django-materializecss-form)
Add to INSTALLED_APPS:
```
INSTALLED_APPS = (
'materializecssform',
...
)
```
Add Materializecss to your project:
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
Use it like this, simple.
{% load materializecss %}
### All the form
{{ form|materializecss }}
### Individual field
{{ form.<<field name>> | materializecss }}
### Custom size (default is 's12')
{{ form|materializecss:'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.
```html
{{ form.FIELD_NAME|materializecss:'s12 m6, icon=person' }}
{{ form.FIELD_NAME|materializecss:'custom_size=s12 m6, icon=person' }}
```
## Demo
![Basic form](https://cloud.githubusercontent.com/assets/3958123/6165004/a1984f52-b2a4-11e4-8ae2-078505991b0d.png)
![DatePicker](https://cloud.githubusercontent.com/assets/3958123/6165005/a19bf044-b2a4-11e4-9989-6a64f9c97087.png)
## Help
### Widget
- TextInput
- Textarea
- CheckboxInput
- RadioSelect
- Select
- SelectMultiple
- CheckboxSelectMultiple
- Filefield
- DateField
- DateTimeField (doesn't show time yet)
## Inspired by
[django-bootstrap-form](https://github.com/tzangms/django-bootstrap-form)
## Originally Built By
Florent CLAPIÉ
[https://pypi.org/user/florent1933/] https://pypi.org/user/florent1933/
Project details
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.9.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 7c9d59ebaf1e9584e19d4e974720dbe32433bafc3245c83d32188b69ae05d5bb |
|
MD5 | 70863d97d2f4df3d0dd503f07c38f02a |
|
BLAKE2b-256 | 5af16fcaecced82f3163daef44e54008cedad1d2d590856d1f01fac2bfe6560a |