https://github.com/ooknosi/django_material_widgets

Django widgets styled with Material Components for the Web
https://github.com/ooknosi/django_material_widgets

django material-components material-components-web material-design

Last synced: 3 months ago
JSON representation

Django widgets styled with Material Components for the Web

• Host: GitHub
• URL: https://github.com/ooknosi/django_material_widgets
• Owner: ooknosi
• License: apache-2.0
• Created: 2017-11-21T15:00:20.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T23:51:49.000Z (about 2 years ago)
• Last Synced: 2024-10-13T14:27:14.924Z (3 months ago)
• Topics: django, material-components, material-components-web, material-design
• Language: Python
• Size: 979 KB
• Stars: 24
• Watchers: 5
• Forks: 3
• Open Issues: 12
• Metadata Files:
  • Readme: README.rst
  • Changelog: CHANGELOG.rst
  • Contributing: CONTRIBUTING.rst
  • License: LICENSE

Awesome Lists containing this project

README

        
=======================

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|

|screenshot|

Quick Start

-----------

#) Install Django Material Widgets::

    pip install django-material-widgets

#) Add ``material_widgets`` to ``INSTALLED_APPS`` in your ``settings.py``::

    INSTALLED_APPS = [

        ...

        'material_widgets',

    ]

#) 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):

#) Edit your HTML templates:

    - Change ``{{ form }}`` template variables to ``{{ form.as_components }}``::

        {{ form.as_p }} ⇨ {{ form.as_components }}

    - Add ``{{ form.media.css }}`` to your ```` tag::

        

            ...

            {{ form.media.css }}

        

    - Add the ``mdc-typography`` CSS class to your ```` tag::

      

    - Add ``{{ form.media.js }}`` to the bottom of your ```` tag::

        

            ...

            {{ form.media.js }}

        

    - (Optional) Add font and icon stylesheet links if required::

        

            ...

            

            

        

Demo

----

https://ooknosi.github.com/django_material_widgets

To view the demo locally at ``http://localhost:8000``:

.. code-block:: bash

    $ 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

.. _Material Components for the Web: https://material.io/components/web/

.. |screenshot| image:: https://raw.githubusercontent.com/ooknosi/django_material_widgets/master/docs/screenshot.png

                :width: 100%

                :alt: Click to view demo

                :target: https://ooknosi.github.com/django_material_widgets

.. |status| image:: https://img.shields.io/pypi/status/django-material-widgets.svg

            :target: https://pypi.python.org/pypi/django-material-widgets

.. |docs| image:: https://img.shields.io/readthedocs/django-material-widgets.svg

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

.. |pypi| image:: https://img.shields.io/pypi/v/django-material-widgets.svg

          :target: https://pypi.python.org/pypi/django-material-widgets

.. |pyversion| image:: https://img.shields.io/pypi/pyversions/django-material-widgets.svg

               :target: https://pypi.python.org/pypi/django-material-widgets

.. |license| image:: https://img.shields.io/pypi/l/django-material-widgets.svg

             :target: https://github.com/ooknosi/django_material_widgets/blob/master/LICENSE