Skip to main content

Django widgets styled with Material Components for the Web.

Project description

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 stylesheet links:

      <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/en/latest/

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-material-widgets-1.0.0b3.tar.gz (452.8 kB view details)

Uploaded Source

File details

Details for the file django-material-widgets-1.0.0b3.tar.gz.

File metadata

File hashes

Hashes for django-material-widgets-1.0.0b3.tar.gz
Algorithm Hash digest
SHA256 5fb1e54968ea9605895697e67c4785ea95be342ba5c84f347136af6cd3f263d2
MD5 322e80b328e8301681748d3d71d38e5c
BLAKE2b-256 3944368c7e18622fe790fd9ccebd84371ff63cc9d3ff11d2e9319d9b7f5a5c88

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page