API¤
Component(registered_name: Optional[str] = None, outer_context: Optional[Context] = None, registry: Optional[ComponentRegistry] = None)
Methods:
-
as_view– -
get_context_data– -
get_template– -
get_template_name– -
inject– -
on_render_after– -
on_render_before– -
render– -
render_to_response–
Attributes:
-
Media(Optional[Type[ComponentMediaInput]]) – -
View– -
css(Optional[str]) – -
css_file(Optional[str]) – -
id(str) – -
input(RenderInput[ArgsType, KwargsType, SlotsType]) – -
is_filled(SlotIsFilled) – -
js(Optional[str]) – -
js_file(Optional[str]) – -
media(Optional[Media]) – -
media_class(Type[Media]) – -
name(str) – -
outer_context(Context) – -
registered_name(Optional[str]) – -
registry– -
response_class– -
template(Optional[Union[str, Template]]) – -
template_file(Optional[str]) – -
template_name(Optional[str]) –
class-attribute instance-attribute ¤
Media: Optional[Type[ComponentMediaInput]] = None
-Defines JS and CSS media files associated with this component.
This Media class behaves similarly to Django's Media class:
- Paths are generally handled as static file paths, and resolved URLs are rendered to HTML with
media_class.render_js()ormedia_class.render_css(). - A path that starts with
http,https, or/is considered a URL, skipping the static file resolution. This path is still rendered to HTML withmedia_class.render_js()ormedia_class.render_css(). - A
SafeString(with__html__method) is considered an already-formatted HTML tag, skipping both static file resolution and rendering withmedia_class.render_js()ormedia_class.render_css(). - You can set
extendto configure whether to inherit JS / CSS from parent components. See Controlling Media Inheritance.
However, there's a few differences from Django's Media class:
- Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictonary (See
ComponentMediaInput). - Individual JS / CSS files can be any of
str,bytes,Path,SafeString, or a function (SeeComponentMediaInputPath).
Example:
Defines JS and CSS media files associated with this component.
This Media class behaves similarly to Django's Media class:
- Paths are generally handled as static file paths, and resolved URLs are rendered to HTML with
media_class.render_js()ormedia_class.render_css(). - A path that starts with
http,https, or/is considered a URL, skipping the static file resolution. This path is still rendered to HTML withmedia_class.render_js()ormedia_class.render_css(). - A
SafeString(with__html__method) is considered an already-formatted HTML tag, skipping both static file resolution and rendering withmedia_class.render_js()ormedia_class.render_css(). - You can set
extendto configure whether to inherit JS / CSS from parent components. See Controlling Media Inheritance.
However, there's a few differences from Django's Media class:
- Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictonary (See
ComponentMediaInput). - Individual JS / CSS files can be any of
str,bytes,Path,SafeString, or a function (SeeComponentMediaInputPath).
Example:
class-attribute instance-attribute ¤
Main CSS associated with this component inlined as string.
Only one of css or css_file must be defined.
Example:
class-attribute instance-attribute ¤
Main CSS associated with this component as file path.
The filepath must be either:
- Relative to the directory where the Component's Python file is defined.
- Relative to one of the component directories, as set by
COMPONENTS.dirsorCOMPONENTS.app_dirs(e.g.<root>/components/). - Relative to the staticfiles directories, as set by Django's
STATICFILES_DIRSsetting (e.g.<root>/static/).
When you create a Component class with css_file, these will happen:
- If the file path is relative to the directory where the component's Python file is, the path is resolved.
- The file is read and its contents is set to
Component.css.
Only one of css or css_file must be defined.
Example:
Main CSS associated with this component as file path.
The filepath must be either:
- Relative to the directory where the Component's Python file is defined.
- Relative to one of the component directories, as set by
COMPONENTS.dirsorCOMPONENTS.app_dirs(e.g.<root>/components/). - Relative to the staticfiles directories, as set by Django's
STATICFILES_DIRSsetting (e.g.<root>/static/).
When you create a Component class with css_file, these will happen:
- If the file path is relative to the directory where the component's Python file is, the path is resolved.
- The file is read and its contents is set to
Component.css.
Only one of css or css_file must be defined.
Example:
property ¤
id: str
-This ID is unique for every time a Component.render() (or equivalent) is called (AKA "render ID").
This is useful for logging or debugging.
Raises RuntimeError if accessed outside of rendering execution.
A single render ID has a chance of collision 1 in 3.3M. However, due to birthday paradox, the chance of collision increases when approaching ~1,000 render IDs.
Thus, there is a soft-cap of 1,000 components rendered on a single page.
If you need to more than that, please open an issue on GitHub.
Example:
This ID is unique for every time a Component.render() (or equivalent) is called (AKA "render ID").
This is useful for logging or debugging.
Raises RuntimeError if accessed outside of rendering execution.
A single render ID has a chance of collision 1 in 3.3M. However, due to birthday paradox, the chance of collision increases when approaching ~1,000 render IDs.
Thus, there is a soft-cap of 1,000 components rendered on a single page.
If you need to more than that, please open an issue on GitHub.
Example:
property ¤
Input holds the data (like arg, kwargs, slots) that were passsed to the current execution of the render method.
property ¤
Dictionary describing which slots have or have not been filled.
This attribute is available for use only within the template as {{ component_vars.is_filled.slot_name }}, and within on_render_before and on_render_after hooks.
class-attribute instance-attribute ¤
Main JS associated with this component inlined as string.
Only one of js or js_file must be defined.
Example:
Input holds the data (like arg, kwargs, slots) that were passsed to the current execution of the render method.
property ¤
Dictionary describing which slots have or have not been filled.
This attribute is available for use only within the template as {{ component_vars.is_filled.slot_name }}, and within on_render_before and on_render_after hooks.
class-attribute instance-attribute ¤
class-attribute instance-attribute ¤
Main JS associated with this component as file path.
The filepath must be either:
- Relative to the directory where the Component's Python file is defined.
- Relative to one of the component directories, as set by
COMPONENTS.dirsorCOMPONENTS.app_dirs(e.g.<root>/components/). - Relative to the staticfiles directories, as set by Django's
STATICFILES_DIRSsetting (e.g.<root>/static/).
When you create a Component class with js_file, these will happen:
- If the file path is relative to the directory where the component's Python file is, the path is resolved.
- The file is read and its contents is set to
Component.js.
Only one of js or js_file must be defined.
Example:
Main JS associated with this component as file path.
The filepath must be either:
- Relative to the directory where the Component's Python file is defined.
- Relative to one of the component directories, as set by
COMPONENTS.dirsorCOMPONENTS.app_dirs(e.g.<root>/components/). - Relative to the staticfiles directories, as set by Django's
STATICFILES_DIRSsetting (e.g.<root>/static/).
When you create a Component class with js_file, these will happen:
- If the file path is relative to the directory where the component's Python file is, the path is resolved.
- The file is read and its contents is set to
Component.js.
Only one of js or js_file must be defined.
Example:
class-attribute instance-attribute ¤
media: Optional[Media] = None
-Normalized definition of JS and CSS media files associated with this component. None if Component.Media is not defined.
This field is generated from Component.media_class.
Read more on Accessing component's HTML / JS / CSS.
Example:
Normalized definition of JS and CSS media files associated with this component. None if Component.Media is not defined.
This field is generated from Component.media_class.
Read more on Accessing component's HTML / JS / CSS.
Example:
class-attribute instance-attribute ¤
media_class: Type[Media] = Media
-Set the Media class that will be instantiated with the JS and CSS media files from Component.Media.
This is useful when you want to customize the behavior of the media files, like customizing how the JS or CSS files are rendered into <script> or <link> HTML tags. Read more in Defining HTML / JS / CSS files.
Example:
Set the Media class that will be instantiated with the JS and CSS media files from Component.Media.
This is useful when you want to customize the behavior of the media files, like customizing how the JS or CSS files are rendered into <script> or <link> HTML tags. Read more in Defining HTML / JS / CSS files.
Example:
class MyTable(Component):
class Media:
js = "path/to/script.js"
css = "path/to/style.css"
@@ -75,25 +75,25 @@
class-attribute instance-attribute ¤
response_class = HttpResponse
-This allows to configure what class is used to generate response from render_to_response
class-attribute instance-attribute ¤
Inlined Django template associated with this component. Can be a plain string or a Template instance.
Only one of template_file, get_template_name, template or get_template must be defined.
Example:
This allows to configure what class is used to generate response from render_to_response
class-attribute instance-attribute ¤
Inlined Django template associated with this component. Can be a plain string or a Template instance.
Only one of template_file, get_template_name, template or get_template must be defined.
Example:
class-attribute instance-attribute ¤
Filepath to the Django template associated with this component.
The filepath must be either:
- Relative to the directory where the Component's Python file is defined.
- Relative to one of the component directories, as set by
COMPONENTS.dirsorCOMPONENTS.app_dirs(e.g.<root>/components/). - Relative to the template directories, as set by Django's
TEMPLATESsetting (e.g.<root>/templates/).
Only one of template_file, get_template_name, template or get_template must be defined.
Example:
Filepath to the Django template associated with this component.
The filepath must be either:
- Relative to the directory where the Component's Python file is defined.
- Relative to one of the component directories, as set by
COMPONENTS.dirsorCOMPONENTS.app_dirs(e.g.<root>/components/). - Relative to the template directories, as set by Django's
TEMPLATESsetting (e.g.<root>/templates/).
Only one of template_file, get_template_name, template or get_template must be defined.
Example:
instance-attribute ¤
Alias for template_file.
For historical reasons, django-components used template_name to align with Django's TemplateView.
template_file was introduced to align with js/js_file and css/css_file.
Setting and accessing this attribute is proxied to template_file.
classmethod ¤
as_view(**initkwargs: Any) -> ViewFn
-Shortcut for calling Component.View.as_view and passing component instance to it.
Alias for template_file.
For historical reasons, django-components used template_name to align with Django's TemplateView.
template_file was introduced to align with js/js_file and css/css_file.
Setting and accessing this attribute is proxied to template_file.
classmethod ¤
as_view(**initkwargs: Any) -> ViewFn
+Shortcut for calling Component.View.as_view and passing component instance to it.
Inlined Django template associated with this component. Can be a plain string or a Template instance.
Only one of template_file, get_template_name, template or get_template must be defined.
Filepath to the Django template associated with this component.
The filepath must be relative to either the file where the component class was defined, or one of the roots of STATIFILES_DIRS.
Only one of template_file, get_template_name, template or get_template must be defined.
Use this method to retrieve the data that was passed to a {% provide %} tag with the corresponding key.
To retrieve the data, inject() must be called inside a component that's inside the {% provide %} tag.
You may also pass a default that will be used if the provide tag with given key was NOT found.
This method mut be used inside the get_context_data() method and raises an error if called elsewhere.
Example:
Given this template:
Inlined Django template associated with this component. Can be a plain string or a Template instance.
Only one of template_file, get_template_name, template or get_template must be defined.
Filepath to the Django template associated with this component.
The filepath must be relative to either the file where the component class was defined, or one of the roots of STATIFILES_DIRS.
Only one of template_file, get_template_name, template or get_template must be defined.
Use this method to retrieve the data that was passed to a {% provide %} tag with the corresponding key.
To retrieve the data, inject() must be called inside a component that's inside the {% provide %} tag.
You may also pass a default that will be used if the provide tag with given key was NOT found.
This method mut be used inside the get_context_data() method and raises an error if called elsewhere.
Example:
Given this template:
{% provide "provider" hello="world" %}
{% component "my_comp" %}
{% endcomponent %}
{% endprovide %}
@@ -107,8 +107,8 @@
return {"data": data}
This renders into:
As the {{ data.hello }} is taken from the "provider".
on_render_after(context: Context, template: Template, content: str) -> Optional[SlotResult]
-Hook that runs just after the component's template was rendered. It receives the rendered output as the last argument.
You can use this hook to access the context or the template, but modifying them won't have any effect.
To override the content that gets rendered, you can return a string or SafeString from this hook.
Hook that runs just before the component's template is rendered.
You can use this hook to access or modify the context or the template.
classmethod ¤
Hook that runs just after the component's template was rendered. It receives the rendered output as the last argument.
You can use this hook to access the context or the template, but modifying them won't have any effect.
To override the content that gets rendered, you can return a string or SafeString from this hook.
Hook that runs just before the component's template is rendered.
You can use this hook to access or modify the context or the template.
classmethod ¤
render(
context: Optional[Union[Dict[str, Any], Context]] = None,
args: Optional[ArgsType] = None,
kwargs: Optional[KwargsType] = None,
@@ -118,7 +118,7 @@
render_dependencies: bool = True,
request: Optional[HttpRequest] = None,
) -> str
-Render the component into a string.
Inputs: - args - Positional args for the component. This is the same as calling the component as {% component "my_comp" arg1 arg2 ... %} - kwargs - Kwargs for the component. This is the same as calling the component as {% component "my_comp" key1=val1 key2=val2 ... %} - slots - Component slot fills. This is the same as pasing {% fill %} tags to the component. Accepts a dictionary of { slot_name: slot_content } where slot_content can be a string or render function. - escape_slots_content - Whether the content from slots should be escaped. - context - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs. - type - Configure how to handle JS and CSS dependencies. - "document" (default) - JS dependencies are inserted into {% component_js_dependencies %}, or to the end of the <body> tag. CSS dependencies are inserted into {% component_css_dependencies %}, or the end of the <head> tag. - render_dependencies - Set this to False if you want to insert the resulting HTML into another component. - request - The request object. This is only required when needing to use RequestContext, e.g. to enable template context_processors. Unused if context is already an instance of Context Example:
Render the component into a string.
Inputs: - args - Positional args for the component. This is the same as calling the component as {% component "my_comp" arg1 arg2 ... %} - kwargs - Kwargs for the component. This is the same as calling the component as {% component "my_comp" key1=val1 key2=val2 ... %} - slots - Component slot fills. This is the same as pasing {% fill %} tags to the component. Accepts a dictionary of { slot_name: slot_content } where slot_content can be a string or render function. - escape_slots_content - Whether the content from slots should be escaped. - context - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs. - type - Configure how to handle JS and CSS dependencies. - "document" (default) - JS dependencies are inserted into {% component_js_dependencies %}, or to the end of the <body> tag. CSS dependencies are inserted into {% component_css_dependencies %}, or the end of the <head> tag. - render_dependencies - Set this to False if you want to insert the resulting HTML into another component. - request - The request object. This is only required when needing to use RequestContext, e.g. to enable template context_processors. Unused if context is already an instance of Context Example:
MyComponent.render(
args=[1, "two", {}],
kwargs={
"key": 123,
@@ -140,7 +140,7 @@
*response_args: Any,
**response_kwargs: Any
) -> HttpResponse
-Render the component and wrap the content in the response class.
The response class is taken from Component.response_class. Defaults to django.http.HttpResponse.
This is the interface for the django.views.View class which allows us to use components as Django views with component.as_view().
Inputs: - args - Positional args for the component. This is the same as calling the component as {% component "my_comp" arg1 arg2 ... %} - kwargs - Kwargs for the component. This is the same as calling the component as {% component "my_comp" key1=val1 key2=val2 ... %} - slots - Component slot fills. This is the same as pasing {% fill %} tags to the component. Accepts a dictionary of { slot_name: slot_content } where slot_content can be a string or render function. - escape_slots_content - Whether the content from slots should be escaped. - context - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs. - type - Configure how to handle JS and CSS dependencies. - "document" (default) - JS dependencies are inserted into {% component_js_dependencies %}, or to the end of the <body> tag. CSS dependencies are inserted into {% component_css_dependencies %}, or the end of the <head> tag. - request - The request object. This is only required when needing to use RequestContext, e.g. to enable template context_processors. Unused if context is already an instance of Context
Any additional args and kwargs are passed to the response_class.
Example:
Render the component and wrap the content in the response class.
The response class is taken from Component.response_class. Defaults to django.http.HttpResponse.
This is the interface for the django.views.View class which allows us to use components as Django views with component.as_view().
Inputs: - args - Positional args for the component. This is the same as calling the component as {% component "my_comp" arg1 arg2 ... %} - kwargs - Kwargs for the component. This is the same as calling the component as {% component "my_comp" key1=val1 key2=val2 ... %} - slots - Component slot fills. This is the same as pasing {% fill %} tags to the component. Accepts a dictionary of { slot_name: slot_content } where slot_content can be a string or render function. - escape_slots_content - Whether the content from slots should be escaped. - context - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs. - type - Configure how to handle JS and CSS dependencies. - "document" (default) - JS dependencies are inserted into {% component_js_dependencies %}, or to the end of the <body> tag. CSS dependencies are inserted into {% component_css_dependencies %}, or the end of the <head> tag. - request - The request object. This is only required when needing to use RequestContext, e.g. to enable template context_processors. Unused if context is already an instance of Context
Any additional args and kwargs are passed to the response_class.
Example:
Bases: tuple
Type for the variables available inside the component templates.
All variables here are scoped under component_vars., so e.g. attribute is_filled on this class is accessible inside the template as:
Bases: tuple
Type for the variables available inside the component templates.
All variables here are scoped under component_vars., so e.g. attribute is_filled on this class is accessible inside the template as:
Attributes:
instance-attribute ¤
Dictonary describing which component slots are filled (True) or are not (False).
New in version 0.70
Use as {{ component_vars.is_filled }}
Example:
Dictonary describing which component slots are filled (True) or are not (False).
New in version 0.70
Use as {{ component_vars.is_filled }}
Example:
Bases: django.views.generic.base.View
Subclass of django.views.View where the Component instance is available via self.component.
Attributes:
class-attribute instance-attribute ¤
component = component
+Bases: django.views.generic.base.View
Subclass of django.views.View where the Component instance is available via self.component.
Attributes:
Bases: tuple
Settings available for django_components.
Example:
COMPONENTS = ComponentsSettings(
autodiscover=False,
dirs = [BASE_DIR / "components"],
diff --git a/dev/reference/template_tags/index.html b/dev/reference/template_tags/index.html
index 1f5f3018..76e465db 100644
--- a/dev/reference/template_tags/index.html
+++ b/dev/reference/template_tags/index.html
@@ -1,7 +1,7 @@
Template tags - Django-Components 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 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
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 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
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 in Component.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 in Component.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/reference/template_vars/index.html b/dev/reference/template_vars/index.html
index 2fe5ff82..0cbf16c6 100644
--- a/dev/reference/template_vars/index.html
+++ b/dev/reference/template_vars/index.html
@@ -1,5 +1,5 @@
Template vars - Django-Components Template variables¤
Here is a list of all variables that are automatically available from inside the component's template and in on_render_before / on_render_after hooks.
instance-attribute ¤
Dictonary describing which component slots are filled (True) or are not (False).
New in version 0.70
Use as {{ component_vars.is_filled }}
Example:
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" / %}
diff --git a/dev/sitemap.xml b/dev/sitemap.xml
index bbdb6b39..0613b618 100644
--- a/dev/sitemap.xml
+++ b/dev/sitemap.xml
@@ -2,214 +2,214 @@
https://emilstenstrom.github.io/django-components/latest/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/SUMMARY/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/migrating_from_safer_staticfiles/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/release_notes/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/authoring_component_libraries/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/component_registry/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/hooks/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/html_tragments/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/provide_inject/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/rendering_js_css/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/tag_formatter/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/advanced/typing_and_validation/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/access_component_input/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/autodiscovery/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/component_context_scope/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_as_views/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_in_python/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/defining_js_css_html_files/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/html_attributes/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/single_file_components/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/slots/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/subclassing_components/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/getting_started/adding_js_and_css/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/getting_started/adding_slots/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/getting_started/components_in_templates/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/getting_started/parametrising_components/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/getting_started/your_first_component/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/guides/devguides/dependency_mgmt/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/guides/devguides/slot_rendering/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/guides/devguides/slots_and_blocks/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/guides/setup/dev_server_setup/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/guides/setup/logging_and_debugging/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/guides/setup/syntax_highlight/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/code_of_conduct/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/community/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/compatibility/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/contributing/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/development/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/installation/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/license/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/security_notes/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/overview/welcome/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/api/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/commands/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/components/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/exceptions/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/middlewares/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/settings/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/tag_formatters/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/template_tags/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/template_vars/
- 2025-01-14
+ 2025-01-15
https://emilstenstrom.github.io/django-components/latest/reference/urls/
- 2025-01-14
+ 2025-01-15
\ No newline at end of file
diff --git a/dev/sitemap.xml.gz b/dev/sitemap.xml.gz
index 0ffeaee7..1b14a957 100644
Binary files a/dev/sitemap.xml.gz and b/dev/sitemap.xml.gz differ
diff --git a/versions.json b/versions.json
index f6c7b21a..316a7b3f 100644
--- a/versions.json
+++ b/versions.json
@@ -1,7 +1,7 @@
[
{
"version": "dev",
- "title": "dev (8cd4b03)",
+ "title": "dev (7ed4fd8)",
"aliases": []
},
{