Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Django Material Widgets

Easily convert your Django Forms and ModelForms to use widgets styled with Material Components for the Web.

status docs pypi pyversion license

Click to view demo

Quick Start

  1. Install Django Material Widgets:

    pip install django-material-widgets
    
  2. Add material_widgets to INSTALLED_APPS in your settings.py:

    INSTALLED_APPS = [
        ...
        'material_widgets',
    ]
    
  3. Edit your forms.py:

    • Import material_widgets.widgets.MaterialForm and/or material_widgets.widgets.MaterialModelForm:

      from material_widgets import MaterialForm, MaterialModelForm
      
    • Change forms using django.forms.Form and/or django.forms.ModelForm to MaterialForm or MaterialModelForm respectively:

      class MyForm(forms.Form): ⇨ class MyForm(MaterialForm):
      
      class MyModelForm(forms.ModelForm): ⇨ class MyModelForm(MaterialModelForm):
      
  4. 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-typography CSS 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>
      

Demo

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

Documentation

http://django-material-widgets.readthedocs.io

About

Django widgets styled with Material Components for the Web

Topics

Resources

License

Releases

No releases published

Packages

No packages published