Selecmat
MaterializeCSS + Selectize.js for Django Form
A simple Django template tag to work with Materializecss and Selectize.js
Install
pip install django-selecmat
Add to INSTALLED_APPS:
INSTALLED_APPS = (
'selecmat',
...
)
Add MaterializeCSS and Selectize 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.2/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="{% static 'css/selectize.css' %}" media="screen,projection"/>
{% 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.2/js/materialize.min.js"></script>
<script type="text/javascript" src="{% static 'js/selectize.min.js' %}"></script>
<script>
$(document).ready(function(){
// Initialize materialize data picker
$('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
$('select').selectize();
});
</script>
{% endblock javascript %}
...
</body>
Usage
Use it like this, simple.
{% load selecmat %}
All the form
{{ form|selecmat }}
Individual field
{{ form.<> | selecmat }}
Custom size (default is 's12')
{{ form|selecmat:'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|selecmat:'s12 m6, icon=person' }}
{{ form.FIELD_NAME|selecmat:'custom_size=s12 m6, icon=person' }}
Demo
Help
Widget
- TextInput
- Textarea
- CheckboxInput
- RadioSelect
- Select
- SelectMultiple
- CheckboxSelectMultiple
- Filefield
- DateField
- DateTimeField (doesn't show time yet)
Inspired by
Originally Built By
Florent CLAPIÉ
https://pypi.org/user/florent1933/
Adapted from
1 maintainer
Release files for django-selecmat 0.0.1
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | |
|---|---|---|---|
| django-selecmat-0.0.1.tar.gz | 5.7 kB | Details |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Reset |
|---|---|---|---|---|
| django_selecmat-0.0.1-py3-none-any.whl | Python 3 | none | any | Details |
Total release size: 12.6 kB
Release files / django-selecmat-0.0.1.tar.gz
| Download URL | django-selecmat-0.0.1.tar.gz |
|---|---|
| Size | 5.7 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
126f989609ee59fad80dea69d0a092d077636bb4a3760f40fd97d276017365a2
|
|
BLAKE2b-256 checksum How to use checksums |
10b48fbae97bacd49f759c67adf84f39627fc86f5e91093acc9d00217eb7300b
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
twine/1.11.0 pkginfo/1.4.2 requests/2.18.4 setuptools/40.2.0 requests-toolbelt/0.8.0 tqdm/4.20.0 CPython/3.6.3
|
Release files / django_selecmat-0.0.1-py3-none-any.whl
| Download URL | django_selecmat-0.0.1-py3-none-any.whl |
|---|---|
| Size | 7.0 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
33b19882e7fd645353d54794beaf8dd2c4c705aecc0a7d36864f5d67d8c6d077
|
|
BLAKE2b-256 checksum How to use checksums |
6b44e6f34c5cb5b414e3cd56710f948bf8df0ca0379d20dc1533f0a70373c772
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
twine/1.11.0 pkginfo/1.4.2 requests/2.18.4 setuptools/40.2.0 requests-toolbelt/0.8.0 tqdm/4.20.0 CPython/3.6.3
|
