{% component "button" name="John" job="Developer" / %}
``` The component name must be a string literal. ### Inserting slot fills If the component defined any [slots](../concepts/fundamentals/slots.md), you can "fill" these slots by placing the [`{% fill %}`](../template_tags#fill) tags within the [`{% component %}`](../template_tags#component) tag: ```django {% component "my_table" rows=rows headers=headers %} {% fill "pagination" %} < 1 | 2 | 3 > {% endfill %} {% endcomponent %} ``` You can even nest [`{% fill %}`](../template_tags#fill) tags within [`{% if %}`](https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#if), [`{% for %}`](https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#for) and other tags: ```django {% component "my_table" rows=rows headers=headers %} {% if rows %} {% fill "pagination" %} < 1 | 2 | 3 > {% endfill %} {% endif %} {% endcomponent %} ``` ### Isolating components By default, components behave similarly to Django's [`{% include %}`](https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#include), and the template inside the component has access to the variables defined in the outer template. You can selectively isolate a component, using the `only` flag, so that the inner template can access only the data that was explicitly passed to it: ```django {% component "name" positional_arg keyword_arg=value ... only %} ``` Alternatively, you can set all components to be isolated by default, by setting [`context_behavior`](../settings#django_components.app_settings.ComponentsSettings.context_behavior) to `"isolated"` in your settings: ```python # settings.py COMPONENTS = { "context_behavior": "isolated", } ``` ### Omitting the component keyword If you would like to omit the `component` keyword, and simply refer to your components by their registered names: ```django {% button name="John" job="Developer" / %} ``` You can do so by setting the "shorthand" [Tag formatter](../../concepts/advanced/tag_formatters) in the settings: ```python # settings.py COMPONENTS = { "tag_formatter": "django_components.component_shorthand_formatter", } ``` ## fill ```django {% fill name: str, *, data: Optional[str] = None, fallback: Optional[str] = None, body: Union[str, django.utils.safestring.SafeString, django_components.slots.SlotFunc[~TSlotData], django_components.slots.Slot[~TSlotData], NoneType] = None, default: Optional[str] = None %} {% endfill %} ``` See source code Use [`{% fill %}`](../template_tags#fill) tag to insert content into component's [slots](../../concepts/fundamentals/slots). [`{% fill %}`](../template_tags#fill) tag may be used only within a `{% component %}..{% endcomponent %}` block, and raises a `TemplateSyntaxError` if used outside of a component. **Args:** - `name` (str, required): Name of the slot to insert this content into. Use `"default"` for the [default slot](../../concepts/fundamentals/slots#default-slot). - `data` (str, optional): This argument allows you to access the data passed to the slot under the specified variable name. See [Slot data](../../concepts/fundamentals/slots#slot-data). - `fallback` (str, optional): This argument allows you to access the original content of the slot under the specified variable name. See [Slot fallback](../../concepts/fundamentals/slots#slot-fallback). **Example:** ```django {% component "my_table" %} {% fill "pagination" %} < 1 | 2 | 3 > {% endfill %} {% endcomponent %} ``` ### Access slot fallback Use the `fallback` kwarg to access the original content of the slot. The `fallback` kwarg defines the name of the variable that will contain the slot's fallback content. Read more about [Slot fallback](../../concepts/fundamentals/slots#slot-fallback). Component template: ```django {# my_table.html #} ... {% slot "pagination" %} < 1 | 2 | 3 > {% endslot %} ``` Fill: ```django {% component "my_table" %} {% fill "pagination" fallback="fallback" %}{{ fallback }}
{% endfill %} {% endcomponent %} ``` ### Access slot data Use the `data` kwarg to access the data passed to the slot. The `data` kwarg defines the name of the variable that will contain the slot's data. Read more about [Slot data](../../concepts/fundamentals/slots#slot-data). Component template: ```django {# my_table.html #} ... {% slot "pagination" pages=pages %} < 1 | 2 | 3 > {% endslot %} ``` Fill: ```django {% component "my_table" %} {% fill "pagination" data="slot_data" %} {% for page in slot_data.pages %} {{ page.index }} {% endfor %} {% endfill %} {% endcomponent %} ``` ### Using default slot To access slot data and the fallback slot content on the default slot, use [`{% fill %}`](../template_tags#fill) with `name` set to `"default"`: ```django {% component "button" %} {% fill name="default" data="slot_data" fallback="slot_fallback" %} You clicked me {{ slot_data.count }} times! {{ slot_fallback }} {% endfill %} {% endcomponent %} ``` ### Slot fills from Python You can pass a slot fill from Python to a component by setting the `body` kwarg on the [`{% fill %}`](../template_tags#fill) tag. First pass a [`Slot`](../api#django_components.Slot) instance to the template with the [`get_template_data()`](../api#django_components.Component.get_template_data) method: ```python from django_components import component, Slot class Table(Component): def get_template_data(self, args, kwargs, slots, context): return { "my_slot": Slot(lambda ctx: "Hello, world!"), } ``` Then pass the slot to the [`{% fill %}`](../template_tags#fill) tag: ```django {% component "table" %} {% fill "pagination" body=my_slot / %} {% endcomponent %} ``` !!! warning If you define both the `body` kwarg and the [`{% fill %}`](../template_tags#fill) tag's body, an error will be raised. ```django {% component "table" %} {% fill "pagination" body=my_slot %} ... {% endfill %} {% endcomponent %} ``` ## html_attrs ```django {% html_attrs attrs: Optional[Dict] = None, defaults: Optional[Dict] = None, **kwargs: Any %} ``` See source code Generate HTML attributes (`key="value"`), combining data from multiple sources, whether its template variables or static text. It is designed to easily merge HTML attributes passed from outside as well as inside the component. **Args:** - `attrs` (dict, optional): Optional dictionary that holds HTML attributes. On conflict, overrides values in the `default` dictionary. - `default` (str, optional): Optional dictionary that holds HTML attributes. On conflict, is overriden with values in the `attrs` dictionary. - Any extra kwargs will be appended to the corresponding keys The attributes in `attrs` and `defaults` are merged and resulting dict is rendered as HTML attributes (`key="value"`). Extra kwargs (`key=value`) are concatenated to existing keys. So if we have ```python attrs = {"class": "my-class"} ``` Then ```django {% html_attrs attrs class="extra-class" %} ``` will result in `class="my-class extra-class"`. **Example:** ```djangoRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4