{% fill "my_slot" %}
Filled content
{% endfill %}
{% endif %}
```
And in Python with the [`Component.slots`](../../../reference/api#django_components.Component.slots) property:
```py
class Calendar(Component):
# `get_template_data` receives the `slots` argument directly
def get_template_data(self, args, kwargs, slots, context):
if "my_slot" in slots:
content = "Filled content"
else:
content = "Default content"
return {
"my_slot": content,
}
# In other methods you can still access the slots with `Component.slots`
def on_render_before(self, context, template):
if "my_slot" in self.slots:
# Do something
```
### Dynamic fills
The slot and fill names can be set as variables. This way you can fill slots dynamically:
```django
{% with "body" as slot_name %}
{% component "calendar" %}
{% fill slot_name %}
Filled content
{% endfill %}
{% endcomponent %}
{% endwith %}
```
You can even use [`{% if %}`](https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#std-templatetag-if)
and [`{% for %}`](https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#std-templatetag-for)
tags inside the [`{% component %}`](../../../reference/template_tags#component) tag to fill slots with more control:
```django
{% component "calendar" %}
{% if condition %}
{% fill "name" %}
Filled content
{% endfill %}
{% endif %}
{% for item in items %}
{% fill item.name %}
Item: {{ item.value }}
{% endfill %}
{% endfor %}
{% endcomponent %}
```
You can also use [`{% with %}`](https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#std-templatetag-with)
or even custom tags to generate the fills dynamically:
```django
{% component "calendar" %}
{% with item.name as name %}
{% fill name %}
Item: {{ item.value }}
{% endfill %}
{% endwith %}
{% endcomponent %}
```
!!! warning
If you dynamically generate `{% fill %}` tags, be careful to render text only inside the `{% fill %}` tags.
Any text rendered outside `{% fill %}` tags will be considered a default fill and will raise an error
if combined with explicit fills. (See [Default slot](#default-slot))
### Slot data
Sometimes the slots need to access data from the component. Imagine an HTML table component
which has a slot to configure how to render the rows. Each row has a different data, so you need
to pass the data to the slot.
Similarly to [Vue's scoped slots](https://vuejs.org/guide/components/slots#scoped-slots),
you can pass data to the slot, and then access it in the fill.
This consists of two steps:
1. Passing data to [`{% slot %}`](../../../reference/template_tags#slot) tag
2. Accessing data in [`{% fill %}`](../../../reference/template_tags#fill) tag
The data is passed to the slot as extra keyword arguments. Below we set two extra arguments: `first_name` and `job`.
```django
{# Pass data to the slot #}
{% slot "name" first_name="John" job="Developer" %}
{# Fallback implementation #}
Name: {{ first_name }}
Job: {{ job }}
{% endslot %}
```
!!! note
`name` kwarg is already used for slot name, so you cannot pass it as slot data.
To access the slot's data in the fill, use the [`data`](../../../reference/template_tags#fill) keyword. This sets the name
of the variable that holds the data in the fill:
```django
{# Access data in the fill #}
{% component "profile" %}
{% fill "name" data="d" %}
Hello, my name is {{ d.first_name }}
and I'm a{{ d.job }}
{% endfill %} {% endcomponent %} ``` To access the slot data in Python, use the `data` attribute in [slot functions](#slot-functions). ```py def my_slot(ctx): return f""" Hello, my name is{ctx.data["first_name"]}
and I'm a{ctx.data["job"]}
""" Profile.render( slots={ "name": my_slot, }, ) ``` Slot data can be set also when rendering a slot in Python: ```py slot = Slot(lambda ctx: f"Hello, {ctx.data['name']}!") # Render the slot html = slot({"name": "John"}) ``` !!! info To access slot data on a [default slot](#default-slot), you have to explictly define the `{% fill %}` tags with name `"default"`. ```django {% component "my_comp" %} {% fill "default" data="slot_data" %} {{ slot_data.input }} {% endfill %} {% endcomponent %} ``` !!! warning You cannot set the `data` attribute and [`fallback` attribute](#slot-fallback) to the same name. This raises an error: ```django {% component "my_comp" %} {% fill "content" data="slot_var" fallback="slot_var" %} {{ slot_var.input }} {% endfill %} {% endcomponent %} ``` ### Slot fallback The content between the `{% slot %}..{% endslot %}` tags is the *fallback* content that will be rendered if no fill is given for the slot. ```django {% slot "name" %} Hello, my name is {{ name }} {% endslot %} ``` Sometimes you may want to keep the fallback content, but only wrap it in some other content. To do so, you can access the fallback content via the [`fallback`](../../../reference/template_tags#fill) kwarg. This sets the name of the variable that holds the fallback content in the fill: ```django {% component "profile" %} {% fill "name" fallback="fb" %} Original content:
{{ fb }}
{% endfill %}
{% endcomponent %}
```
To access the fallback content in Python, use the [`fallback`](../../../reference/api#django_components.SlotContext.fallback)
attribute in [slot functions](#slot-functions).
The fallback value is rendered lazily. Coerce the fallback to a string to render it.
```py
def my_slot(ctx):
# Coerce the fallback to a string
fallback = str(ctx.fallback)
return f"Original content: " + fallback
Profile.render(
slots={
"name": my_slot,
},
)
```
Fallback can be set also when rendering a slot in Python:
```py
slot = Slot(lambda ctx: f"Hello, {ctx.data['name']}!")
# Render the slot
html = slot({"name": "John"}, fallback="Hello, world!")
```
!!! info
To access slot fallback on a [default slot](#default-slot), you have to explictly define the `{% fill %}` tags
with name `"default"`.
```django
{% component "my_comp" %}
{% fill "default" fallback="fallback" %}
{{ fallback }}
{% endfill %}
{% endcomponent %}
```
!!! warning
You cannot set the [`data`](#slot-data) attribute and
`fallback` attribute
to the same name. This raises an error:
```django
{% component "my_comp" %}
{% fill "content" data="slot_var" fallback="slot_var" %}
{{ slot_var.input }}
{% endfill %}
{% endcomponent %}
```
### Slot functions
In Python code, slot fills can be defined as strings, functions, or
[`Slot`](../../../reference/api#django_components.Slot) instances that wrap the two.
Slot functions have access to slot [`data`](../../../reference/api#django_components.SlotContext.data),
[`fallback`](../../../reference/api#django_components.SlotContext.fallback),
and [`context`](../../../reference/api#django_components.SlotContext.context).
```py
def row_slot(ctx):
if ctx.data["disabled"]:
return ctx.fallback
item = ctx.data["item"]
if ctx.data["type"] == "table":
return f"
{% slot "date" default date=date / %}
"""
Calendar.render(
slots={
"date": escape("Hello"),
}
)
```
To disable escaping, you can wrap the slot string or slot result in Django's [`mark_safe()`](https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.mark_safe):
```py
Calendar.render(
slots={
# string
"date": mark_safe("Hello"),
# function
"date": lambda ctx: mark_safe("Hello"),
}
)
```
!!! info
Read more about Django's
[`format_html`](https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.html.format_html)
and [`mark_safe`](https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.mark_safe).
## Examples
### Pass through all the slots
You can dynamically pass all slots to a child component. This is similar to
[passing all slots in Vue](https://vue-land.github.io/faq/forwarding-slots#passing-all-slots):
```djc_py
class MyTable(Component):
template = """
{% component "child" %}
{% for slot_name, slot in component_vars.slots.items %}
{% fill name=slot_name body=slot / %}
{% endfor %}
{% endcomponent %}
"""
```
### Required and default slots
Since each [`{% slot %}`](../../../reference/template_tags#slot) is tagged
with [`required`](#required-slot) and [`default`](#default-slot) individually, you can have multiple slots
with the same name but different conditions.
In this example, we have a component that renders a user avatar - a small circular image with a profile picture or name initials.
If the component is given `image_src` or `name_initials` variables,
the `image` slot is optional.
But if neither of those are provided, you MUST fill the `image` slot.
```htmldjango
{# Image given, so slot is optional #}
{% if image_src %}
{% slot "image" default %}
{% endslot %}
{# Image not given, but we can make image from initials, so slot is optional #}
{% elif name_initials %}
{% slot "image" default %}
```
### Dynamic slots in table component
Sometimes you may want to generate slots based on the given input. One example of this is [Vuetify's table component](https://vuetifyjs.com/en/api/v-data-table/), which creates a header and an item slots for each user-defined column.
So if you pass columns named `name` and `age` to the table component:
```py
[
{"key": "name", "title": "Name"},
{"key": "age", "title": "Age"},
]
```
Then the component will accept fills named `header-name` and `header-age` (among others):
```django
{% fill "header-name" data="data" %}
{{ data.value }}
{% endfill %}
{% fill "header-age" data="data" %}
{{ data.value }}
{% endfill %}
```
In django-components you can achieve the same, simply by using a variable or a [template expression](../template_tag_syntax#template-tags-inside-literal-strings) instead of a string literal:
```django
{{ name_initials }}
{% endslot %}
{# Neither image nor initials given, so slot is required #}
{% else %}
{% slot "image" default required / %}
{% endif %}
| {% slot "header-{{ header.key }}" value=header.title %} {{ header.title }} {% endslot %} | {% endfor %}
|---|
{% slot "title" %}
Title
{% endslot %}
{% if component_vars.is_filled.subtitle %}
{% slot "subtitle" %}
{# Optional subtitle #}
{% endslot %}
{% elif component_vars.is_filled.title %}
...
{% elif component_vars.is_filled.