Template tagsยค
All following template tags are defined in
django_components.templatetags.component_tags
Import as
componentยค
Renders one of the components that was previously registered with @register() decorator.
Args:
name(str, required): Registered name of the component to render- All other args and kwargs are defined based on the component itself.
If you defined a component "my_table"
Renders one of the components that was previously registered with @register() decorator.
Args:
name(str, required): Registered name of the component to render- All other args and kwargs are defined based on the component itself.
If you defined a component "my_table"
from django_component import Component, register
@register("my_table")
class MyTable(Component):
@@ -39,10 +39,10 @@
{% endcomponent %}
Isolating componentsยค
By default, components behave similarly to Django's {% 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:
component_css_dependenciesยค
Marks location where CSS link tags should be rendered after the whole HTML has been generated.
Generally, this should be inserted into the <head> tag of the HTML.
If the generated HTML does NOT contain any {% component_css_dependencies %} tags, CSS links are by default inserted into the <head> tag of the HTML. (See JS and CSS output locations)
Note that there should be only one {% component_css_dependencies %} for the whole HTML document. If you insert this tag multiple times, ALL CSS links will be duplicately inserted into ALL these places.
component_js_dependenciesยค
Marks location where JS link tags should be rendered after the whole HTML has been generated.
Generally, this should be inserted at the end of the <body> tag of the HTML.
If the generated HTML does NOT contain any {% component_js_dependencies %} tags, JS scripts are by default inserted at the end of the <body> tag of the HTML. (See JS and CSS output locations)
Note that there should be only one {% component_js_dependencies %} for the whole HTML document. If you insert this tag multiple times, ALL JS scripts will be duplicately inserted into ALL these places.
fillยค
Marks location where CSS link tags should be rendered after the whole HTML has been generated.
Generally, this should be inserted into the <head> tag of the HTML.
If the generated HTML does NOT contain any {% component_css_dependencies %} tags, CSS links are by default inserted into the <head> tag of the HTML. (See JS and CSS output locations)
Note that there should be only one {% component_css_dependencies %} for the whole HTML document. If you insert this tag multiple times, ALL CSS links will be duplicately inserted into ALL these places.
component_js_dependenciesยค
Marks location where JS link tags should be rendered after the whole HTML has been generated.
Generally, this should be inserted at the end of the <body> tag of the HTML.
If the generated HTML does NOT contain any {% component_js_dependencies %} tags, JS scripts are by default inserted at the end of the <body> tag of the HTML. (See JS and CSS output locations)
Note that there should be only one {% component_js_dependencies %} for the whole HTML document. If you insert this tag multiple times, ALL JS scripts will be duplicately inserted into ALL these places.
fillยค
Use this tag to insert content into component's slots.
{% fill %} tag may be used only within a {% component %}..{% endcomponent %} block. Runtime checks should prohibit other usages.
Args:
name(str, required): Name of the slot to insert this content into. Use"default"for the default slot.default(str, optional): This argument allows you to access the original content of the slot under the specified variable name. See Accessing original content of slotsdata(str, optional): This argument allows you to access the data passed to the slot under the specified variable name. See Scoped slots
Examples:
Basic usage:
Use this tag to insert content into component's slots.
{% fill %} tag may be used only within a {% component %}..{% endcomponent %} block. Runtime checks should prohibit other usages.
Args:
name(str, required): Name of the slot to insert this content into. Use"default"for the default slot.default(str, optional): This argument allows you to access the original content of the slot under the specified variable name. See Accessing original content of slotsdata(str, optional): This argument allows you to access the data passed to the slot under the specified variable name. See Scoped slots
Examples:
Basic usage:
{% component "my_table" %}
{% fill "pagination" %}
< 1 | 2 | 3 >
{% endfill %}
@@ -84,7 +84,7 @@
{% endfill %}
{% endcomponent %}
html_attrsยค
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 with the internal. See how to in Passing HTML attributes to components.
Args:
attrs(dict, optional): Optional dictionary that holds HTML attributes. On conflict, overrides values in thedefaultdictionary.default(str, optional): Optional dictionary that holds HTML attributes. On conflict, is overriden with values in theattrsdictionary.- 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
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 with the internal. See how to in Passing HTML attributes to components.
Args:
attrs(dict, optional): Optional dictionary that holds HTML attributes. On conflict, overrides values in thedefaultdictionary.default(str, optional): Optional dictionary that holds HTML attributes. On conflict, is overriden with values in theattrsdictionary.- 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
Then
will result in class="my-class extra-class".
Example:
renders
See more usage examples in HTML attributes.
provideยค
The "provider" part of the provide / inject feature. Pass kwargs to this tag to define the provider's data. Any components defined within the {% provide %}..{% endprovide %} tags will be able to access this data with Component.inject().
This is similar to React's ContextProvider, or Vue's provide().
Args:
name(str, required): Provider name. This is the name you will then use inComponent.inject().**kwargs: Any extra kwargs will be passed as the provided data.
Example:
Provide the "user_data" in parent component:
The "provider" part of the provide / inject feature. Pass kwargs to this tag to define the provider's data. Any components defined within the {% provide %}..{% endprovide %} tags will be able to access this data with Component.inject().
This is similar to React's ContextProvider, or Vue's provide().
Args:
name(str, required): Provider name. This is the name you will then use inComponent.inject().**kwargs: Any extra kwargs will be passed as the provided data.
Example:
Provide the "user_data" in parent component:
โ Don't do this
slotยค
Slot tag marks a place inside a component where content can be inserted from outside.
Learn more about using slots.
This is similar to slots as seen in Web components, Vue or React's children.
Args:
name(str, required): Registered name of the component to renderdefault: Optional flag. If there is a default slot, you can pass the component slot content without using the{% fill %}tag. See Default slotrequired: Optional flag. Will raise an error if a slot is required but not given.**kwargs: Any extra kwargs will be passed as the slot data.
Example:
Slot tag marks a place inside a component where content can be inserted from outside.
Learn more about using slots.
This is similar to slots as seen in Web components, Vue or React's children.
Args:
name(str, required): Registered name of the component to renderdefault: Optional flag. If there is a default slot, you can pass the component slot content without using the{% fill %}tag. See Default slotrequired: Optional flag. Will raise an error if a slot is required but not given.**kwargs: Any extra kwargs will be passed as the slot data.
Example:
@register("child")
class Child(Component):
template = """
<div>
diff --git a/dev/sitemap.xml b/dev/sitemap.xml
index 68d3fd31..7240edc9 100644
--- a/dev/sitemap.xml
+++ b/dev/sitemap.xml
@@ -2,214 +2,214 @@
https://emilstenstrom.github.io/django-components/latest/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/SUMMARY/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/migrating_from_safer_staticfiles/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/release_notes/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/authoring_component_libraries/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/component_registry/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/hooks/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/html_tragments/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/provide_inject/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/rendering_js_css/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/tag_formatter/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/typing_and_validation/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/access_component_input/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/autodiscovery/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/component_context_scope/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_as_views/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_in_python/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/defining_js_css_html_files/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/html_attributes/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/single_file_components/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/slots/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/subclassing_components/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/getting_started/adding_js_and_css/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/getting_started/adding_slots/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/getting_started/components_in_templates/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/getting_started/parametrising_components/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/getting_started/your_first_component/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/guides/devguides/dependency_mgmt/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/guides/devguides/slot_rendering/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/guides/devguides/slots_and_blocks/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/guides/setup/dev_server_setup/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/guides/setup/logging_and_debugging/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/guides/setup/syntax_highlight/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/code_of_conduct/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/community/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/compatibility/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/contributing/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/development/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/installation/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/license/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/security_notes/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/overview/welcome/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/api/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/commands/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/components/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/exceptions/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/middlewares/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/settings/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/tag_formatters/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/template_tags/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/template_vars/
- 2025-01-08
+ 2025-01-09
https://emilstenstrom.github.io/django-components/latest/reference/urls/
- 2025-01-08
+ 2025-01-09
\ No newline at end of file
diff --git a/dev/sitemap.xml.gz b/dev/sitemap.xml.gz
index 848f24e6..cf09c0a9 100644
Binary files a/dev/sitemap.xml.gz and b/dev/sitemap.xml.gz differ
diff --git a/versions.json b/versions.json
index b6372068..34fa87c9 100644
--- a/versions.json
+++ b/versions.json
@@ -1,7 +1,7 @@
[
{
"version": "dev",
- "title": "dev (6c2a687)",
+ "title": "dev (a79b24b)",
"aliases": []
},
{