Skip to content

Template variables¤

Here is a list of all variables that are automatically available from inside the component's template:

args instance-attribute ¤

args: Any

See source code

The args argument as passed to Component.get_template_data().

This is the same Component.args that's available on the component instance.

If you defined the Component.Args class, then the args property will return an instance of that class.

Otherwise, args will be a plain list.

Example:

With Args class:

from django_components import Component, register

@register("table")
class Table(Component):
    class Args:
        page: int
        per_page: int

    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.args.page }}</p>
            <p>Per page: {{ component_vars.args.per_page }}</p>
        </div>
    '''

Without Args class:

from django_components import Component, register

@register("table")
class Table(Component):
    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.args.0 }}</p>
            <p>Per page: {{ component_vars.args.1 }}</p>
        </div>
    '''

kwargs instance-attribute ¤

kwargs: Any

See source code

The kwargs argument as passed to Component.get_template_data().

This is the same Component.kwargs that's available on the component instance.

If you defined the Component.Kwargs class, then the kwargs property will return an instance of that class.

Otherwise, kwargs will be a plain dict.

Example:

With Kwargs class:

from django_components import Component, register

@register("table")
class Table(Component):
    class Kwargs:
        page: int
        per_page: int

    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.kwargs.page }}</p>
            <p>Per page: {{ component_vars.kwargs.per_page }}</p>
        </div>
    '''

Without Kwargs class:

from django_components import Component, register

@register("table")
class Table(Component):
    template = '''
        <div>
            <h1>Table</h1>
            <p>Page: {{ component_vars.kwargs.page }}</p>
            <p>Per page: {{ component_vars.kwargs.per_page }}</p>
        </div>
    '''

slots instance-attribute ¤

slots: Any

See source code

The slots argument as passed to Component.get_template_data().

This is the same Component.slots that's available on the component instance.

If you defined the Component.Slots class, then the slots property will return an instance of that class.

Otherwise, slots will be a plain dict.

Example:

With Slots class:

from django_components import Component, SlotInput, register

@register("table")
class Table(Component):
    class Slots:
        footer: SlotInput

    template = '''
        <div>
            {% component "pagination" %}
                {% fill "footer" body=component_vars.slots.footer / %}
            {% endcomponent %}
        </div>
    '''

Without Slots class:

from django_components import Component, SlotInput, register

@register("table")
class Table(Component):
    template = '''
        <div>
            {% component "pagination" %}
                {% fill "footer" body=component_vars.slots.footer / %}
            {% endcomponent %}
        </div>
    '''

is_filled instance-attribute ¤

is_filled: Dict[str, bool]

See source code

Deprecated. Will be removed in v1. Use component_vars.slots instead. Note that component_vars.slots no longer escapes the slot names.

Dictonary describing which component slots are filled (True) or are not (False).

New in version 0.70

Use as {{ component_vars.is_filled }}

Example:

{# Render wrapping HTML only if the slot is defined #}
{% if component_vars.is_filled.my_slot %}
    <div class="slot-wrapper">
        {% slot "my_slot" / %}
    </div>
{% endif %}

This is equivalent to checking if a given key is among the slot fills:

class MyTable(Component):
    def get_template_data(self, args, kwargs, slots, context):
        return {
            "my_slot_filled": "my_slot" in slots
        }