Easily convert your Django Forms and ModelForms to use widgets styled with Material Components for the Web.
Install Django Material Widgets:
pip install django-material-widgets
Add
material_widgetstoINSTALLED_APPSin yoursettings.py:INSTALLED_APPS = [ ... 'material_widgets', ]Edit your
forms.py:Import
material_widgets.widgets.MaterialFormand/ormaterial_widgets.widgets.MaterialModelForm:from material_widgets import MaterialForm, MaterialModelForm
Change forms using
django.forms.Formand/ordjango.forms.ModelFormtoMaterialFormorMaterialModelFormrespectively:class MyForm(forms.Form): ⇨ class MyForm(MaterialForm): class MyModelForm(forms.ModelForm): ⇨ class MyModelForm(MaterialModelForm):
Edit your HTML templates:
Change
{{ form }}template variables to{{ form.as_components }}:{{ form.as_p }} ⇨ {{ form.as_components }}Add
{{ form.media.css }}to your<head>tag:<head> ... {{ form.media.css }} </head>Add the
mdc-typographyCSS class to your<body>tag:<body class="mdc-typography" ...>
Add
{{ form.media.js }}to the bottom of your<body>tag:<body class="mdc-typography" ...> ... {{ form.media.js }} </body>(Optional) Add font and icon stylesheet links if required:
<head> ... <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head>
https://ooknosi.github.com/django_material_widgets
To view the demo locally at http://localhost:8000:
$ git clone https://github.com/ooknosi/django_material_widgets.git
$ cd django_material_widgets/src
$ python manage.py migrate --settings=demo.settings
$ python manage.py runserver --settings=demo.settings