Skip to main content

Django template tags to create composable components

Project description

Modern components for django templates Declarative and composable components inspired by javascript frameworks.

Supports Python 3.6+ and Django 1.11, 2.0+, and 3.0+

Usage

Describe your component:

# myapp/templatetags/mycomponents.py

from django_component import Library, Component

register = Library()

@register.component
class Card(Component):
    template = "myapp/card.html"

    class Media:
        css = {"all": ["myapp/card.css"]}
        js = ["myapp/card.js"]
# myapp/templates/myapp/card.html

<section class="card">
    <header>{{ header }}</header>
    <h1>{{ short_title }}</h1>
    <div>{{ children }}</div>
</section>

And use them in your templates

{% load mycomponents %}
{% components_css %}

{% Card title="My card's title" %}
    This will be accessible as the `children` variable.
    It's just django template, <span>{{ variable }}</span> !

    {% arg header %}
        This <img src="foo.jpg" />
        will be in the header of the card
    {% endarg %}
{% /Card %}

{% components_js %}

django-component also enable context processing per component, see the documentation (TODO) for the complete api.

Why django-component?

django-component make it easy to create reusable template components. Django has some features to address this, but they all come with some limitations. django-component unify these features (block, includes, inclusion_tag, simple_tag) under an unique api. In addition django-component address one of my greatest frustration with reusable components in django: tracking css and js dependencies for each component and include them only when they are effectively used.

Installation

pip install django-component

Then add django-component to your INSTALLED_APPS, it is also recommended to add django-component.templatetags as builtins templatetags

INSTALLED_APPS = [
    ...,
    "django_component",
    ...
]


TEMPLATES=[
    {
        'OPTIONS': {
            'builtins': [
                'django_component.templatetags',
            ]
        },
    }
],

Project details


Download files

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

Files for django-component, version 0.1.7
Filename, size File type Python version Upload date Hashes
Filename, size django_component-0.1.7-py3-none-any.whl (8.5 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size django-component-0.1.7.tar.gz (7.5 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring DigiCert DigiCert EV certificate Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page