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"
    css = ["myapp/card.css"]
    js = ["myapp/card.js"]
# myapp/templates/myapp/card.html

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

And use them in your templates

{% load mycomponents %}

{% use_components %}
{% components_css %}

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

    {% slot header %}
        This <img src="foo.jpg" />
        will be in the header of the card
    {% endslot %}
{% /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 for {% use_components %}, {% components_css %} and {% components_js %}

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.2
Filename, size File type Python version Upload date Hashes
Filename, size django_component-0.1.2-py3-none-any.whl (6.9 kB) File type Wheel Python version py3 Upload date Hashes View hashes
Filename, size django-component-0.1.2.tar.gz (5.9 kB) File type Source Python version None Upload date Hashes View hashes

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page