|
| 1 | +[](https://badge.fury.io/py/django-materializecss-form) |
| 2 | + |
1 | 3 | # materialize-css-form |
2 | 4 | Materializecss for Django Form |
3 | 5 |
|
4 | 6 | A simple Django template tag to work with [Materializecss](http://materializecss.com/) |
5 | 7 |
|
6 | | - |
7 | | - |
8 | | - |
9 | | - |
10 | 8 | ## Install |
11 | 9 |
|
| 10 | +From [PyPi](https://pypi.org/project/django-materializecss-form/): |
12 | 11 |
|
13 | 12 | ``` |
14 | 13 | pip install django-materializecss-form |
15 | | -
|
16 | 14 | ``` |
17 | 15 |
|
| 16 | +[From GitHub](https://github.com/kalwalkden/django-materializecss-form) |
18 | 17 |
|
19 | | - |
20 | | -[on pypi](https://pypi.python.org/pypi/django-materializecss-form) |
21 | | -[on GitHub](https://github.com/kalwalkden/django-materializecss-form) |
22 | | - |
23 | | -Add to INSTALLED_APPS: |
| 18 | +Add module to INSTALLED_APPS: |
24 | 19 |
|
25 | 20 | ``` |
26 | 21 | INSTALLED_APPS = ( |
@@ -74,45 +69,54 @@ $(document).ready(function(){ |
74 | 69 |
|
75 | 70 | ## Usage |
76 | 71 |
|
77 | | -Use it like this, simple. |
| 72 | +Import the module simply like this: |
78 | 73 |
|
79 | 74 | ```html |
80 | 75 | {% load materializecss %} |
81 | 76 | ``` |
82 | 77 |
|
83 | 78 | ### Full form |
84 | 79 |
|
| 80 | +Format a whole form: |
| 81 | + |
85 | 82 | ```html |
86 | 83 | {{ form|materializecss }} |
87 | 84 | ``` |
88 | 85 |
|
89 | 86 | ### Individual field |
90 | 87 |
|
| 88 | +Format only a specific field: |
| 89 | + |
91 | 90 | ```html |
92 | 91 | {{ form.<field name>|materializecss }} |
93 | 92 | ``` |
94 | 93 |
|
95 | 94 | ### Custom size (default is 's12') |
96 | 95 |
|
| 96 | +Apply custom sizes in grid ([see Materialize CSS documentation](https://materializecss.com/grid.html)): |
97 | 97 | ```html |
98 | 98 | {{ form|materializecss:'m6' }} |
99 | 99 | {{ form|materializecss:'custom_size=m6' }} |
100 | 100 | ``` |
101 | 101 |
|
102 | 102 |
|
103 | 103 | ### Icons support |
| 104 | + |
104 | 105 | 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. |
| 106 | + |
105 | 107 | ```html |
106 | 108 | {{ form.FIELD_NAME|materializecss:'s12 m6, icon=person' }} |
107 | 109 | {{ form.FIELD_NAME|materializecss:'custom_size=s12 m6, icon=person' }} |
108 | 110 | ``` |
109 | 111 |
|
110 | | -#### Opional icon sets |
| 112 | +#### Optional icon sets |
| 113 | + |
111 | 114 | If you're using optional icon sets you need to set `MATERIALIZECSS_ICON_SET` in your settings file: |
112 | 115 |
|
113 | 116 | ```python |
114 | 117 | MATERIALIZECSS_ICON_SET = 'fontawesome' |
115 | 118 | ``` |
| 119 | + |
116 | 120 | Currently [Font Awesome](https://www.fontawesome.com/) and [GLYPHICONS](https://www.glyphicons.com) is supported, however you might need to modify your CSS for full support. |
117 | 121 |
|
118 | 122 | ### Note about `DateTimeField` |
@@ -147,15 +151,10 @@ DATETIME_INPUT_FORMATS += ["%Y-%m-%dT%H:%M:%S", "%Y-%m-%dT%H:%M"] |
147 | 151 | - DateField |
148 | 152 | - DateTimeField |
149 | 153 |
|
150 | | - |
151 | | - |
152 | 154 | ## Inspired by |
153 | 155 |
|
154 | 156 | [django-bootstrap-form](https://github.com/tzangms/django-bootstrap-form) |
155 | 157 |
|
156 | 158 | ## Originally Built By |
157 | 159 |
|
158 | | -Florent CLAPIÉ |
159 | | - |
160 | | -[https://pypi.org/user/florent1933/] https://pypi.org/user/florent1933/ |
161 | | - |
| 160 | +Florent CLAPIÉ ([PyPI](https://pypi.org/user/florent1933/)) |
0 commit comments