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.

Source Distribution

django-component-0.1.7.tar.gz (7.5 kB view hashes)

Uploaded Source

Built Distribution

django_component-0.1.7-py3-none-any.whl (8.5 kB view hashes)

Uploaded Python 3

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