django-components/dev/reference/api/index.html

3865 lines
No EOL
1.4 MiB
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://django-components.github.io/django-components/latest/reference/api/ rel=canonical><link href=../../concepts/advanced/component_libraries/ rel=prev><link href=../commands/ rel=next><link rel=icon href=../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.19"><title>API - Django-Components</title><link rel=stylesheet href=../../assets/stylesheets/main.7e37652d.min.css><link rel=stylesheet href=../../assets/stylesheets/palette.06af60db.min.css><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../assets/_markdown_exec_pyodide.css><link rel=stylesheet href=../../assets/_mkdocstrings.css><link rel=stylesheet href=../../css/timeago.css><link rel=stylesheet href=../../css/style.css><script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="API - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://django-components.github.io/django-components/latest/assets/images/social/reference/api.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://django-components.github.io/django-components/latest/reference/api/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="API - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://django-components.github.io/django-components/latest/assets/images/social/reference/api.png><meta name=google-site-verification content=vQA3d50F2ByQxG0eB6b0YoPnYW9gZo8xnd6HKhCyuys></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#api class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class=md-header data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> API </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <!-- Navigation tabs --> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../../overview/welcome/ class=md-tabs__link> Overview </a> </li> <li class=md-tabs__item> <a href=../../getting_started/installation/ class=md-tabs__link> Getting Started </a> </li> <!-- Determine classes --> <li class=md-tabs__item data-tab-group=Documentation> <a href=# class=md-tabs__link style="cursor: pointer;"> Documentation </a> </li> <li class=md-tabs__item> <a href=../../plugins/ class=md-tabs__link> Plugins </a> </li> <li class=md-tabs__item> <a href=../../examples/overview/ class=md-tabs__link> Examples </a> </li> <li class=md-tabs__item> <a href=../../community/help/ class=md-tabs__link> Community </a> </li> <li class=md-tabs__item> <a href=../../releases/ class=md-tabs__link> Release Notes </a> </li> </ul> <ul class="md-tabs__list tabs-hidden" data-tab-group=Documentation> <li class=md-tabs__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-tabs__link> Concepts </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=./ class=md-tabs__link> API Reference </a> </li> <li class=md-tabs__item> <a href=../../guides/setup/caching/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../upgrading/v0/ class=md-tabs__link> Upgrading </a> </li> </ul> </div> </nav> <script>
// Set up event listeners, so that, if user clicks on a top-level tab group,
// then we will show the sub-tabs for that group only.
(() => {
const topLevelTabGroups = document.querySelectorAll('li[data-tab-group]');
topLevelTabGroups.forEach(li => {
li._tabGroupHoverTimeout = null;
const linkGroup = li.dataset.tabGroup;
// Allow to permanently open/close the tab group by clicking.
li.addEventListener('click', () => {
li._tabGroupIsOpen ? selectTabGroup(null) : selectTabGroup(linkGroup);
li._tabGroupIsOpen = !li._tabGroupIsOpen;
if (li._tabGroupIsOpen && li._tabGroupHoverTimeout) {
clearTimeout(li._tabGroupHoverTimeout);
li._tabGroupHoverTimeout = null;
}
});
// Allow to temporarily open the tab group by hovering over it.
li.addEventListener('mouseenter', () => {
if (li._tabGroupHoverTimeout) {
clearTimeout(li._tabGroupHoverTimeout);
li._tabGroupHoverTimeout = null;
}
if (li._tabGroupIsOpen) return;
selectTabGroup(linkGroup);
});
li.addEventListener('mouseleave', () => {
if (li._tabGroupIsOpen) return;
delayedCloseTabGroup(li);
});
});
// Also add listeners to the sub-tabs container, so that if user moves
// cursor from the top-level group to sub-tabs, then the container will remain open.
const subTabsContainers = document.querySelectorAll('ul[data-tab-group]');
subTabsContainers.forEach(ul => {
ul.addEventListener('mouseenter', () => {
const tabGroup = ul.dataset.tabGroup;
const toggle = document.querySelector(`li[data-tab-group="${tabGroup}"]`);
if (toggle._tabGroupIsOpen || toggle._tabGroupHoverTimeout === null) return;
clearTimeout(toggle._tabGroupHoverTimeout);
toggle._tabGroupHoverTimeout = null;
});
ul.addEventListener('mouseleave', () => {
const tabGroup = ul.dataset.tabGroup;
const toggle = document.querySelector(`li[data-tab-group="${tabGroup}"]`);
if (toggle._tabGroupIsOpen) return;
delayedCloseTabGroup(toggle);
});
});
function selectTabGroup(groupName) {
const tabGroups = document.querySelectorAll('ul[data-tab-group]');
for (const tabGroupEl of tabGroups) {
const tabGroup = tabGroupEl.dataset.tabGroup;
if (tabGroup === groupName) {
tabGroupEl.classList.remove('tabs-hidden');
} else {
tabGroupEl.classList.add('tabs-hidden');
}
}
}
function delayedCloseTabGroup(toggle) {
toggle._tabGroupHoverTimeout = setTimeout(() => {
if (toggle._tabGroupIsOpen || toggle._tabGroupHoverTimeout === null) {
toggle._tabGroupHoverTimeout = null;
return;
};
toggle._tabGroupHoverTimeout = null;
selectTabGroup(null);
}, 100);
}
})();
</script> <style>
/* Styles for animated tabs visibility */
.md-tabs__list {
transition: max-height 0.3s ease-in-out;
overflow: hidden;
max-height: 100px;
}
/* Collapse the tabs when the attribute is present */
.md-tabs__list.tabs-hidden {
max-height: 0;
}
/* Custom styling for the sub-tabs */
.md-tabs__list[data-tab-group] {
position: absolute;
width: 100%;
max-width: 61rem;
background-color: var(--md-primary-fg-color);
border-top: 1px var(--md-primary-fg-color--dark) solid;
}
.md-tabs__list[data-tab-group] .md-tabs__item {
height: 2.1rem;
}
.md-tabs__list[data-tab-group] .md-tabs__link {
font-size: 0.63rem;
margin-top: 0.7rem;
}
</style> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Overview <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <span class="md-nav__icon md-icon"></span> Overview </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/welcome/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Welcome to Django Components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/compatibility/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Compatibility <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/security_notes/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Security notes 🚨 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/performance/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Performance <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/license/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> License <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Getting Started <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/installation/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Installation <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/your_first_component/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Create your first component <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/adding_js_and_css/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Adding JS and CSS <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/components_in_templates/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Components in templates <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/parametrising_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Parametrising components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/adding_slots/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Adding slots <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/rendering_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>Concepts <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=false> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Documentation: Concepts </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Fundamentals <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=false> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Single-file components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_files/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML / JS / CSS files <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_variables/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML / JS / CSS variables <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/secondary_js_css_files/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Secondary JS / CSS files <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_defaults/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component defaults <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/render_api/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Render API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/rendering_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/slots/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Slots <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/template_tag_syntax/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Template tag syntax <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_attributes/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML attributes <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_views_urls/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component views and URLs <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/http_request/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTTP Request <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/typing_and_validation/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Typing and validation <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/subclassing_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Subclassing components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/autodiscovery/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Autodiscovery <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Advanced <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/rendering_js_css/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering JS / CSS <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/html_fragments/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML fragments <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/provide_inject/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Prop drilling and provide / inject <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/hooks/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Lifecycle hooks <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_registry/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Registering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_caching/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component caching <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_context_scope/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component context and scope <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/template_tags/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Custom template tags <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/tag_formatters/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Tag formatters <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/extensions/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extensions <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/testing/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Testing <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_libraries/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component libraries <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_4 checked> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>API Reference <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=true> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> Documentation: API Reference </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class="md-nav__item md-nav__item--active"> <!-- State toggle --> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <!-- Hack: see partials/toc.html for more information --> <!-- Navigation link to table of contents --> <label class="md-nav__link md-nav__link--active" for=__toc> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> <!-- Table of contents --> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#django_components.BaseNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;BaseNode </span> </a> <nav class=md-nav aria-label= BaseNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.BaseNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.CommandLiteralAction class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;CommandLiteralAction </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Component </span> </a> <nav class=md-nav aria-label= Component> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.Component.Args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.CssData class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;CssData </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.DebugHighlight class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;DebugHighlight </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Defaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Defaults </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.JsData class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;JsData </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.TemplateData class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;TemplateData </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.View class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;View </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.class_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;class_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.context_processors_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context_processors_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.css_file class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css_file </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.debug_highlight class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;debug_highlight </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.defaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;defaults </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.deps_strategy class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;deps_strategy </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.do_not_call_in_templates class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;do_not_call_in_templates </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.is_filled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;is_filled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.js_file class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js_file </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.media_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;media_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.node class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.outer_context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;outer_context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.raw_args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;raw_args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.raw_kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;raw_kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.raw_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;raw_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.registered_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registered_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.registry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.request class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;request </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.response_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;response_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.template_file class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_file </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.as_view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;as_view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_context_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_context_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_css_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_css_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_js_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_js_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_template_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_template_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.inject class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;inject </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.on_render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.on_render_after class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_render_after </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.on_render_before class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_render_before </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.render_to_response class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_to_response </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentCache </span> </a> <nav class=md-nav aria-label= ComponentCache> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentCache.cache_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;cache_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.enabled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;enabled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.include_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;include_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.ttl class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ttl </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.get_cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.get_cache_key class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_cache_key </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.get_entry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_entry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.hash class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;hash </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.hash_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;hash_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.set_entry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;set_entry </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentDebugHighlight </span> </a> <nav class=md-nav aria-label= ComponentDebugHighlight> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.highlight_components class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;highlight_components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.highlight_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;highlight_slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentDefaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentDefaults </span> </a> <nav class=md-nav aria-label= ComponentDefaults> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentDefaults.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDefaults.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDefaults.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentExtension </span> </a> <nav class=md-nav aria-label= ComponentExtension> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentExtension.ComponentConfig class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ComponentConfig </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.class_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;class_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.commands class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;commands </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.urls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;urls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_class_created class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_class_created </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_class_deleted class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_class_deleted </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_registered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_registered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_rendered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_rendered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_unregistered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_unregistered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_css_loaded class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_css_loaded </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_js_loaded class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_js_loaded </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_registry_created class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_registry_created </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_registry_deleted class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_registry_deleted </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_slot_rendered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_slot_rendered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_template_compiled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_template_compiled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_template_loaded class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_template_loaded </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentFileEntry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentFileEntry </span> </a> <nav class=md-nav aria-label= ComponentFileEntry> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentFileEntry.dot_path class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;dot_path </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentFileEntry.filepath class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;filepath </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentInput </span> </a> <nav class=md-nav aria-label= ComponentInput> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentInput.args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.deps_strategy class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;deps_strategy </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;render_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.type class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;type </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentMediaInput </span> </a> <nav class=md-nav aria-label= ComponentMediaInput> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput.extend class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extend </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInputPath class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ComponentMediaInputPath </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentNode </span> </a> <nav class=md-nav aria-label= ComponentNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentNode--inserting-slot-fills class=md-nav__link> <span class=md-ellipsis> Inserting slot fills </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode--isolating-components class=md-nav__link> <span class=md-ellipsis> Isolating components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode--omitting-the-component-keyword class=md-nav__link> <span class=md-ellipsis> Omitting the component keyword </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.registry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentRegistry </span> </a> <nav class=md-nav aria-label= ComponentRegistry> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentRegistry--using-registry-to-share-components class=md-nav__link> <span class=md-ellipsis> Using registry to share components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.library class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;library </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.settings class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;settings </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.all class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;all </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.clear class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;clear </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.get class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.has class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;has </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentVars </span> </a> <nav class=md-nav aria-label= ComponentVars> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentVars.args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars.is_filled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;is_filled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars.kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars.slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentView class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentView </span> </a> <nav class=md-nav aria-label= ComponentView> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentView.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.public class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;public </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.url class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;url </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.delete class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;delete </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.get class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.head class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;head </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.options class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;options </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.patch class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;patch </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.post class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;post </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.put class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;put </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.trace class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;trace </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentsSettings </span> </a> <nav class=md-nav aria-label= ComponentsSettings> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.app_dirs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;app_dirs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.autodiscover class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;autodiscover </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.context_behavior class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context_behavior </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.debug_highlight_components class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;debug_highlight_components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.debug_highlight_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;debug_highlight_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.dirs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;dirs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.dynamic_component_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;dynamic_component_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.extensions class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extensions </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.extensions_defaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extensions_defaults </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.forbidden_static_files class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;forbidden_static_files </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.libraries class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;libraries </span> </a> <nav class=md-nav aria-label= libraries> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.libraries--manually-loading-libraries class=md-nav__link> <span class=md-ellipsis> Manually loading libraries </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.multiline_tags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;multiline_tags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.reload_on_file_change class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;reload_on_file_change </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.reload_on_template_change class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;reload_on_template_change </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.static_files_allowed class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;static_files_allowed </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.static_files_forbidden class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;static_files_forbidden </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.tag_formatter class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag_formatter </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.template_cache_size class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_cache_size </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ContextBehavior class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ContextBehavior </span> </a> <nav class=md-nav aria-label= ContextBehavior> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ContextBehavior.DJANGO class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;DJANGO </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ContextBehavior.ISOLATED class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ISOLATED </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.Default class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Default </span> </a> <nav class=md-nav aria-label= Default> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.Default.value class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;value </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.DependenciesStrategy class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;DependenciesStrategy </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Empty class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Empty </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ExtensionComponentConfig </span> </a> <nav class=md-nav aria-label= ExtensionComponentConfig> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.FillNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;FillNode </span> </a> <nav class=md-nav aria-label= FillNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.FillNode--access-slot-fallback class=md-nav__link> <span class=md-ellipsis> Access slot fallback </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode--access-slot-data class=md-nav__link> <span class=md-ellipsis> Access slot data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode--using-default-slot class=md-nav__link> <span class=md-ellipsis> Using default slot </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode--slot-fills-from-python class=md-nav__link> <span class=md-ellipsis> Slot fills from Python </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.OnRenderGenerator class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;OnRenderGenerator </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ProvideNode </span> </a> <nav class=md-nav aria-label= ProvideNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ProvideNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;RegistrySettings </span> </a> <nav class=md-nav aria-label= RegistrySettings> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.RegistrySettings.CONTEXT_BEHAVIOR class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;CONTEXT_BEHAVIOR </span> </a> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings.TAG_FORMATTER class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;TAG_FORMATTER </span> </a> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings.context_behavior class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context_behavior </span> </a> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings.tag_formatter class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag_formatter </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.Slot class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Slot </span> </a> <nav class=md-nav aria-label= Slot> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.Slot.component_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.content_func class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;content_func </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.do_not_call_in_templates class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;do_not_call_in_templates </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.extra class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extra </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.fill_node class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;fill_node </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.slot_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slot_name </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.SlotContent class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotContent </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotContext class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotContext </span> </a> <nav class=md-nav aria-label= SlotContext> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.SlotContext.context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotContext.data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotContext.fallback class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;fallback </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.SlotFallback class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotFallback </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotFunc class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotFunc </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotInput class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotInput </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotNode </span> </a> <nav class=md-nav aria-label= SlotNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.SlotNode--slot-data class=md-nav__link> <span class=md-ellipsis> Slot data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode--slot-fallback class=md-nav__link> <span class=md-ellipsis> Slot fallback </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.SlotRef class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotRef </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotResult class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotResult </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagFormatterABC class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;TagFormatterABC </span> </a> <nav class=md-nav aria-label= TagFormatterABC> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.TagFormatterABC.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagFormatterABC.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagFormatterABC.start_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;start_tag </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.TagResult class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;TagResult </span> </a> <nav class=md-nav aria-label= TagResult> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.TagResult.component_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagResult.tokens class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tokens </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.all_components class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;all_components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.all_registries class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;all_registries </span> </a> </li> <li class=md-nav__item> <a href=#django_components.autodiscover class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;autodiscover </span> </a> </li> <li class=md-nav__item> <a href=#django_components.cached_template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;cached_template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.format_attributes class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;format_attributes </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_by_class_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_by_class_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_dirs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_dirs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_files class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_files </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_url class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_url </span> </a> </li> <li class=md-nav__item> <a href=#django_components.import_libraries class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;import_libraries </span> </a> </li> <li class=md-nav__item> <a href=#django_components.merge_attributes class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;merge_attributes </span> </a> </li> <li class=md-nav__item> <a href=#django_components.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.registry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;render_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.template_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;template_tag </span> </a> </li> </ul> </nav> </li> <!-- Navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../commands/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> CLI commands <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../exceptions/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Exceptions <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../extension_hooks/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extension hooks <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../extension_commands/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extension commands API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../extension_urls/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extension URLs API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../settings/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Settings <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../signals/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Signals <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../tag_formatters/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Tag formatters <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../template_tags/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Template tags <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../template_variables/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Template variables <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../urls/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> URLs <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../testing_api/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Testing API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_5 id=__nav_5_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>Guides <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_5_label aria-expanded=false> <label class=md-nav__title for=__nav_5> <span class="md-nav__icon md-icon"></span> Documentation: Guides </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5_1> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_5_1 id=__nav_5_1_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Setup <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_5_1_label aria-expanded=false> <label class=md-nav__title for=__nav_5_1> <span class="md-nav__icon md-icon"></span> Setup </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../guides/setup/caching/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Caching <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../guides/setup/development_server/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Development server <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_5_2 id=__nav_5_2_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Other <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_5_2_label aria-expanded=false> <label class=md-nav__title for=__nav_5_2> <span class="md-nav__icon md-icon"></span> Other </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../guides/other/troubleshooting/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Troubleshooting <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_6> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_6 id=__nav_6_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>Upgrading <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_6_label aria-expanded=false> <label class=md-nav__title for=__nav_6> <span class="md-nav__icon md-icon"></span> Documentation: Upgrading </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../upgrading/v0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Upgrading in pre-v1.0 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_7> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../../plugins/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Plugins <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> <!-- Only render toggle if there's at least one more page --> </div> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_7_label aria-expanded=false> <label class=md-nav__title for=__nav_7> <span class="md-nav__icon md-icon"></span> Plugins </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_8> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_8 id=__nav_8_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Examples <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_8_label aria-expanded=false> <label class=md-nav__title for=__nav_8> <span class="md-nav__icon md-icon"></span> Examples </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../examples/overview/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Examples <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_9> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_9 id=__nav_9_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Community <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_9_label aria-expanded=false> <label class=md-nav__title for=__nav_9> <span class="md-nav__icon md-icon"></span> Community </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/help/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Questions & Help <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/contributing/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Contributing <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/development/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Development <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/code_of_conduct/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Code of Conduct <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_9_5> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_9_5 id=__nav_9_5_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Dev Guides <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_9_5_label aria-expanded=false> <label class=md-nav__title for=__nav_9_5> <span class="md-nav__icon md-icon"></span> Dev Guides </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/devguides/dependency_mgmt/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> JS and CSS rendering <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/devguides/slot_rendering/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Slot rendering <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/devguides/slots_and_blocks/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Using slot and block tags <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_10> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../../releases/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Release Notes <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> <!-- Only render toggle if there's at least one more page --> <label class="md-nav__link " for=__nav_10 id=__nav_10_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_10_label aria-expanded=false> <label class=md-nav__title for=__nav_10> <span class="md-nav__icon md-icon"></span> Release Notes </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.141.5/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.5 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.141.4/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.4 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.141.3/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.3 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.141.2/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.2 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.141.1/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.1 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.141.0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.0 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.140.1/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.140.1 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.140.0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.140.0 🚨📢 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.139.1/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.139.1 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.139.0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.139.0 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.138/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.138 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.137/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.137 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.136/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.136 🚨📢 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.135/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.135 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.134/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.134 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.133/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.133 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.132/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.132 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.131/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.131 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.130/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.130 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.129/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.129 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.128/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.128 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.127/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.127 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.126/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.126 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.125/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.125 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.124/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.124 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.123/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.123 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.122/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.122 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.121/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.121 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.120/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.120 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.119/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.119 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.118/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.118 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.117/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.117 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.116/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.116 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.115/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.115 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.114/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.114 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.113/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.113 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.112/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.112 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.111/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.111 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.110/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.110 🚨📢 (2024-11-25) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.100/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.100 🚨📢 (2024-09-11) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.97/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.97 (2024-09-06) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.96/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.96 (2024-09-04) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.95/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.95 (2024-08-29) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.94/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.94 (2024-08-28) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.93/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.93 (2024-08-27) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.92/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.92 🚨📢 (2024-08-22) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.90/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.90 (2024-08-18) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.85/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.85 🚨📢 (2024-07-29) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.81/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.81 🚨📢 (2024-06-12) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.80/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.80 (2024-06-01) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.79/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.79 🚨📢 (2024-06-01) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.77/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.77 🚨📢 (2024-05-23) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.74/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.74 (2024-05-12) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.70/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.70 🚨📢 (2024-05-01) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.67/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.67 (2024-04-17) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.50/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.50 🚨📢 (2024-02-26) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.34/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.34 (2024-01-27) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.28/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.28 (2023-05-18) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.27/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.27 (2023-04-11) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.26/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.26 🚨📢 (2023-03-14) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.22/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.22 (2022-07-26) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../releases/v0.17/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.17 (2021-09-10) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#django_components.BaseNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;BaseNode </span> </a> <nav class=md-nav aria-label= BaseNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.BaseNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.BaseNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.CommandLiteralAction class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;CommandLiteralAction </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Component </span> </a> <nav class=md-nav aria-label= Component> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.Component.Args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.CssData class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;CssData </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.DebugHighlight class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;DebugHighlight </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Defaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Defaults </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.JsData class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;JsData </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.Slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.TemplateData class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;TemplateData </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.View class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;View </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.class_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;class_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.context_processors_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context_processors_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.css_file class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css_file </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.debug_highlight class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;debug_highlight </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.defaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;defaults </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.deps_strategy class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;deps_strategy </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.do_not_call_in_templates class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;do_not_call_in_templates </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.is_filled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;is_filled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.js_file class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js_file </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.media_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;media_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.node class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.outer_context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;outer_context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.raw_args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;raw_args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.raw_kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;raw_kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.raw_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;raw_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.registered_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registered_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.registry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.request class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;request </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.response_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;response_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.template_file class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_file </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.as_view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;as_view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_context_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_context_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_css_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_css_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_js_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_js_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_template_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_template_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.get_template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.inject class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;inject </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.on_render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.on_render_after class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_render_after </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.on_render_before class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_render_before </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Component.render_to_response class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_to_response </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentCache </span> </a> <nav class=md-nav aria-label= ComponentCache> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentCache.cache_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;cache_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.enabled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;enabled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.include_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;include_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.ttl class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ttl </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.get_cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.get_cache_key class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_cache_key </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.get_entry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get_entry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.hash class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;hash </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.hash_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;hash_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentCache.set_entry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;set_entry </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentDebugHighlight </span> </a> <nav class=md-nav aria-label= ComponentDebugHighlight> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.highlight_components class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;highlight_components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDebugHighlight.highlight_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;highlight_slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentDefaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentDefaults </span> </a> <nav class=md-nav aria-label= ComponentDefaults> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentDefaults.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDefaults.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentDefaults.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentExtension </span> </a> <nav class=md-nav aria-label= ComponentExtension> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentExtension.ComponentConfig class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ComponentConfig </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.class_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;class_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.commands class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;commands </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.urls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;urls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_class_created class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_class_created </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_class_deleted class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_class_deleted </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_registered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_registered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_rendered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_rendered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_component_unregistered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_component_unregistered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_css_loaded class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_css_loaded </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_js_loaded class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_js_loaded </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_registry_created class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_registry_created </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_registry_deleted class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_registry_deleted </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_slot_rendered class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_slot_rendered </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_template_compiled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_template_compiled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentExtension.on_template_loaded class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;on_template_loaded </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentFileEntry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentFileEntry </span> </a> <nav class=md-nav aria-label= ComponentFileEntry> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentFileEntry.dot_path class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;dot_path </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentFileEntry.filepath class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;filepath </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentInput </span> </a> <nav class=md-nav aria-label= ComponentInput> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentInput.args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.deps_strategy class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;deps_strategy </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;render_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentInput.type class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;type </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentMediaInput </span> </a> <nav class=md-nav aria-label= ComponentMediaInput> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput.extend class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extend </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInput.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentMediaInputPath class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ComponentMediaInputPath </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentNode </span> </a> <nav class=md-nav aria-label= ComponentNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentNode--inserting-slot-fills class=md-nav__link> <span class=md-ellipsis> Inserting slot fills </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode--isolating-components class=md-nav__link> <span class=md-ellipsis> Isolating components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode--omitting-the-component-keyword class=md-nav__link> <span class=md-ellipsis> Omitting the component keyword </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.registry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentRegistry </span> </a> <nav class=md-nav aria-label= ComponentRegistry> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentRegistry--using-registry-to-share-components class=md-nav__link> <span class=md-ellipsis> Using registry to share components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.library class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;library </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.settings class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;settings </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.all class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;all </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.clear class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;clear </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.get class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.has class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;has </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentRegistry.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentVars </span> </a> <nav class=md-nav aria-label= ComponentVars> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentVars.args class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;args </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars.is_filled class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;is_filled </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars.kwargs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;kwargs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentVars.slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentView class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentView </span> </a> <nav class=md-nav aria-label= ComponentView> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentView.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.public class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;public </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.url class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;url </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.delete class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;delete </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.get class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;get </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.head class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;head </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.options class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;options </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.patch class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;patch </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.post class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;post </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.put class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;put </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentView.trace class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;trace </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentsSettings </span> </a> <nav class=md-nav aria-label= ComponentsSettings> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.app_dirs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;app_dirs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.autodiscover class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;autodiscover </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.cache class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;cache </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.context_behavior class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context_behavior </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.debug_highlight_components class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;debug_highlight_components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.debug_highlight_slots class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;debug_highlight_slots </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.dirs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;dirs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.dynamic_component_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;dynamic_component_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.extensions class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extensions </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.extensions_defaults class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extensions_defaults </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.forbidden_static_files class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;forbidden_static_files </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.libraries class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;libraries </span> </a> <nav class=md-nav aria-label= libraries> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.libraries--manually-loading-libraries class=md-nav__link> <span class=md-ellipsis> Manually loading libraries </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.multiline_tags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;multiline_tags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.reload_on_file_change class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;reload_on_file_change </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.reload_on_template_change class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;reload_on_template_change </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.static_files_allowed class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;static_files_allowed </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.static_files_forbidden class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;static_files_forbidden </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.tag_formatter class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag_formatter </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ComponentsSettings.template_cache_size class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_cache_size </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.ContextBehavior class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ContextBehavior </span> </a> <nav class=md-nav aria-label= ContextBehavior> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ContextBehavior.DJANGO class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;DJANGO </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ContextBehavior.ISOLATED class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;ISOLATED </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.Default class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Default </span> </a> <nav class=md-nav aria-label= Default> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.Default.value class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;value </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.DependenciesStrategy class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;DependenciesStrategy </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Empty class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Empty </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ExtensionComponentConfig </span> </a> <nav class=md-nav aria-label= ExtensionComponentConfig> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig.component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig.component_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ExtensionComponentConfig.component_cls class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_cls </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.FillNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;FillNode </span> </a> <nav class=md-nav aria-label= FillNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.FillNode--access-slot-fallback class=md-nav__link> <span class=md-ellipsis> Access slot fallback </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode--access-slot-data class=md-nav__link> <span class=md-ellipsis> Access slot data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode--using-default-slot class=md-nav__link> <span class=md-ellipsis> Using default slot </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode--slot-fills-from-python class=md-nav__link> <span class=md-ellipsis> Slot fills from Python </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.FillNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.OnRenderGenerator class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;OnRenderGenerator </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ProvideNode </span> </a> <nav class=md-nav aria-label= ProvideNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.ProvideNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.ProvideNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;RegistrySettings </span> </a> <nav class=md-nav aria-label= RegistrySettings> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.RegistrySettings.CONTEXT_BEHAVIOR class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;CONTEXT_BEHAVIOR </span> </a> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings.TAG_FORMATTER class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;TAG_FORMATTER </span> </a> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings.context_behavior class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context_behavior </span> </a> </li> <li class=md-nav__item> <a href=#django_components.RegistrySettings.tag_formatter class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag_formatter </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.Slot class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Slot </span> </a> <nav class=md-nav aria-label= Slot> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.Slot.component_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.content_func class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;content_func </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.do_not_call_in_templates class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;do_not_call_in_templates </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.extra class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;extra </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.fill_node class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;fill_node </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.Slot.slot_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;slot_name </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.SlotContent class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotContent </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotContext class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotContext </span> </a> <nav class=md-nav aria-label= SlotContext> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.SlotContext.context class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;context </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotContext.data class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotContext.fallback class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;fallback </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.SlotFallback class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotFallback </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotFunc class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotFunc </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotInput class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotInput </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;SlotNode </span> </a> <nav class=md-nav aria-label= SlotNode> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.SlotNode--slot-data class=md-nav__link> <span class=md-ellipsis> Slot data </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode--slot-fallback class=md-nav__link> <span class=md-ellipsis> Slot fallback </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.active_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;active_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.allowed_flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;allowed_flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.contents class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;contents </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.flags class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;flags </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.node_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;node_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.nodelist class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;nodelist </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.params class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;params </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.template_component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_component </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotNode.unregister class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;unregister </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.SlotRef class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotRef </span> </a> </li> <li class=md-nav__item> <a href=#django_components.SlotResult class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;SlotResult </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagFormatterABC class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;TagFormatterABC </span> </a> <nav class=md-nav aria-label= TagFormatterABC> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.TagFormatterABC.end_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;end_tag </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagFormatterABC.parse class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;parse </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagFormatterABC.start_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;start_tag </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.TagResult class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;TagResult </span> </a> <nav class=md-nav aria-label= TagResult> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.TagResult.component_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;component_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.TagResult.tokens class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;tokens </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.all_components class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;all_components </span> </a> </li> <li class=md-nav__item> <a href=#django_components.all_registries class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;all_registries </span> </a> </li> <li class=md-nav__item> <a href=#django_components.autodiscover class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;autodiscover </span> </a> </li> <li class=md-nav__item> <a href=#django_components.cached_template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;cached_template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.format_attributes class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;format_attributes </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_by_class_id class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_by_class_id </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_dirs class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_dirs </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_files class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_files </span> </a> </li> <li class=md-nav__item> <a href=#django_components.get_component_url class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;get_component_url </span> </a> </li> <li class=md-nav__item> <a href=#django_components.import_libraries class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;import_libraries </span> </a> </li> <li class=md-nav__item> <a href=#django_components.merge_attributes class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;merge_attributes </span> </a> </li> <li class=md-nav__item> <a href=#django_components.register class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;register </span> </a> </li> <li class=md-nav__item> <a href=#django_components.registry class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;registry </span> </a> </li> <li class=md-nav__item> <a href=#django_components.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;render_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.template_tag class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;template_tag </span> </a> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/django-components/django-components/edit/master/docs/reference/api.md title="Edit this page" class="md-content__button md-icon" rel=edit> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> </a> <a href=https://github.com/django-components/django-components/raw/master/docs/reference/api.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <!-- Autogenerated by reference.py --> <h1 id=api>API<a class=headerlink href=#api title="Permanent link">¤</a></h1> <div class="doc doc-object doc-class"> <h2 id=django_components.BaseNode class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">BaseNode</span> <a href=#django_components.BaseNode class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>BaseNode</span><span class=p>(</span><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>],</span> <span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>nodelist</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django.template.base.Node</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L204 target=_blank>See source code</a></p> <p>Node class for all django-components custom template tags.</p> <p>This class has a dual role:</p> <ol> <li> <p>It declares how a particular template tag should be parsed - By setting the <a href=../api#django_components.BaseNode.tag><code>tag</code></a>, <a href=../api#django_components.BaseNode.end_tag><code>end_tag</code></a>, and <a href=../api#django_components.BaseNode.allowed_flags><code>allowed_flags</code></a> attributes:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> <p>This will allow the template tag <code>{% slot %}</code> to be used like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>required</span> <span class=cp>%}</span><span class=x> ... </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> </li> <li> <p>The <a href=../api#django_components.BaseNode.render><code>render</code></a> method is the actual implementation of the template tag.</p> <p>This is where the tag's logic is implemented:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;mynode&quot;</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=k>def</span><span class=w> </span><span class=nf>render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>name</span><span class=si>}</span><span class=s2>!&quot;</span>
</code></pre></div> <p>This will allow the template tag <code>{% mynode %}</code> to be used like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>mynode</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;John&quot;</span> <span class=cp>%}</span>
</code></pre></div> </li> </ol> <p>The template tag accepts parameters as defined on the <a href=../api#django_components.BaseNode.render><code>render</code></a> method's signature.</p> <p>For more info, see <a href=../api#django_components.BaseNode.render><code>BaseNode.render()</code></a>.</p> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" parse
classmethod
(django_components.BaseNode.parse)" href=#django_components.BaseNode.parse>parse</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" register
classmethod
(django_components.BaseNode.register)" href=#django_components.BaseNode.register>register</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render (django_components.BaseNode.render)" href=#django_components.BaseNode.render>render</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" unregister
classmethod
(django_components.BaseNode.unregister)" href=#django_components.BaseNode.unregister>unregister</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" active_flags
property
(django_components.BaseNode.active_flags)" href=#django_components.BaseNode.active_flags>active_flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" allowed_flags
class-attribute
(django_components.BaseNode.allowed_flags)" href=#django_components.BaseNode.allowed_flags>allowed_flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Iterable href=https://docs.python.org/3.12/library/typing.html#typing.Iterable>Iterable</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" contents
instance-attribute
(django_components.BaseNode.contents)" href=#django_components.BaseNode.contents>contents</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" end_tag
class-attribute
(django_components.BaseNode.end_tag)" href=#django_components.BaseNode.end_tag>end_tag</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" flags
instance-attribute
(django_components.BaseNode.flags)" href=#django_components.BaseNode.flags>flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" node_id
instance-attribute
(django_components.BaseNode.node_id)" href=#django_components.BaseNode.node_id>node_id</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" nodelist
instance-attribute
(django_components.BaseNode.nodelist)" href=#django_components.BaseNode.nodelist>nodelist</a></code></b> (<code><span title=django.template.base.NodeList>NodeList</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" params
instance-attribute
(django_components.BaseNode.params)" href=#django_components.BaseNode.params>params</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<span title=django_components.util.template_tag.TagAttr>TagAttr</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tag
class-attribute
(django_components.BaseNode.tag)" href=#django_components.BaseNode.tag>tag</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_component
instance-attribute
(django_components.BaseNode.template_component)" href=#django_components.BaseNode.template_component>template_component</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_name
instance-attribute
(django_components.BaseNode.template_name)" href=#django_components.BaseNode.template_name>template_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.active_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">active_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.BaseNode.active_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>active_flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L506 target=_blank>See source code</a></p> <p>Flags that were set for this specific instance as a list of strings.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>Will have the following flags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.allowed_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">allowed_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.BaseNode.allowed_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>allowed_flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Iterable href=https://docs.python.org/3.12/library/typing.html#typing.Iterable>Iterable</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L308 target=_blank>See source code</a></p> <p>The list of all <em>possible</em> flags for this tag.</p> <p>E.g. <code>["required"]</code> will allow this tag to be used like <code>{% slot required %}</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;required&quot;</span><span class=p>,</span> <span class=s2>&quot;default&quot;</span><span class=p>]</span>
</code></pre></div> <p>This will allow the template tag <code>{% slot %}</code> to be used like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>required</span> <span class=cp>%}</span><span class=x> ... </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>default</span> <span class=cp>%}</span><span class=x> ... </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>required</span> <span class=nv>default</span> <span class=cp>%}</span><span class=x> ... </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.contents class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">contents</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.BaseNode.contents class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(contents)>contents</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L498 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L435 target=_blank>See source code</a></p> <p>The contents of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>contents</code> will be <code>"&lt;div&gt; ... &lt;/div&gt;"</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.end_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">end_tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.BaseNode.end_tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>end_tag</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L277 target=_blank>See source code</a></p> <p>The end tag name.</p> <p>E.g. <code>"endcomponent"</code> or <code>"endslot"</code> will make this class match template tags <code>{% endcomponent %}</code> or <code>{% endslot %}</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
</code></pre></div> <p>This will allow the template tag <code>{% slot %}</code> to be used like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=cp>%}</span><span class=x> ... </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>If not set, then this template tag has no end tag.</p> <p>So instead of <code>{% component %} ... {% endcomponent %}</code>, you'd use only <code>{% component %}</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;mytag&quot;</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.BaseNode.flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(flags)>flags</span></span> <span class=ow>or</span> <span class=p>{</span><span class=n><span title=flag>flag</span></span><span class=p>:</span> <span class=n>Falsefor</span> <span class=n><span title=flag>flag</span></span> <span class=ow>in</span> <span class=p>(</span><span class=n><span title=django_components.node.BaseNode(self).allowed_flags>allowed_flags</span></span> <span class=ow>or</span> <span class=p>[])}</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L495 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L376 target=_blank>See source code</a></p> <p>Dictionary of all <a href=../api#django_components.BaseNode.allowed_flags><code>allowed_flags</code></a> that were set on the tag.</p> <p>Flags that were set are <code>True</code>, and the rest are <code>False</code>.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 2 flags, <code>default</code> and <code>required</code>, but only <code>default</code> was set.</p> <p>The <code>flags</code> dictionary will be:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=s2>&quot;default&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=s2>&quot;required&quot;</span><span class=p>:</span> <span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=p>}</span>
</code></pre></div> <p>You can check if a flag is set by doing:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>if</span> <span class=n>node</span><span class=o>.</span><span class=n>flags</span><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>]:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=o>...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.node_id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">node_id</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.BaseNode.node_id class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(node_id)>node_id</span></span> <span class=ow>or</span> <span class=n><span title=django_components.util.misc.gen_id>gen_id</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L497 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L452 target=_blank>See source code</a></p> <p>The unique ID of the node.</p> <p>Extensions can use this ID to store additional information.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.nodelist class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">nodelist</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.BaseNode.nodelist class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>nodelist</span><span class=p>:</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(nodelist)>nodelist</span></span> <span class=ow>or</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L496 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L415 target=_blank>See source code</a></p> <p>The nodelist of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>nodelist</code> will contain the <code>&lt;div&gt; ... &lt;/div&gt;</code> part.</p> <p>Unlike <a href=../api#django_components.BaseNode.contents><code>contents</code></a>, the <code>nodelist</code> contains the actual Nodes, not just the text.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.params class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">params</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.BaseNode.params class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(params)>params</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L494 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L357 target=_blank>See source code</a></p> <p>The parameters to the tag in the template.</p> <p>A single param represents an arg or kwarg of the template tag.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=s1>&#39;val2 two&#39;</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 3 params:</p> <ul> <li>Posiitonal arg <code>"my_comp"</code></li> <li>Keyword arg <code>key=val</code></li> <li>Keyword arg <code>key2='val2 two'</code></li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.BaseNode.tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tag</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L257 target=_blank>See source code</a></p> <p>The tag name.</p> <p>E.g. <code>"component"</code> or <code>"slot"</code> will make this class match template tags <code>{% component %}</code> or <code>{% slot %}</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
</code></pre></div> <p>This will allow the template tag <code>{% slot %}</code> to be used like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=cp>%}</span><span class=x> ... </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.template_component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.BaseNode.template_component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_component)>template_component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L500 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L474 target=_blank>See source code</a></p> <p>If the template that contains this node belongs to a <a href=../api#django_components.Component><code>Component</code></a>, then this will be the <a href=../api#django_components.Component><code>Component</code></a> class.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.BaseNode.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.BaseNode.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_name)>template_name</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L499 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L459 target=_blank>See source code</a></p> <p>The name of the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template><code>Template</code></a> that contains this node.</p> <p>The template name is set by Django's <a href=https://docs.djangoproject.com/en/5.2/topics/templates/#loaders>template loaders</a>.</p> <p>For example, the filesystem template loader will set this to the absolute path of the template file.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a>&quot;/home/user/project/templates/my_template.html&quot;
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.BaseNode.parse class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">parse</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.BaseNode.parse class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>parse</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=" BaseNode (django_components.node.BaseNode)" href=#django_components.BaseNode>BaseNode</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L528 target=_blank>See source code</a></p> <p>This function is what is passed to Django's <code>Library.tag()</code> when <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-tags/#registering-the-tag>registering the tag</a>.</p> <p>In other words, this method is called by Django's template parser when we encounter a tag that matches this node's tag, e.g. <code>{% component %}</code> or <code>{% slot %}</code>.</p> <p>To register the tag, you can use <a href=../api#django_components.BaseNode.register><code>BaseNode.register()</code></a>.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.BaseNode.register class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">register</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.BaseNode.register class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>register</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L562 target=_blank>See source code</a></p> <p>A convenience method for registering the tag with the given library.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;mynode&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>MyNode</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=n>library</span><span class=p>)</span>
</code></pre></div> <p>Allows you to then use the node in templates like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>mylibrary</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>mynode</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.BaseNode.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <a href=#django_components.BaseNode.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a></span><span class=p>,</span> <span class=o>*</span><span class=n>_args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>_kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L330 target=_blank>See source code</a></p> <p>Render the node. This method is meant to be overridden by subclasses.</p> <p>The signature of this function decides what input the template tag accepts.</p> <p>The <code>render()</code> method MUST accept a <code>context</code> argument. Any arguments after that will be part of the tag's input parameters.</p> <p>So if you define a <code>render</code> method like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>def</span><span class=w> </span><span class=nf>render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
</code></pre></div> <p>Then the tag will require the <code>name</code> parameter, and accept any extra keyword arguments:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;John&quot;</span> <span class=nv>age</span><span class=o>=</span><span class=m>20</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.BaseNode.unregister class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">unregister</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.BaseNode.unregister class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>unregister</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L583 target=_blank>See source code</a></p> <p>Unregisters the node from the given library.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.CommandLiteralAction class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">CommandLiteralAction</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.CommandLiteralAction class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>CommandLiteralAction</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.Literal href=https://docs.python.org/3.12/library/typing.html#typing.Literal>Literal</a></span><span class=p>[</span><span class=s1>&#39;append&#39;</span><span class=p>,</span> <span class=s1>&#39;append_const&#39;</span><span class=p>,</span> <span class=s1>&#39;count&#39;</span><span class=p>,</span> <span class=s1>&#39;extend&#39;</span><span class=p>,</span> <span class=s1>&#39;store&#39;</span><span class=p>,</span> <span class=s1>&#39;store_const&#39;</span><span class=p>,</span> <span class=s1>&#39;store_true&#39;</span><span class=p>,</span> <span class=s1>&#39;store_false&#39;</span><span class=p>,</span> <span class=s1>&#39;version&#39;</span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/util/command.py#L37 target=_blank>See source code</a></p> <p>The basic type of action to be taken when this argument is encountered at the command line.</p> <p>This is a subset of the values for <code>action</code> in <a href=https://docs.python.org/3/library/argparse.html#the-add-argument-method><code>ArgumentParser.add_argument()</code></a>.</p> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.Component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">Component</span> <a href=#django_components.Component class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>Component</span><span class=p>(</span><span class=n>registered_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>outer_context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>deps_strategy</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=nb>id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" as_view
classmethod
(django_components.Component.as_view)" href=#django_components.Component.as_view>as_view</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_context_data (django_components.Component.get_context_data)" href=#django_components.Component.get_context_data>get_context_data</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_css_data (django_components.Component.get_css_data)" href=#django_components.Component.get_css_data>get_css_data</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_js_data (django_components.Component.get_js_data)" href=#django_components.Component.get_js_data>get_js_data</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_template (django_components.Component.get_template)" href=#django_components.Component.get_template>get_template</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_template_data (django_components.Component.get_template_data)" href=#django_components.Component.get_template_data>get_template_data</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_template_name (django_components.Component.get_template_name)" href=#django_components.Component.get_template_name>get_template_name</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" inject (django_components.Component.inject)" href=#django_components.Component.inject>inject</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_render (django_components.Component.on_render)" href=#django_components.Component.on_render>on_render</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_render_after (django_components.Component.on_render_after)" href=#django_components.Component.on_render_after>on_render_after</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_render_before (django_components.Component.on_render_before)" href=#django_components.Component.on_render_before>on_render_before</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render
classmethod
(django_components.Component.render)" href=#django_components.Component.render>render</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render_to_response
classmethod
(django_components.Component.render_to_response)" href=#django_components.Component.render_to_response>render_to_response</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" Args
class-attribute
(django_components.Component.Args)" href=#django_components.Component.Args>Args</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" Cache
class-attribute
(django_components.Component.Cache)" href=#django_components.Component.Cache>Cache</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ComponentCache (django_components.extensions.cache.ComponentCache)" href=#django_components.ComponentCache>ComponentCache</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" CssData
class-attribute
(django_components.Component.CssData)" href=#django_components.Component.CssData>CssData</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" DebugHighlight
class-attribute
(django_components.Component.DebugHighlight)" href=#django_components.Component.DebugHighlight>DebugHighlight</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ComponentDebugHighlight (django_components.extensions.debug_highlight.ComponentDebugHighlight)" href=#django_components.ComponentDebugHighlight>ComponentDebugHighlight</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" Defaults
class-attribute
(django_components.Component.Defaults)" href=#django_components.Component.Defaults>Defaults</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ComponentDefaults (django_components.extensions.defaults.ComponentDefaults)" href=#django_components.ComponentDefaults>ComponentDefaults</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" JsData
class-attribute
(django_components.Component.JsData)" href=#django_components.Component.JsData>JsData</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" Kwargs
class-attribute
(django_components.Component.Kwargs)" href=#django_components.Component.Kwargs>Kwargs</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" Media
class-attribute
(django_components.Component.Media)" href=#django_components.Component.Media>Media</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ComponentMediaInput (django_components.component_media.ComponentMediaInput)" href=#django_components.ComponentMediaInput>ComponentMediaInput</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" Slots
class-attribute
(django_components.Component.Slots)" href=#django_components.Component.Slots>Slots</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" TemplateData
class-attribute
(django_components.Component.TemplateData)" href=#django_components.Component.TemplateData>TemplateData</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" View
class-attribute
(django_components.Component.View)" href=#django_components.Component.View>View</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ComponentView (django_components.extensions.view.ComponentView)" href=#django_components.ComponentView>ComponentView</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" args
instance-attribute
(django_components.Component.args)" href=#django_components.Component.args>args</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" cache
instance-attribute
(django_components.Component.cache)" href=#django_components.Component.cache>cache</a></code></b> (<code><a class="autorefs autorefs-internal" title=" ComponentCache (django_components.extensions.cache.ComponentCache)" href=#django_components.ComponentCache>ComponentCache</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" class_id
class-attribute
(django_components.Component.class_id)" href=#django_components.Component.class_id>class_id</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" context
instance-attribute
(django_components.Component.context)" href=#django_components.Component.context>context</a></code></b> (<code><span title=django.template.context.Context>Context</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" context_processors_data
property
(django_components.Component.context_processors_data)" href=#django_components.Component.context_processors_data>context_processors_data</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" css
class-attribute
instance-attribute
(django_components.Component.css)" href=#django_components.Component.css>css</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" css_file
class-attribute
(django_components.Component.css_file)" href=#django_components.Component.css_file>css_file</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" debug_highlight
instance-attribute
(django_components.Component.debug_highlight)" href=#django_components.Component.debug_highlight>debug_highlight</a></code></b> (<code><a class="autorefs autorefs-internal" title=" ComponentDebugHighlight (django_components.extensions.debug_highlight.ComponentDebugHighlight)" href=#django_components.ComponentDebugHighlight>ComponentDebugHighlight</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" defaults
instance-attribute
(django_components.Component.defaults)" href=#django_components.Component.defaults>defaults</a></code></b> (<code><a class="autorefs autorefs-internal" title=" ComponentDefaults (django_components.extensions.defaults.ComponentDefaults)" href=#django_components.ComponentDefaults>ComponentDefaults</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" deps_strategy
instance-attribute
(django_components.Component.deps_strategy)" href=#django_components.Component.deps_strategy>deps_strategy</a></code></b> (<code><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" do_not_call_in_templates
class-attribute
(django_components.Component.do_not_call_in_templates)" href=#django_components.Component.do_not_call_in_templates>do_not_call_in_templates</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" id
instance-attribute
(django_components.Component.id)" href=#django_components.Component.id>id</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" input
instance-attribute
(django_components.Component.input)" href=#django_components.Component.input>input</a></code></b> (<code><a class="autorefs autorefs-internal" title=" ComponentInput
dataclass
(django_components.component.ComponentInput)" href=#django_components.ComponentInput>ComponentInput</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" is_filled
instance-attribute
(django_components.Component.is_filled)" href=#django_components.Component.is_filled>is_filled</a></code></b> (<code><span title=django_components.slots.SlotIsFilled>SlotIsFilled</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" js
class-attribute
instance-attribute
(django_components.Component.js)" href=#django_components.Component.js>js</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" js_file
class-attribute
(django_components.Component.js_file)" href=#django_components.Component.js_file>js_file</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" kwargs
instance-attribute
(django_components.Component.kwargs)" href=#django_components.Component.kwargs>kwargs</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" media
class-attribute
instance-attribute
(django_components.Component.media)" href=#django_components.Component.media>media</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<span title=django.forms.widgets.Media>Media</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" media_class
class-attribute
(django_components.Component.media_class)" href=#django_components.Component.media_class>media_class</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<span title=django.forms.widgets.Media>Media</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" name
instance-attribute
(django_components.Component.name)" href=#django_components.Component.name>name</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" node
instance-attribute
(django_components.Component.node)" href=#django_components.Component.node>node</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" outer_context
instance-attribute
(django_components.Component.outer_context)" href=#django_components.Component.outer_context>outer_context</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<span title=django.template.context.Context>Context</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" raw_args
instance-attribute
(django_components.Component.raw_args)" href=#django_components.Component.raw_args>raw_args</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" raw_kwargs
instance-attribute
(django_components.Component.raw_kwargs)" href=#django_components.Component.raw_kwargs>raw_kwargs</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" raw_slots
instance-attribute
(django_components.Component.raw_slots)" href=#django_components.Component.raw_slots>raw_slots</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-internal" title=" Slot
dataclass
(django_components.slots.Slot)" href=#django_components.Slot>Slot</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" registered_name
instance-attribute
(django_components.Component.registered_name)" href=#django_components.Component.registered_name>registered_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" registry
instance-attribute
(django_components.Component.registry)" href=#django_components.Component.registry>registry</a></code></b> (<code><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" request
instance-attribute
(django_components.Component.request)" href=#django_components.Component.request>request</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" response_class
class-attribute
(django_components.Component.response_class)" href=#django_components.Component.response_class>response_class</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" slots
instance-attribute
(django_components.Component.slots)" href=#django_components.Component.slots>slots</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template
class-attribute
instance-attribute
(django_components.Component.template)" href=#django_components.Component.template>template</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_file
class-attribute
(django_components.Component.template_file)" href=#django_components.Component.template_file>template_file</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_name
class-attribute
(django_components.Component.template_name)" href=#django_components.Component.template_name>template_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" view
instance-attribute
(django_components.Component.view)" href=#django_components.Component.view>view</a></code></b> (<code><a class="autorefs autorefs-internal" title=" ComponentView (django_components.extensions.view.ComponentView)" href=#django_components.ComponentView>ComponentView</a></code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.Args class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Args</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.Args class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L535 target=_blank>See source code</a></p> <p>Optional typing for positional arguments passed to the component.</p> <p>If set and not <code>None</code>, then the <code>args</code> parameter of the data methods (<a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>, <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a>, <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a>) will be the instance of this class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n>Args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>args</span><span class=p>,</span> <span class=n>Table</span><span class=o>.</span><span class=n>Args</span><span class=p>)</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>args</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>args</span><span class=o>.</span><span class=n>size</span><span class=p>,</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=p>}</span>
</code></pre></div> <p>The constructor of this class MUST accept positional arguments:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>Args</span><span class=p>(</span><span class=o>*</span><span class=n>args</span><span class=p>)</span>
</code></pre></div> <p>As such, a good starting point is to set this field to a subclass of <a href=https://docs.python.org/3/library/typing.html#typing.NamedTuple><code>NamedTuple</code></a>.</p> <p>Use <code>Args</code> to:</p> <ul> <li>Validate the input at runtime.</li> <li>Set type hints for the positional arguments for data methods like <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>.</li> <li>Document the component inputs.</li> </ul> <p>You can also use <code>Args</code> to validate the positional arguments for <a href=../api#django_components.Component.render><code>Component.render()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=n>args</span><span class=o>=</span><span class=n>Table</span><span class=o>.</span><span class=n>Args</span><span class=p>(</span><span class=n>color</span><span class=o>=</span><span class=s2>&quot;red&quot;</span><span class=p>,</span> <span class=n>size</span><span class=o>=</span><span class=mi>10</span><span class=p>),</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=p>)</span>
</code></pre></div> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.Cache class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Cache</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.Cache class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Cache</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentCache (django_components.extensions.cache.ComponentCache)" href=#django_components.ComponentCache>ComponentCache</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2116 target=_blank>See source code</a></p> <p>The fields of this class are used to configure the component caching.</p> <p>Read more about <a href=../../concepts/advanced/component_caching>Component caching</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Cache</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>enabled</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>ttl</span> <span class=o>=</span> <span class=mi>60</span> <span class=o>*</span> <span class=mi>60</span> <span class=o>*</span> <span class=mi>24</span> <span class=c1># 1 day</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>cache_name</span> <span class=o>=</span> <span class=s2>&quot;my_cache&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.CssData class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">CssData</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.CssData class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>CssData</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1671 target=_blank>See source code</a></p> <p>Optional typing for the data to be returned from <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a>.</p> <p>If set and not <code>None</code>, then this class will be instantiated with the dictionary returned from <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a> to validate the data.</p> <p>The constructor of this class MUST accept keyword arguments:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>CssData</span><span class=p>(</span><span class=o>**</span><span class=n>css_data</span><span class=p>)</span>
</code></pre></div> <p>You can also return an instance of <code>CssData</code> directly from <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a> to get type hints:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>class</span><span class=w> </span><span class=nc>CssData</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_css_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=k>return</span> <span class=n>Table</span><span class=o>.</span><span class=n>CssData</span><span class=p>(</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=n>color</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=n>size</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=p>)</span>
</code></pre></div> <p>A good starting point is to set this field to a subclass of <a href=https://docs.python.org/3/library/typing.html#typing.NamedTuple><code>NamedTuple</code></a> or a <a href=https://docs.python.org/3/library/dataclasses.html#dataclasses.dataclass>dataclass</a>.</p> <p>Use <code>CssData</code> to:</p> <ul> <li>Validate the data returned from <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a> at runtime.</li> <li>Set type hints for this data.</li> <li>Document the component data.</li> </ul> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <div class="admonition info"> <p class=admonition-title>Info</p> <p>If you use a custom class for <code>CssData</code>, this class needs to be convertable to a dictionary.</p> <p>You can implement either:</p> <ol> <li> <p><code>_asdict()</code> method <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyClass</span><span class=p>:</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>def</span><span class=w> </span><span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=bp>self</span><span class=o>.</span><span class=n>x</span> <span class=o>=</span> <span class=mi>1</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=bp>self</span><span class=o>.</span><span class=n>y</span> <span class=o>=</span> <span class=mi>2</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>def</span><span class=w> </span><span class=nf>_asdict</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>return</span> <span class=p>{</span><span class=s1>&#39;x&#39;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>x</span><span class=p>,</span> <span class=s1>&#39;y&#39;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>y</span><span class=p>}</span>
</code></pre></div></p> </li> <li> <p>Or make the class dict-like with <code>__iter__()</code> and <code>__getitem__()</code> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyClass</span><span class=p>:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>def</span><span class=w> </span><span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=bp>self</span><span class=o>.</span><span class=n>x</span> <span class=o>=</span> <span class=mi>1</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=bp>self</span><span class=o>.</span><span class=n>y</span> <span class=o>=</span> <span class=mi>2</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>def</span><span class=w> </span><span class=fm>__iter__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=k>return</span> <span class=nb>iter</span><span class=p>([(</span><span class=s1>&#39;x&#39;</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>x</span><span class=p>),</span> <span class=p>(</span><span class=s1>&#39;y&#39;</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>y</span><span class=p>)])</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=k>def</span><span class=w> </span><span class=fm>__getitem__</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>):</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=k>return</span> <span class=nb>getattr</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>)</span>
</code></pre></div></p> </li> </ol> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.DebugHighlight class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">DebugHighlight</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.DebugHighlight class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>DebugHighlight</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentDebugHighlight (django_components.extensions.debug_highlight.ComponentDebugHighlight)" href=#django_components.ComponentDebugHighlight>ComponentDebugHighlight</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2185 target=_blank>See source code</a></p> <p>The fields of this class are used to configure the component debug highlighting.</p> <p>Read more about <a href=../../guides/other/troubleshooting#component-and-slot-highlighting>Component debug highlighting</a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.Defaults class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Defaults</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.Defaults class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Defaults</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentDefaults (django_components.extensions.defaults.ComponentDefaults)" href=#django_components.ComponentDefaults>ComponentDefaults</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2138 target=_blank>See source code</a></p> <p>The fields of this class are used to set default values for the component's kwargs.</p> <p>Read more about <a href=../../concepts/fundamentals/component_defaults>Component defaults</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Default</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Defaults</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>position</span> <span class=o>=</span> <span class=s2>&quot;left&quot;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>selected_items</span> <span class=o>=</span> <span class=n>Default</span><span class=p>(</span><span class=k>lambda</span><span class=p>:</span> <span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>])</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.JsData class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">JsData</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.JsData class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>JsData</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1379 target=_blank>See source code</a></p> <p>Optional typing for the data to be returned from <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a>.</p> <p>If set and not <code>None</code>, then this class will be instantiated with the dictionary returned from <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a> to validate the data.</p> <p>The constructor of this class MUST accept keyword arguments:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>JsData</span><span class=p>(</span><span class=o>**</span><span class=n>js_data</span><span class=p>)</span>
</code></pre></div> <p>You can also return an instance of <code>JsData</code> directly from <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a> to get type hints:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>class</span><span class=w> </span><span class=nc>JsData</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_js_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=k>return</span> <span class=n>Table</span><span class=o>.</span><span class=n>JsData</span><span class=p>(</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=n>color</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=n>size</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=p>)</span>
</code></pre></div> <p>A good starting point is to set this field to a subclass of <a href=https://docs.python.org/3/library/typing.html#typing.NamedTuple><code>NamedTuple</code></a> or a <a href=https://docs.python.org/3/library/dataclasses.html#dataclasses.dataclass>dataclass</a>.</p> <p>Use <code>JsData</code> to:</p> <ul> <li>Validate the data returned from <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a> at runtime.</li> <li>Set type hints for this data.</li> <li>Document the component data.</li> </ul> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <div class="admonition info"> <p class=admonition-title>Info</p> <p>If you use a custom class for <code>JsData</code>, this class needs to be convertable to a dictionary.</p> <p>You can implement either:</p> <ol> <li> <p><code>_asdict()</code> method <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyClass</span><span class=p>:</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>def</span><span class=w> </span><span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=bp>self</span><span class=o>.</span><span class=n>x</span> <span class=o>=</span> <span class=mi>1</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=bp>self</span><span class=o>.</span><span class=n>y</span> <span class=o>=</span> <span class=mi>2</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>def</span><span class=w> </span><span class=nf>_asdict</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>return</span> <span class=p>{</span><span class=s1>&#39;x&#39;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>x</span><span class=p>,</span> <span class=s1>&#39;y&#39;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>y</span><span class=p>}</span>
</code></pre></div></p> </li> <li> <p>Or make the class dict-like with <code>__iter__()</code> and <code>__getitem__()</code> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyClass</span><span class=p>:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>def</span><span class=w> </span><span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=bp>self</span><span class=o>.</span><span class=n>x</span> <span class=o>=</span> <span class=mi>1</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=bp>self</span><span class=o>.</span><span class=n>y</span> <span class=o>=</span> <span class=mi>2</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>def</span><span class=w> </span><span class=fm>__iter__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=k>return</span> <span class=nb>iter</span><span class=p>([(</span><span class=s1>&#39;x&#39;</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>x</span><span class=p>),</span> <span class=p>(</span><span class=s1>&#39;y&#39;</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>y</span><span class=p>)])</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=k>def</span><span class=w> </span><span class=fm>__getitem__</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>):</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=k>return</span> <span class=nb>getattr</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>)</span>
</code></pre></div></p> </li> </ol> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.Kwargs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Kwargs</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.Kwargs class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L591 target=_blank>See source code</a></p> <p>Optional typing for keyword arguments passed to the component.</p> <p>If set and not <code>None</code>, then the <code>kwargs</code> parameter of the data methods (<a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>, <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a>, <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a>) will be the instance of this class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>kwargs</span><span class=p>,</span> <span class=n>Table</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>)</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>size</span><span class=p>,</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=p>}</span>
</code></pre></div> <p>The constructor of this class MUST accept keyword arguments:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>Kwargs</span><span class=p>(</span><span class=o>**</span><span class=n>kwargs</span><span class=p>)</span>
</code></pre></div> <p>As such, a good starting point is to set this field to a subclass of <a href=https://docs.python.org/3/library/typing.html#typing.NamedTuple><code>NamedTuple</code></a> or a <a href=https://docs.python.org/3/library/dataclasses.html#dataclasses.dataclass>dataclass</a>.</p> <p>Use <code>Kwargs</code> to:</p> <ul> <li>Validate the input at runtime.</li> <li>Set type hints for the keyword arguments for data methods like <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>.</li> <li>Document the component inputs.</li> </ul> <p>You can also use <code>Kwargs</code> to validate the keyword arguments for <a href=../api#django_components.Component.render><code>Component.render()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>Table</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>(</span><span class=n>color</span><span class=o>=</span><span class=s2>&quot;red&quot;</span><span class=p>,</span> <span class=n>size</span><span class=o>=</span><span class=mi>10</span><span class=p>),</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=p>)</span>
</code></pre></div> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.Media class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Media</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.Media class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Media</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentMediaInput (django_components.component_media.ComponentMediaInput)" href=#django_components.ComponentMediaInput>ComponentMediaInput</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1797 target=_blank>See source code</a></p> <p>Defines JS and CSS media files associated with this component.</p> <p>This <code>Media</code> class behaves similarly to <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/#assets-as-a-static-definition>Django's Media class</a>:</p> <ul> <li>Paths are generally handled as static file paths, and resolved URLs are rendered to HTML with <code>media_class.render_js()</code> or <code>media_class.render_css()</code>.</li> <li>A path that starts with <code>http</code>, <code>https</code>, or <code>/</code> is considered a URL, skipping the static file resolution. This path is still rendered to HTML with <code>media_class.render_js()</code> or <code>media_class.render_css()</code>.</li> <li>A <code>SafeString</code> (with <code>__html__</code> method) is considered an already-formatted HTML tag, skipping both static file resolution and rendering with <code>media_class.render_js()</code> or <code>media_class.render_css()</code>.</li> <li>You can set <a href=../api#django_components.ComponentMediaInput.extend><code>extend</code></a> to configure whether to inherit JS / CSS from parent components. See <a href=../../concepts/fundamentals/secondary_js_css_files/#media-inheritance>Media inheritance</a>.</li> </ul> <p>However, there's a few differences from Django's Media class:</p> <ol> <li>Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictionary (See <a href=../api#django_components.ComponentMediaInput><code>ComponentMediaInput</code></a>).</li> <li>Individual JS / CSS files can be any of <code>str</code>, <code>bytes</code>, <code>Path</code>, <a href=https://dev.to/doridoro/django-safestring-afj><code>SafeString</code></a>, or a function (See <a href=../api#django_components.ComponentMediaInputPath><code>ComponentMediaInputPath</code></a>).</li> </ol> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;path/to/script.js&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;https://unpkg.com/alpinejs@3.14.7/dist/cdn.min.js&quot;</span><span class=p>,</span> <span class=c1># AlpineJS</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>]</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=p>[</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=s2>&quot;path/to/style.css&quot;</span><span class=p>,</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=s2>&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span><span class=p>,</span> <span class=c1># TailwindCSS</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=p>],</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=s2>&quot;print&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;path/to/style2.css&quot;</span><span class=p>],</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=p>}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.Slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.Slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L648 target=_blank>See source code</a></p> <p>Optional typing for slots passed to the component.</p> <p>If set and not <code>None</code>, then the <code>slots</code> parameter of the data methods (<a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>, <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a>, <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a>) will be the instance of this class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Slot</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>header</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>footer</span><span class=p>:</span> <span class=n>Slot</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n>Slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>slots</span><span class=p>,</span> <span class=n>Table</span><span class=o>.</span><span class=n>Slots</span><span class=p>)</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=n>slots</span><span class=o>.</span><span class=n>header</span><span class=p>,</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=n>slots</span><span class=o>.</span><span class=n>footer</span><span class=p>,</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=p>}</span>
</code></pre></div> <p>The constructor of this class MUST accept keyword arguments:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>Slots</span><span class=p>(</span><span class=o>**</span><span class=n>slots</span><span class=p>)</span>
</code></pre></div> <p>As such, a good starting point is to set this field to a subclass of <a href=https://docs.python.org/3/library/typing.html#typing.NamedTuple><code>NamedTuple</code></a> or a <a href=https://docs.python.org/3/library/dataclasses.html#dataclasses.dataclass>dataclass</a>.</p> <p>Use <code>Slots</code> to:</p> <ul> <li>Validate the input at runtime.</li> <li>Set type hints for the slots for data methods like <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>.</li> <li>Document the component inputs.</li> </ul> <p>You can also use <code>Slots</code> to validate the slots for <a href=../api#django_components.Component.render><code>Component.render()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=n>slots</span><span class=o>=</span><span class=n>Table</span><span class=o>.</span><span class=n>Slots</span><span class=p>(</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>header</span><span class=o>=</span><span class=s2>&quot;HELLO IM HEADER&quot;</span><span class=p>,</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=n>footer</span><span class=o>=</span><span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=o>...</span><span class=p>),</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=p>),</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a><span class=p>)</span>
</code></pre></div> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <div class="admonition info"> <p class=admonition-title>Info</p> <p>Components can receive slots as strings, functions, or instances of <a href=../api#django_components.Slot><code>Slot</code></a>.</p> <p>Internally these are all normalized to instances of <a href=../api#django_components.Slot><code>Slot</code></a>.</p> <p>Therefore, the <code>slots</code> dictionary available in data methods (like <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>) will always be a dictionary of <a href=../api#django_components.Slot><code>Slot</code></a> instances.</p> <p>To correctly type this dictionary, you should set the fields of <code>Slots</code> to <a href=../api#django_components.Slot><code>Slot</code></a> or <a href=../api#django_components.SlotInput><code>SlotInput</code></a>:</p> <p><a href=../api#django_components.SlotInput><code>SlotInput</code></a> is a union of <code>Slot</code>, string, and function types.</p> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.TemplateData class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">TemplateData</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.TemplateData class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>TemplateData</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1096 target=_blank>See source code</a></p> <p>Optional typing for the data to be returned from <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>.</p> <p>If set and not <code>None</code>, then this class will be instantiated with the dictionary returned from <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> to validate the data.</p> <p>The constructor of this class MUST accept keyword arguments:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>TemplateData</span><span class=p>(</span><span class=o>**</span><span class=n>template_data</span><span class=p>)</span>
</code></pre></div> <p>You can also return an instance of <code>TemplateData</code> directly from <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> to get type hints:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>class</span><span class=w> </span><span class=nc>TemplateData</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=k>return</span> <span class=n>Table</span><span class=o>.</span><span class=n>TemplateData</span><span class=p>(</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=n>color</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=n>size</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=p>)</span>
</code></pre></div> <p>A good starting point is to set this field to a subclass of <a href=https://docs.python.org/3/library/typing.html#typing.NamedTuple><code>NamedTuple</code></a> or a <a href=https://docs.python.org/3/library/dataclasses.html#dataclasses.dataclass>dataclass</a>.</p> <p>Use <code>TemplateData</code> to:</p> <ul> <li>Validate the data returned from <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> at runtime.</li> <li>Set type hints for this data.</li> <li>Document the component data.</li> </ul> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <div class="admonition info"> <p class=admonition-title>Info</p> <p>If you use a custom class for <code>TemplateData</code>, this class needs to be convertable to a dictionary.</p> <p>You can implement either:</p> <ol> <li> <p><code>_asdict()</code> method <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyClass</span><span class=p>:</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>def</span><span class=w> </span><span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=bp>self</span><span class=o>.</span><span class=n>x</span> <span class=o>=</span> <span class=mi>1</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=bp>self</span><span class=o>.</span><span class=n>y</span> <span class=o>=</span> <span class=mi>2</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>def</span><span class=w> </span><span class=nf>_asdict</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>return</span> <span class=p>{</span><span class=s1>&#39;x&#39;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>x</span><span class=p>,</span> <span class=s1>&#39;y&#39;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>y</span><span class=p>}</span>
</code></pre></div></p> </li> <li> <p>Or make the class dict-like with <code>__iter__()</code> and <code>__getitem__()</code> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyClass</span><span class=p>:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>def</span><span class=w> </span><span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=bp>self</span><span class=o>.</span><span class=n>x</span> <span class=o>=</span> <span class=mi>1</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=bp>self</span><span class=o>.</span><span class=n>y</span> <span class=o>=</span> <span class=mi>2</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>def</span><span class=w> </span><span class=fm>__iter__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=k>return</span> <span class=nb>iter</span><span class=p>([(</span><span class=s1>&#39;x&#39;</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>x</span><span class=p>),</span> <span class=p>(</span><span class=s1>&#39;y&#39;</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>y</span><span class=p>)])</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=k>def</span><span class=w> </span><span class=fm>__getitem__</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>):</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=k>return</span> <span class=nb>getattr</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>)</span>
</code></pre></div></p> </li> </ol> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.View class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">View</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.View class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>View</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentView (django_components.extensions.view.ComponentView)" href=#django_components.ComponentView>ComponentView</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2159 target=_blank>See source code</a></p> <p>The fields of this class are used to configure the component views and URLs.</p> <p>This class is a subclass of <a href=https://docs.djangoproject.com/en/5.2/ref/class-based-views/base/#view><code>django.views.View</code></a>. The <a href=../api#django_components.Component><code>Component</code></a> instance is available via <code>self.component</code>.</p> <p>Override the methods of this class to define the behavior of the component.</p> <p>Read more about <a href=../../concepts/fundamentals/component_views_urls>Component views and URLs</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>:</span> <span class=n>HttpRequest</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>HttpResponse</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=n>HttpResponse</span><span class=p>(</span><span class=s2>&quot;Hello, world!&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.args class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">args</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.args class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2462 target=_blank>See source code</a></p> <p>Positional arguments passed to the component.</p> <p>This is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p><code>args</code> has the same behavior as the <code>args</code> argument of <a href=../api/#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>:</p> <ul> <li>If you defined the <a href=../api/#django_components.Component.Args><code>Component.Args</code></a> class, then the <code>args</code> property will return an instance of that <code>Args</code> class.</li> <li>Otherwise, <code>args</code> will be a plain list.</li> </ul> <p><strong>Example:</strong></p> <p>With <code>Args</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>per_page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>args</span><span class=o>.</span><span class=n>page</span> <span class=o>==</span> <span class=mi>123</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>args</span><span class=o>.</span><span class=n>per_page</span> <span class=o>==</span> <span class=mi>10</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=n>rendered</span> <span class=o>=</span> <span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>123</span><span class=p>,</span> <span class=mi>10</span><span class=p>],</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a><span class=p>)</span>
</code></pre></div> <p>Without <code>Args</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>args</span><span class=p>[</span><span class=mi>0</span><span class=p>]</span> <span class=o>==</span> <span class=mi>123</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>args</span><span class=p>[</span><span class=mi>1</span><span class=p>]</span> <span class=o>==</span> <span class=mi>10</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.cache class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">cache</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.cache class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>cache</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentCache (django_components.extensions.cache.ComponentCache)" href=#django_components.ComponentCache>ComponentCache</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2134 target=_blank>See source code</a></p> <p>Instance of <a href=../api#django_components.ComponentCache><code>ComponentCache</code></a> available at component render time.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.class_id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">class_id</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.class_id class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>class_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2197 target=_blank>See source code</a></p> <p>Unique ID of the component class, e.g. <code>MyComponent_ab01f2</code>.</p> <p>This is derived from the component class' module import path, e.g. <code>path.to.my.MyComponent</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.context class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">context</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.context class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2672 target=_blank>See source code</a></p> <p>The <code>context</code> argument as passed to <a href=../api/#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>.</p> <p>This is Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context>Context</a> with which the component template is rendered.</p> <p>If the root component or template was rendered with <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.RequestContext><code>RequestContext</code></a> then this will be an instance of <code>RequestContext</code>.</p> <p>Whether the context variables defined in <code>context</code> are available to the template depends on the <a href=../settings#django_components.app_settings.ComponentsSettings.context_behavior>context behavior mode</a>:</p> <ul> <li> <p>In <code>"django"</code> context behavior mode, the template will have access to the keys of this context.</p> </li> <li> <p>In <code>"isolated"</code> context behavior mode, the template will NOT have access to this context, and data MUST be passed via component's args and kwargs.</p> </li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.context_processors_data class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">context_processors_data</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.Component.context_processors_data class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>context_processors_data</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2845 target=_blank>See source code</a></p> <p>Retrieve data injected by <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#configuring-an-engine><code>context_processors</code></a>.</p> <p>This data is also available from within the component's template, without having to return this data from <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a>.</p> <p>In regular Django templates, you need to use <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.RequestContext><code>RequestContext</code></a> to apply context processors.</p> <p>In Components, the context processors are applied to components either when:</p> <ul> <li>The component is rendered with <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.RequestContext><code>RequestContext</code></a> (Regular Django behavior)</li> <li>The component is rendered with a regular <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> (or none), but the <code>request</code> kwarg of <a href=../api#django_components.Component.render><code>Component.render()</code></a> is set.</li> <li>The component is nested in another component that matches any of these conditions.</li> </ul> <p>See <a href=../api#django_components.Component.request><code>Component.request</code></a> on how the <code>request</code> (<a href=https://docs.djangoproject.com/en/5.2/ref/request-response/#django.http.HttpRequest>HTTPRequest</a>) object is passed to and within the components.</p> <p>NOTE: This dictionary is generated dynamically, so any changes to it will not be persisted.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>user</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>context_processors_data</span><span class=p>[</span><span class=s1>&#39;user&#39;</span><span class=p>]</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s1>&#39;is_logged_in&#39;</span><span class=p>:</span> <span class=n>user</span><span class=o>.</span><span class=n>is_authenticated</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.css class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">css</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.css class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>css</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1458 target=_blank>See source code</a></p> <p>Main CSS associated with this component inlined as string.</p> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.css><code>css</code></a> or <a href=../api#django_components.Component.css_file><code>css_file</code></a> must be defined.</p> </div> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=s2> .my-class {</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=s2> color: red;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=s2> }</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> <p><strong>Syntax highlighting</strong></p> <p>When using the inlined template, you can enable syntax highlighting with <code>django_components.types.css</code>.</p> <p>Learn more about <a href=../../concepts/fundamentals/single_file_components/#syntax-highlighting>syntax highlighting</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=nv>css</span><span class=p>:</span> <span class=nc>types.css</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=w> </span><span class=p>.</span><span class=nc>my-class</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a><span class=w> </span><span class=k>color</span><span class=p>:</span><span class=w> </span><span class=kc>red</span><span class=p>;</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a><span class=w> </span><span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.css_file class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">css_file</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.css_file class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>css_file</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1497 target=_blank>See source code</a></p> <p>Main CSS associated with this component as file path.</p> <p>The filepath must be either:</p> <ul> <li>Relative to the directory where the Component's Python file is defined.</li> <li>Relative to one of the component directories, as set by <a href=../settings#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../settings#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (e.g. <code>&lt;root&gt;/components/</code>).</li> <li>Relative to the staticfiles directories, as set by Django's <code>STATICFILES_DIRS</code> setting (e.g. <code>&lt;root&gt;/static/</code>).</li> </ul> <p>When you create a Component class with <code>css_file</code>, these will happen:</p> <ol> <li>If the file path is relative to the directory where the component's Python file is, the path is resolved.</li> <li>The file is read and its contents is set to <a href=../api#django_components.Component.css><code>Component.css</code></a>.</li> </ol> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.css><code>css</code></a> or <a href=../api#django_components.Component.css_file><code>css_file</code></a> must be defined.</p> </div> <p><strong>Example:</strong></p> <div class=highlight><span class=filename>path/to/style.css</span><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=p>.</span><span class=nc>my-class</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=w> </span><span class=k>color</span><span class=p>:</span><span class=w> </span><span class=kc>red</span><span class=p>;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>}</span>
</code></pre></div> <div class=highlight><span class=filename>path/to/component.py</span><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;path/to/style.css&quot;</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>css</span><span class=p>)</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=c1># Output:</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a><span class=c1># .my-class {</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a><span class=c1># color: red;</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a><span class=c1># };</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.debug_highlight class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">debug_highlight</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.debug_highlight class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>debug_highlight</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentDebugHighlight (django_components.extensions.debug_highlight.ComponentDebugHighlight)" href=#django_components.ComponentDebugHighlight>ComponentDebugHighlight</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.defaults class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">defaults</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.defaults class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>defaults</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentDefaults (django_components.extensions.defaults.ComponentDefaults)" href=#django_components.ComponentDefaults>ComponentDefaults</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2155 target=_blank>See source code</a></p> <p>Instance of <a href=../api#django_components.ComponentDefaults><code>ComponentDefaults</code></a> available at component render time.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.deps_strategy class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">deps_strategy</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.deps_strategy class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>deps_strategy</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2693 target=_blank>See source code</a></p> <p>Dependencies strategy defines how to handle JS and CSS dependencies of this and child components.</p> <p>Read more about <a href=../../concepts/fundamentals/rendering_components#dependencies-rendering>Dependencies rendering</a>.</p> <p>This is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>There are six strategies:</p> <ul> <li><a href=../../concepts/advanced/rendering_js_css#document><code>"document"</code></a> (default)<ul> <li>Smartly inserts JS / CSS into placeholders or into <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> tags.</li> <li>Requires the HTML to be rendered in a JS-enabled browser.</li> <li>Inserts extra script for managing fragments.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#fragment><code>"fragment"</code></a><ul> <li>A lightweight HTML fragment to be inserted into a document with AJAX.</li> <li>Fragment will fetch its own JS / CSS dependencies when inserted into the page.</li> <li>Requires the HTML to be rendered in a JS-enabled browser.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#simple><code>"simple"</code></a><ul> <li>Smartly insert JS / CSS into placeholders or into <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#prepend><code>"prepend"</code></a><ul> <li>Insert JS / CSS before the rendered HTML.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#append><code>"append"</code></a><ul> <li>Insert JS / CSS after the rendered HTML.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#ignore><code>"ignore"</code></a><ul> <li>HTML is left as-is. You can still process it with a different strategy later with <a href=../api/#django_components.render_dependencies><code>render_dependencies()</code></a>.</li> <li>Used for inserting rendered HTML into other components.</li> </ul> </li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.do_not_call_in_templates class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">do_not_call_in_templates</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.do_not_call_in_templates class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>do_not_call_in_templates</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2220 target=_blank>See source code</a></p> <p>Django special property to prevent calling the instance as a function inside Django templates.</p> <p>Read more about Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#variables-and-lookups><code>do_not_call_in_templates</code></a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">id</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.id class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nb>id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2393 target=_blank>See source code</a></p> <p>This ID is unique for every time a <a href=../api#django_components.Component.render><code>Component.render()</code></a> (or equivalent) is called (AKA "render ID").</p> <p>This is useful for logging or debugging.</p> <p>The ID is a 7-letter alphanumeric string in the format <code>cXXXXXX</code>, where <code>XXXXXX</code> is a random string of 6 alphanumeric characters (case-sensitive).</p> <p>E.g. <code>c1A2b3c</code>.</p> <p>A single render ID has a chance of collision 1 in 57 billion. However, due to birthday paradox, the chance of collision increases to 1% when approaching ~33K render IDs.</p> <p>Thus, there is currently a soft-cap of ~30K components rendered on a single page.</p> <p>If you need to expand this limit, please open an issue on GitHub.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Rendering &#39;</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>id</span><span class=si>}</span><span class=s2>&#39;&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>()</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=c1># Rendering &#39;ab3c4d&#39;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.input class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">input</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.input class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nb>input</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentInput
dataclass
(django_components.component.ComponentInput)" href=#django_components.ComponentInput>ComponentInput</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2425 target=_blank>See source code</a></p> <p>Deprecated. Will be removed in v1.</p> <p>Input holds the data that were passed to the current component at render time.</p> <p>This includes:</p> <ul> <li><a href=../api/#django_components.ComponentInput.args><code>args</code></a> - List of positional arguments</li> <li><a href=../api/#django_components.ComponentInput.kwargs><code>kwargs</code></a> - Dictionary of keyword arguments</li> <li><a href=../api/#django_components.ComponentInput.slots><code>slots</code></a> - Dictionary of slots. Values are normalized to <a href=../api/#django_components.Slot><code>Slot</code></a> instances</li> <li><a href=../api/#django_components.ComponentInput.context><code>context</code></a> - <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> object that should be used to render the component</li> <li>And other kwargs passed to <a href=../api/#django_components.Component.render><code>Component.render()</code></a> like <code>deps_strategy</code></li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=c1># Access component&#39;s inputs, slots and context</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>args</span> <span class=o>==</span> <span class=p>[</span><span class=mi>123</span><span class=p>,</span> <span class=s2>&quot;str&quot;</span><span class=p>]</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span> <span class=o>==</span> <span class=p>{</span><span class=s2>&quot;variable&quot;</span><span class=p>:</span> <span class=s2>&quot;test&quot;</span><span class=p>,</span> <span class=s2>&quot;another&quot;</span><span class=p>:</span> <span class=mi>1</span><span class=p>}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>footer_slot</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=p>[</span><span class=s2>&quot;footer&quot;</span><span class=p>]</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>some_var</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>context</span><span class=p>[</span><span class=s2>&quot;some_var&quot;</span><span class=p>]</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=n>rendered</span> <span class=o>=</span> <span class=n>TestComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=s2>&quot;variable&quot;</span><span class=p>:</span> <span class=s2>&quot;test&quot;</span><span class=p>,</span> <span class=s2>&quot;another&quot;</span><span class=p>:</span> <span class=mi>1</span><span class=p>},</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>123</span><span class=p>,</span> <span class=s2>&quot;str&quot;</span><span class=p>],</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=s2>&quot;MY_SLOT&quot;</span><span class=p>},</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.is_filled class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">is_filled</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.is_filled class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>is_filled</span><span class=p>:</span> <span class=n><span title=django_components.slots.SlotIsFilled>SlotIsFilled</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2800 target=_blank>See source code</a></p> <p>Deprecated. Will be removed in v1. Use <a href=../api/#django_components.Component.slots><code>Component.slots</code></a> instead. Note that <code>Component.slots</code> no longer escapes the slot names.</p> <p>Dictionary describing which slots have or have not been filled.</p> <p>This attribute is available for use only within:</p> <p>You can also access this variable from within the template as</p> <p><a href=../template_vars#django_components.component.ComponentVars.is_filled><code>{{ component_vars.is_filled.slot_name }}</code></a></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.js class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">js</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.js class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>js</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1175 target=_blank>See source code</a></p> <p>Main JS associated with this component inlined as string.</p> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.js><code>js</code></a> or <a href=../api#django_components.Component.js_file><code>js_file</code></a> must be defined.</p> </div> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;console.log(&#39;Hello, World!&#39;);&quot;</span>
</code></pre></div> <p><strong>Syntax highlighting</strong></p> <p>When using the inlined template, you can enable syntax highlighting with <code>django_components.types.js</code>.</p> <p>Learn more about <a href=../../concepts/fundamentals/single_file_components/#syntax-highlighting>syntax highlighting</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=nv>js</span><span class=p>:</span> <span class=nc>types.js</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=w> </span><span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=s1>&#39;Hello, World!&#39;</span><span class=p>);</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a><span class=w> </span><span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.js_file class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">js_file</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.js_file class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>js_file</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1208 target=_blank>See source code</a></p> <p>Main JS associated with this component as file path.</p> <p>The filepath must be either:</p> <ul> <li>Relative to the directory where the Component's Python file is defined.</li> <li>Relative to one of the component directories, as set by <a href=../settings#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../settings#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (e.g. <code>&lt;root&gt;/components/</code>).</li> <li>Relative to the staticfiles directories, as set by Django's <code>STATICFILES_DIRS</code> setting (e.g. <code>&lt;root&gt;/static/</code>).</li> </ul> <p>When you create a Component class with <code>js_file</code>, these will happen:</p> <ol> <li>If the file path is relative to the directory where the component's Python file is, the path is resolved.</li> <li>The file is read and its contents is set to <a href=../api#django_components.Component.js><code>Component.js</code></a>.</li> </ol> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.js><code>js</code></a> or <a href=../api#django_components.Component.js_file><code>js_file</code></a> must be defined.</p> </div> <p><strong>Example:</strong></p> <div class=highlight><span class=filename>path/to/script.js</span><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=s1>&#39;Hello, World!&#39;</span><span class=p>);</span>
</code></pre></div> <div class=highlight><span class=filename>path/to/component.py</span><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;path/to/script.js&quot;</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>js</span><span class=p>)</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=c1># Output: console.log(&#39;Hello, World!&#39;);</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.kwargs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">kwargs</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.kwargs class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2530 target=_blank>See source code</a></p> <p>Keyword arguments passed to the component.</p> <p>This is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p><code>kwargs</code> has the same behavior as the <code>kwargs</code> argument of <a href=../api/#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>:</p> <ul> <li>If you defined the <a href=../api/#django_components.Component.Kwargs><code>Component.Kwargs</code></a> class, then the <code>kwargs</code> property will return an instance of that <code>Kwargs</code> class.</li> <li>Otherwise, <code>kwargs</code> will be a plain dict.</li> </ul> <p><strong>Example:</strong></p> <p>With <code>Kwargs</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>per_page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=o>.</span><span class=n>page</span> <span class=o>==</span> <span class=mi>123</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=o>.</span><span class=n>per_page</span> <span class=o>==</span> <span class=mi>10</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=n>rendered</span> <span class=o>=</span> <span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=s2>&quot;page&quot;</span><span class=p>:</span> <span class=mi>123</span><span class=p>,</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=s2>&quot;per_page&quot;</span><span class=p>:</span> <span class=mi>10</span><span class=p>,</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=p>},</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a><span class=p>)</span>
</code></pre></div> <p>Without <code>Kwargs</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;page&quot;</span><span class=p>]</span> <span class=o>==</span> <span class=mi>123</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;per_page&quot;</span><span class=p>]</span> <span class=o>==</span> <span class=mi>10</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.media class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">media</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.media class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>media</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.forms.widgets.Media>Media</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1750 target=_blank>See source code</a></p> <p>Normalized definition of JS and CSS media files associated with this component. <code>None</code> if <a href=../api#django_components.Component.Media><code>Component.Media</code></a> is not defined.</p> <p>This field is generated from <a href=../api#django_components.Component.media_class><code>Component.media_class</code></a>.</p> <p>Read more on <a href=../../concepts/fundamentals/secondary_js_css_files/#accessing-media-files>Accessing component's Media JS / CSS</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;path/to/script.js&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;path/to/style.css&quot;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>media</span><span class=p>)</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=c1># Output:</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=c1># &lt;script src=&quot;/static/path/to/script.js&quot;&gt;&lt;/script&gt;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=c1># &lt;link href=&quot;/static/path/to/style.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.media_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">media_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.media_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>media_class</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><span title=django.forms.widgets.Media>Media</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django.forms.widgets.Media>Media</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1774 target=_blank>See source code</a></p> <p>Set the <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/#assets-as-a-static-definition>Media class</a> that will be instantiated with the JS and CSS media files from <a href=../api#django_components.Component.Media><code>Component.Media</code></a>.</p> <p>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 <code>&lt;script&gt;</code> or <code>&lt;link&gt;</code> HTML tags.</p> <p>Read more in <a href=../../concepts/fundamentals/secondary_js_css_files/#media-class>Media class</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;path/to/script.js&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;path/to/style.css&quot;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>media_class</span> <span class=o>=</span> <span class=n>MyMediaClass</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2331 target=_blank>See source code</a></p> <p>The name of the component.</p> <p>If the component was registered, this will be the name under which the component was registered in the <a href=../api#django_components.ComponentRegistry><code>ComponentRegistry</code></a>.</p> <p>Otherwise, this will be the name of the class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_component&quot;</span><span class=p>)</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=k>class</span><span class=w> </span><span class=nc>RegisteredComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=p>,</span> <span class=c1># &quot;my_component&quot;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>}</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=k>class</span><span class=w> </span><span class=nc>UnregisteredComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=p>,</span> <span class=c1># &quot;UnregisteredComponent&quot;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=p>}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.node class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">node</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.node class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>node</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2754 target=_blank>See source code</a></p> <p>The <a href=../api/#django_components.ComponentNode><code>ComponentNode</code></a> instance that was used to render the component.</p> <p>This will be set only if the component was rendered with the <a href=../template_tags#component><code>{% component %}</code></a> tag.</p> <p>Accessing the <a href=../api/#django_components.ComponentNode><code>ComponentNode</code></a> is mostly useful for extensions, which can modify their behaviour based on the source of the Component.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span><span class=o>.</span><span class=n>name</span> <span class=o>==</span> <span class=s2>&quot;my_component&quot;</span>
</code></pre></div> <p>For example, if <code>MyComponent</code> was used in another component - that is, with a <code>{% component "my_component" %}</code> tag in a template that belongs to another component - then you can use <a href=../api/#django_components.ComponentNode.template_component><code>self.node.template_component</code></a> to access the owner <a href=../api/#django_components.Component><code>Component</code></a> class.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>types.django_html</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_component&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_component&quot;</span><span class=p>)</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span><span class=o>.</span><span class=n>template_component</span> <span class=o>==</span> <span class=n>Parent</span>
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p><code>Component.node</code> is <code>None</code> if the component is created by <a href=../api/#django_components.Component.render><code>Component.render()</code></a> (but you can pass in the <code>node</code> kwarg yourself).</p> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.outer_context class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">outer_context</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.outer_context class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>outer_context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2727 target=_blank>See source code</a></p> <p>When a component is rendered with the <a href=../template_tags#component><code>{% component %}</code></a> tag, this is the Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> object that was used just outside of the component.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>with</span> <span class=nv>abc</span><span class=o>=</span><span class=m>123</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{{</span> <span class=nv>abc</span> <span class=cp>}}</span><span class=x> </span><span class=c>{# &lt;--- This is in outer context #}</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_component&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
</code></pre></div> <p>This is relevant when your components are isolated, for example when using the <a href=../settings#django_components.app_settings.ComponentsSettings.context_behavior>"isolated"</a> context behavior mode or when using the <code>only</code> flag.</p> <p>When components are isolated, each component has its own instance of Context, so <code>outer_context</code> is different from the <code>context</code> argument.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.raw_args class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">raw_args</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.raw_args class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>raw_args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2508 target=_blank>See source code</a></p> <p>Positional arguments passed to the component.</p> <p>This is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>Unlike <a href=../api/#django_components.Component.args><code>Component.args</code></a>, this attribute is not typed and will remain as plain list even if you define the <a href=../api/#django_components.Component.Args><code>Component.Args</code></a> class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>raw_args</span><span class=p>[</span><span class=mi>0</span><span class=p>]</span> <span class=o>==</span> <span class=mi>123</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>raw_args</span><span class=p>[</span><span class=mi>1</span><span class=p>]</span> <span class=o>==</span> <span class=mi>10</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.raw_kwargs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">raw_kwargs</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.raw_kwargs class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>raw_kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2579 target=_blank>See source code</a></p> <p>Keyword arguments passed to the component.</p> <p>This is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>Unlike <a href=../api/#django_components.Component.kwargs><code>Component.kwargs</code></a>, this attribute is not typed and will remain as plain dict even if you define the <a href=../api/#django_components.Component.Kwargs><code>Component.Kwargs</code></a> class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>raw_kwargs</span><span class=p>[</span><span class=s2>&quot;page&quot;</span><span class=p>]</span> <span class=o>==</span> <span class=mi>123</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>raw_kwargs</span><span class=p>[</span><span class=s2>&quot;per_page&quot;</span><span class=p>]</span> <span class=o>==</span> <span class=mi>10</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.raw_slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">raw_slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.raw_slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>raw_slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" Slot
dataclass
(django_components.slots.Slot)" href=#django_components.Slot>Slot</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2650 target=_blank>See source code</a></p> <p>Slots passed to the component.</p> <p>This is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>Unlike <a href=../api/#django_components.Component.slots><code>Component.slots</code></a>, this attribute is not typed and will remain as plain dict even if you define the <a href=../api/#django_components.Component.Slots><code>Component.Slots</code></a> class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>raw_slots</span><span class=p>[</span><span class=s2>&quot;header&quot;</span><span class=p>]</span> <span class=o>==</span> <span class=s2>&quot;MY_HEADER&quot;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>raw_slots</span><span class=p>[</span><span class=s2>&quot;footer&quot;</span><span class=p>]</span> <span class=o>==</span> <span class=s2>&quot;FOOTER: &quot;</span> <span class=o>+</span> <span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s2>&quot;user_id&quot;</span><span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.registered_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">registered_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.registered_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>registered_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2358 target=_blank>See source code</a></p> <p>If the component was rendered with the <a href=../template_tags#component><code>{% component %}</code></a> template tag, this will be the name under which the component was registered in the <a href=../api#django_components.ComponentRegistry><code>ComponentRegistry</code></a>.</p> <p>Otherwise, this will be <code>None</code>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_component&quot;</span><span class=p>)</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;{{ name }}&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>registered_name</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=p>}</span>
</code></pre></div> <p>Will print <code>my_component</code> in the template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_component&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>And <code>None</code> when rendered in Python:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>()</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=c1># None</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.registry class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">registry</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.registry class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2748 target=_blank>See source code</a></p> <p>The <a href=../api/#django_components.ComponentRegistry><code>ComponentRegistry</code></a> instance that was used to render the component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.request class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">request</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.request class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2815 target=_blank>See source code</a></p> <p><a href=https://docs.djangoproject.com/en/5.2/ref/request-response/#django.http.HttpRequest>HTTPRequest</a> object passed to this component.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>user_id</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>request</span><span class=o>.</span><span class=n>GET</span><span class=p>[</span><span class=s1>&#39;user_id&#39;</span><span class=p>]</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s1>&#39;user_id&#39;</span><span class=p>:</span> <span class=n>user_id</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>}</span>
</code></pre></div> <p><strong>Passing <code>request</code> to a component:</strong></p> <p>In regular Django templates, you have to use <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.RequestContext><code>RequestContext</code></a> to pass the <code>HttpRequest</code> object to the template.</p> <p>With Components, you can either use <code>RequestContext</code>, or pass the <code>request</code> object explicitly via <a href=../api#django_components.Component.render><code>Component.render()</code></a> and <a href=../api#django_components.Component.render_to_response><code>Component.render_to_response()</code></a>.</p> <p>When a component is nested in another, the child component uses parent's <code>request</code> object.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.response_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">response_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.response_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>response_class</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1841 target=_blank>See source code</a></p> <p>This attribute configures what class is used to generate response from <a href=../api/#django_components.Component.render_to_response><code>Component.render_to_response()</code></a>.</p> <p>The response class should accept a string as the first argument.</p> <p>Defaults to <a href=https://docs.djangoproject.com/en/5.2/ref/request-response/#httpresponse-objects><code>django.http.HttpResponse</code></a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.http</span><span class=w> </span><span class=kn>import</span> <span class=n>HttpResponse</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyHttpResponse</span><span class=p>(</span><span class=n>HttpResponse</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=o>...</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>response_class</span> <span class=o>=</span> <span class=n>MyHttpResponse</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=n>response</span> <span class=o>=</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>response</span><span class=p>,</span> <span class=n>MyHttpResponse</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2601 target=_blank>See source code</a></p> <p>Slots passed to the component.</p> <p>This is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p><code>slots</code> has the same behavior as the <code>slots</code> argument of <a href=../api/#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>:</p> <ul> <li>If you defined the <a href=../api/#django_components.Component.Slots><code>Component.Slots</code></a> class, then the <code>slots</code> property will return an instance of that class.</li> <li>Otherwise, <code>slots</code> will be a plain dict.</li> </ul> <p><strong>Example:</strong></p> <p>With <code>Slots</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Slot</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>header</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=o>.</span><span class=n>header</span><span class=p>,</span> <span class=n>Slot</span><span class=p>)</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=o>.</span><span class=n>footer</span><span class=p>,</span> <span class=n>Slot</span><span class=p>)</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=n>rendered</span> <span class=o>=</span> <span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=s2>&quot;MY_HEADER&quot;</span><span class=p>,</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>&quot;FOOTER: &quot;</span> <span class=o>+</span> <span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s2>&quot;user_id&quot;</span><span class=p>],</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=p>},</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a><span class=p>)</span>
</code></pre></div> <p>Without <code>Slots</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Slot</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=p>[</span><span class=s2>&quot;header&quot;</span><span class=p>],</span> <span class=n>Slot</span><span class=p>)</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=p>[</span><span class=s2>&quot;footer&quot;</span><span class=p>],</span> <span class=n>Slot</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.template class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.template class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L835 target=_blank>See source code</a></p> <p>Inlined Django template (as a plain string) associated with this component.</p> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.template_file><code>template_file</code></a>, <a href=../api#django_components.Component.template><code>template</code></a>, <a href=../api#django_components.Component.get_template_name><code>get_template_name()</code></a>, or <a href=../api#django_components.Component.get_template><code>get_template()</code></a> must be defined.</p> </div> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>template</span> <span class=o>=</span> <span class=s1>&#39;&#39;&#39;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=s1> &lt;div&gt;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=s1> {{ my_var }}</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=s1> &lt;/div&gt;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=s1> &#39;&#39;&#39;</span>
</code></pre></div> <p><strong>Syntax highlighting</strong></p> <p>When using the inlined template, you can enable syntax highlighting with <code>django_components.types.django_html</code>.</p> <p>Learn more about <a href=../../concepts/fundamentals/single_file_components/#syntax-highlighting>syntax highlighting</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>types.django_html</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=cp>{{</span> <span class=nv>my_var</span> <span class=cp>}}</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.template_file class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_file</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.template_file class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_file</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L723 target=_blank>See source code</a></p> <p>Filepath to the Django template associated with this component.</p> <p>The filepath must be either:</p> <ul> <li>Relative to the directory where the Component's Python file is defined.</li> <li>Relative to one of the component directories, as set by <a href=../settings#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../settings#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (e.g. <code>&lt;root&gt;/components/</code>).</li> <li>Relative to the template directories, as set by Django's <code>TEMPLATES</code> setting (e.g. <code>&lt;root&gt;/templates/</code>).</li> </ul> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.template_file><code>template_file</code></a>, <a href=../api#django_components.Component.get_template_name><code>get_template_name</code></a>, <a href=../api#django_components.Component.template><code>template</code></a> or <a href=../api#django_components.Component.get_template><code>get_template</code></a> must be defined.</p> </div> <p><strong>Example:</strong></p> <p>Assuming this project layout:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a>|- components/
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> |- table/
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> |- table.html
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> |- table.css
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> |- table.js
</code></pre></div> <p>Template name can be either relative to the python file (<code>components/table/table.py</code>):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;table.html&quot;</span>
</code></pre></div> <p>Or relative to one of the directories in <a href=../settings#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../settings#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (<code>components/</code>):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;table/table.html&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.Component.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L777 target=_blank>See source code</a></p> <p>Alias for <a href=../api#django_components.Component.template_file><code>template_file</code></a>.</p> <p>For historical reasons, django-components used <code>template_name</code> to align with Django's <a href=https://docs.djangoproject.com/en/5.2/ref/class-based-views/base/#django.views.generic.base.TemplateView>TemplateView</a>.</p> <p><code>template_file</code> was introduced to align with <a href=../api#django_components.Component.js><code>js</code></a>/<a href=../api#django_components.Component.js_file><code>js_file</code></a> and <a href=../api#django_components.Component.css><code>css</code></a>/<a href=../api#django_components.Component.css_file><code>css_file</code></a>.</p> <p>Setting and accessing this attribute is proxied to <a href=../api#django_components.Component.template_file><code>template_file</code></a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Component.view class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">view</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Component.view class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>view</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentView (django_components.extensions.view.ComponentView)" href=#django_components.ComponentView>ComponentView</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2181 target=_blank>See source code</a></p> <p>Instance of <a href=../api#django_components.ComponentView><code>ComponentView</code></a> available at component render time.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.as_view class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">as_view</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.Component.as_view class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>as_view</span><span class=p>(</span><span class=o>**</span><span class=n>initkwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django_components.extensions.view.ViewFn>ViewFn</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2945 target=_blank>See source code</a></p> <p>Shortcut for calling <code>Component.View.as_view</code> and passing component instance to it.</p> <p>Read more on <a href=../../concepts/fundamentals/component_views_urls>Component views and URLs</a>.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.get_context_data class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_context_data</span> <a href=#django_components.Component.get_context_data class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_context_data</span><span class=p>(</span><span class=o>*</span><span class=n>_args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>_kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Mapping href=https://docs.python.org/3.12/library/typing.html#typing.Mapping>Mapping</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L926 target=_blank>See source code</a></p> <p>DEPRECATED: Use <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> instead. Will be removed in v2.</p> <p>Use this method to define variables that will be available in the template.</p> <p>Receives the args and kwargs as they were passed to the Component.</p> <p>This method has access to the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>Read more about <a href=../../concepts/fundamentals/html_js_css_variables>Template variables</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>name</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=n>name</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>}</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;Hello, {{ name }}!&quot;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;World&quot;</span><span class=p>)</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p><code>get_context_data()</code> and <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> are mutually exclusive.</p> <p>If both methods return non-empty dictionaries, an error will be raised.</p> </div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.get_css_data class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_css_data</span> <a href=#django_components.Component.get_css_data class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_css_data</span><span class=p>(</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Mapping href=https://docs.python.org/3.12/library/typing.html#typing.Mapping>Mapping</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1542 target=_blank>See source code</a></p> <p>Use this method to define variables that will be available from within the component's CSS code.</p> <p>This method has access to the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>The data returned from this method will be serialized to string.</p> <p>Read more about <a href=../../concepts/fundamentals/html_js_css_variables>CSS variables</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_css_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p>}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>css</span> <span class=o>=</span> <span class=s1>&#39;&#39;&#39;</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=s1> .my-class {</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=s1> color: var(--color);</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=s1> }</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=s1> &#39;&#39;&#39;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>color</span><span class=o>=</span><span class=s2>&quot;red&quot;</span><span class=p>)</span>
</code></pre></div> <p><strong>Args:</strong></p> <ul> <li><code>args</code>: Positional arguments passed to the component.</li> <li><code>kwargs</code>: Keyword arguments passed to the component.</li> <li><code>slots</code>: Slots passed to the component.</li> <li><code>context</code>: <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> used for rendering the component template.</li> </ul> <p><strong>Pass-through kwargs:</strong></p> <p>It's best practice to explicitly define what args and kwargs a component accepts.</p> <p>However, if you want a looser setup, you can easily write components that accept any number of kwargs, and pass them all to the CSS code.</p> <p>To do that, simply return the <code>kwargs</code> dictionary itself from <code>get_css_data()</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_css_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=k>return</span> <span class=n>kwargs</span>
</code></pre></div> <p><strong>Type hints:</strong></p> <p>To get type hints for the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters, you can define the <a href=../api#django_components.Component.Args><code>Args</code></a>, <a href=../api#django_components.Component.Kwargs><code>Kwargs</code></a>, and <a href=../api#django_components.Component.Slots><code>Slots</code></a> classes on the component class, and then directly reference them in the function signature of <code>get_css_data()</code>.</p> <p>When you set these classes, the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters will be given as instances of these (<code>args</code> instance of <code>Args</code>, etc).</p> <p>When you omit these classes, or set them to <code>None</code>, then the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters will be given as plain lists / dictionaries, unmodified.</p> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Context</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-13 name=__codelineno-2-13 href=#__codelineno-2-13></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-2-14 name=__codelineno-2-14 href=#__codelineno-2-14></a>
<a id=__codelineno-2-15 name=__codelineno-2-15 href=#__codelineno-2-15></a> <span class=k>def</span><span class=w> </span><span class=nf>get_css_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n>Args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n>Slots</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>):</span>
<a id=__codelineno-2-16 name=__codelineno-2-16 href=#__codelineno-2-16></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>args</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Args</span><span class=p>)</span>
<a id=__codelineno-2-17 name=__codelineno-2-17 href=#__codelineno-2-17></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>kwargs</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>)</span>
<a id=__codelineno-2-18 name=__codelineno-2-18 href=#__codelineno-2-18></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>slots</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Slots</span><span class=p>)</span>
<a id=__codelineno-2-19 name=__codelineno-2-19 href=#__codelineno-2-19></a>
<a id=__codelineno-2-20 name=__codelineno-2-20 href=#__codelineno-2-20></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-2-21 name=__codelineno-2-21 href=#__codelineno-2-21></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>args</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
<a id=__codelineno-2-22 name=__codelineno-2-22 href=#__codelineno-2-22></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>size</span><span class=p>,</span>
<a id=__codelineno-2-23 name=__codelineno-2-23 href=#__codelineno-2-23></a> <span class=p>}</span>
</code></pre></div> <p>You can also add typing to the data returned from <a href=../api#django_components.Component.get_css_data><code>get_css_data()</code></a> by defining the <a href=../api#django_components.Component.CssData><code>CssData</code></a> class on the component class.</p> <p>When you set this class, you can return either the data as a plain dictionary, or an instance of <a href=../api#django_components.Component.CssData><code>CssData</code></a>.</p> <p>If you return plain dictionary, the data will be validated against the <a href=../api#django_components.Component.CssData><code>CssData</code></a> class by instantiating it with the dictionary.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>class</span><span class=w> </span><span class=nc>CssData</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>def</span><span class=w> </span><span class=nf>get_css_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=p>}</span>
<a id=__codelineno-3-11 name=__codelineno-3-11 href=#__codelineno-3-11></a> <span class=c1># or</span>
<a id=__codelineno-3-12 name=__codelineno-3-12 href=#__codelineno-3-12></a> <span class=k>return</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>CssData</span><span class=p>(</span>
<a id=__codelineno-3-13 name=__codelineno-3-13 href=#__codelineno-3-13></a> <span class=n>color</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-3-14 name=__codelineno-3-14 href=#__codelineno-3-14></a> <span class=n>size</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-3-15 name=__codelineno-3-15 href=#__codelineno-3-15></a> <span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.get_js_data class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_js_data</span> <a href=#django_components.Component.get_js_data class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_js_data</span><span class=p>(</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Mapping href=https://docs.python.org/3.12/library/typing.html#typing.Mapping>Mapping</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1248 target=_blank>See source code</a></p> <p>Use this method to define variables that will be available from within the component's JavaScript code.</p> <p>This method has access to the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>The data returned from this method will be serialized to JSON.</p> <p>Read more about <a href=../../concepts/fundamentals/html_js_css_variables>JavaScript variables</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_js_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>],</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>}</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>js</span> <span class=o>=</span> <span class=s1>&#39;&#39;&#39;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=s1> $onLoad(({ name, id }) =&gt; {</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=s1> console.log(name, id);</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=s1> });</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=s1> &#39;&#39;&#39;</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;World&quot;</span><span class=p>)</span>
</code></pre></div> <p><strong>Args:</strong></p> <ul> <li><code>args</code>: Positional arguments passed to the component.</li> <li><code>kwargs</code>: Keyword arguments passed to the component.</li> <li><code>slots</code>: Slots passed to the component.</li> <li><code>context</code>: <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> used for rendering the component template.</li> </ul> <p><strong>Pass-through kwargs:</strong></p> <p>It's best practice to explicitly define what args and kwargs a component accepts.</p> <p>However, if you want a looser setup, you can easily write components that accept any number of kwargs, and pass them all to the JavaScript code.</p> <p>To do that, simply return the <code>kwargs</code> dictionary itself from <code>get_js_data()</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_js_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=k>return</span> <span class=n>kwargs</span>
</code></pre></div> <p><strong>Type hints:</strong></p> <p>To get type hints for the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters, you can define the <a href=../api#django_components.Component.Args><code>Args</code></a>, <a href=../api#django_components.Component.Kwargs><code>Kwargs</code></a>, and <a href=../api#django_components.Component.Slots><code>Slots</code></a> classes on the component class, and then directly reference them in the function signature of <code>get_js_data()</code>.</p> <p>When you set these classes, the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters will be given as instances of these (<code>args</code> instance of <code>Args</code>, etc).</p> <p>When you omit these classes, or set them to <code>None</code>, then the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters will be given as plain lists / dictionaries, unmodified.</p> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Context</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-13 name=__codelineno-2-13 href=#__codelineno-2-13></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-2-14 name=__codelineno-2-14 href=#__codelineno-2-14></a>
<a id=__codelineno-2-15 name=__codelineno-2-15 href=#__codelineno-2-15></a> <span class=k>def</span><span class=w> </span><span class=nf>get_js_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n>Args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n>Slots</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>):</span>
<a id=__codelineno-2-16 name=__codelineno-2-16 href=#__codelineno-2-16></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>args</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Args</span><span class=p>)</span>
<a id=__codelineno-2-17 name=__codelineno-2-17 href=#__codelineno-2-17></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>kwargs</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>)</span>
<a id=__codelineno-2-18 name=__codelineno-2-18 href=#__codelineno-2-18></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>slots</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Slots</span><span class=p>)</span>
<a id=__codelineno-2-19 name=__codelineno-2-19 href=#__codelineno-2-19></a>
<a id=__codelineno-2-20 name=__codelineno-2-20 href=#__codelineno-2-20></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-2-21 name=__codelineno-2-21 href=#__codelineno-2-21></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>args</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
<a id=__codelineno-2-22 name=__codelineno-2-22 href=#__codelineno-2-22></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>size</span><span class=p>,</span>
<a id=__codelineno-2-23 name=__codelineno-2-23 href=#__codelineno-2-23></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-2-24 name=__codelineno-2-24 href=#__codelineno-2-24></a> <span class=p>}</span>
</code></pre></div> <p>You can also add typing to the data returned from <a href=../api#django_components.Component.get_js_data><code>get_js_data()</code></a> by defining the <a href=../api#django_components.Component.JsData><code>JsData</code></a> class on the component class.</p> <p>When you set this class, you can return either the data as a plain dictionary, or an instance of <a href=../api#django_components.Component.JsData><code>JsData</code></a>.</p> <p>If you return plain dictionary, the data will be validated against the <a href=../api#django_components.Component.JsData><code>JsData</code></a> class by instantiating it with the dictionary.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>class</span><span class=w> </span><span class=nc>JsData</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>def</span><span class=w> </span><span class=nf>get_js_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=p>}</span>
<a id=__codelineno-3-11 name=__codelineno-3-11 href=#__codelineno-3-11></a> <span class=c1># or</span>
<a id=__codelineno-3-12 name=__codelineno-3-12 href=#__codelineno-3-12></a> <span class=k>return</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>JsData</span><span class=p>(</span>
<a id=__codelineno-3-13 name=__codelineno-3-13 href=#__codelineno-3-13></a> <span class=n>color</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-3-14 name=__codelineno-3-14 href=#__codelineno-3-14></a> <span class=n>size</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-3-15 name=__codelineno-3-15 href=#__codelineno-3-15></a> <span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.get_template class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_template</span> <a href=#django_components.Component.get_template class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_template</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><span title=django.template.base.Template>Template</span></span><span class=p>]]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L880 target=_blank>See source code</a></p> <p>DEPRECATED: Use instead <a href=../api#django_components.Component.template_file><code>Component.template_file</code></a>, <a href=../api#django_components.Component.template><code>Component.template</code></a> or <a href=../api#django_components.Component.on_render><code>Component.on_render()</code></a>. Will be removed in v1.</p> <p>Same as <a href=../api#django_components.Component.template><code>Component.template</code></a>, but allows to dynamically resolve the template at render time.</p> <p>The template can be either plain string or a <a href=https://docs.djangoproject.com/en/5.1/topics/templates/#template><code>Template</code></a> instance.</p> <p>See <a href=../api#django_components.Component.template><code>Component.template</code></a> for more info and examples.</p> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.template><code>template</code></a> <a href=../api#django_components.Component.template_file><code>template_file</code></a>, <a href=../api#django_components.Component.get_template_name><code>get_template_name()</code></a>, or <a href=../api#django_components.Component.get_template><code>get_template()</code></a> must be defined.</p> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>The context is not fully populated at the point when this method is called.</p> <p>If you need to access the context, either use <a href=../api#django_components.Component.on_render_before><code>Component.on_render_before()</code></a> or <a href=../api#django_components.Component.on_render><code>Component.on_render()</code></a>.</p> </div> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>context</code></b> (<code><span title=django.template.context.Context>Context</span></code>) <div class=doc-md-description> <p>The Django template <a href=https://docs.djangoproject.com/en/5.1/ref/templates/api/#django.template.Context><code>Context</code></a> in which the component is rendered.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <span title=django.template.base.Template>Template</span>]]</code> <div class=doc-md-description> <p>Optional[Union[str, Template]]: The inlined Django template string or a <a href=https://docs.djangoproject.com/en/5.1/topics/templates/#template><code>Template</code></a> instance.</p> </div> </li> </ul> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.get_template_data class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_template_data</span> <a href=#django_components.Component.get_template_data class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_template_data</span><span class=p>(</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Mapping href=https://docs.python.org/3.12/library/typing.html#typing.Mapping>Mapping</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L963 target=_blank>See source code</a></p> <p>Use this method to define variables that will be available in the template.</p> <p>This method has access to the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p>Read more about <a href=../../concepts/fundamentals/html_js_css_variables>Template variables</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>],</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>}</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;Hello, {{ name }}!&quot;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;World&quot;</span><span class=p>)</span>
</code></pre></div> <p><strong>Args:</strong></p> <ul> <li><code>args</code>: Positional arguments passed to the component.</li> <li><code>kwargs</code>: Keyword arguments passed to the component.</li> <li><code>slots</code>: Slots passed to the component.</li> <li><code>context</code>: <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> used for rendering the component template.</li> </ul> <p><strong>Pass-through kwargs:</strong></p> <p>It's best practice to explicitly define what args and kwargs a component accepts.</p> <p>However, if you want a looser setup, you can easily write components that accept any number of kwargs, and pass them all to the template (similar to <a href=https://github.com/wrabit/django-cotton>django-cotton</a>).</p> <p>To do that, simply return the <code>kwargs</code> dictionary itself from <code>get_template_data()</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=k>return</span> <span class=n>kwargs</span>
</code></pre></div> <p><strong>Type hints:</strong></p> <p>To get type hints for the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters, you can define the <a href=../api#django_components.Component.Args><code>Args</code></a>, <a href=../api#django_components.Component.Kwargs><code>Kwargs</code></a>, and <a href=../api#django_components.Component.Slots><code>Slots</code></a> classes on the component class, and then directly reference them in the function signature of <code>get_template_data()</code>.</p> <p>When you set these classes, the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters will be given as instances of these (<code>args</code> instance of <code>Args</code>, etc).</p> <p>When you omit these classes, or set them to <code>None</code>, then the <code>args</code>, <code>kwargs</code>, and <code>slots</code> parameters will be given as plain lists / dictionaries, unmodified.</p> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Context</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-2-13 name=__codelineno-2-13 href=#__codelineno-2-13></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-2-14 name=__codelineno-2-14 href=#__codelineno-2-14></a>
<a id=__codelineno-2-15 name=__codelineno-2-15 href=#__codelineno-2-15></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n>Args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n>Slots</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>):</span>
<a id=__codelineno-2-16 name=__codelineno-2-16 href=#__codelineno-2-16></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>args</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Args</span><span class=p>)</span>
<a id=__codelineno-2-17 name=__codelineno-2-17 href=#__codelineno-2-17></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>kwargs</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>)</span>
<a id=__codelineno-2-18 name=__codelineno-2-18 href=#__codelineno-2-18></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>slots</span><span class=p>,</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>Slots</span><span class=p>)</span>
<a id=__codelineno-2-19 name=__codelineno-2-19 href=#__codelineno-2-19></a>
<a id=__codelineno-2-20 name=__codelineno-2-20 href=#__codelineno-2-20></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-2-21 name=__codelineno-2-21 href=#__codelineno-2-21></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>args</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
<a id=__codelineno-2-22 name=__codelineno-2-22 href=#__codelineno-2-22></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>size</span><span class=p>,</span>
<a id=__codelineno-2-23 name=__codelineno-2-23 href=#__codelineno-2-23></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-2-24 name=__codelineno-2-24 href=#__codelineno-2-24></a> <span class=p>}</span>
</code></pre></div> <p>You can also add typing to the data returned from <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> by defining the <a href=../api#django_components.Component.TemplateData><code>TemplateData</code></a> class on the component class.</p> <p>When you set this class, you can return either the data as a plain dictionary, or an instance of <a href=../api#django_components.Component.TemplateData><code>TemplateData</code></a>.</p> <p>If you return plain dictionary, the data will be validated against the <a href=../api#django_components.Component.TemplateData><code>TemplateData</code></a> class by instantiating it with the dictionary.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>class</span><span class=w> </span><span class=nc>TemplateData</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=n>size</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=s2>&quot;size&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=p>}</span>
<a id=__codelineno-3-11 name=__codelineno-3-11 href=#__codelineno-3-11></a> <span class=c1># or</span>
<a id=__codelineno-3-12 name=__codelineno-3-12 href=#__codelineno-3-12></a> <span class=k>return</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>TemplateData</span><span class=p>(</span>
<a id=__codelineno-3-13 name=__codelineno-3-13 href=#__codelineno-3-13></a> <span class=n>color</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;color&quot;</span><span class=p>],</span>
<a id=__codelineno-3-14 name=__codelineno-3-14 href=#__codelineno-3-14></a> <span class=n>size</span><span class=o>=</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;size&quot;</span><span class=p>],</span>
<a id=__codelineno-3-15 name=__codelineno-3-15 href=#__codelineno-3-15></a> <span class=p>)</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p><code>get_template_data()</code> and <a href=../api#django_components.Component.get_context_data><code>get_context_data()</code></a> are mutually exclusive.</p> <p>If both methods return non-empty dictionaries, an error will be raised.</p> </div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.get_template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_template_name</span> <a href=#django_components.Component.get_template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_template_name</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L793 target=_blank>See source code</a></p> <p>DEPRECATED: Use instead <a href=../api#django_components.Component.template_file><code>Component.template_file</code></a>, <a href=../api#django_components.Component.template><code>Component.template</code></a> or <a href=../api#django_components.Component.on_render><code>Component.on_render()</code></a>. Will be removed in v1.</p> <p>Same as <a href=../api#django_components.Component.template_file><code>Component.template_file</code></a>, but allows to dynamically resolve the template name at render time.</p> <p>See <a href=../api#django_components.Component.template_file><code>Component.template_file</code></a> for more info and examples.</p> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>The context is not fully populated at the point when this method is called.</p> <p>If you need to access the context, either use <a href=../api#django_components.Component.on_render_before><code>Component.on_render_before()</code></a> or <a href=../api#django_components.Component.on_render><code>Component.on_render()</code></a>.</p> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one of <a href=../api#django_components.Component.template_file><code>template_file</code></a>, <a href=../api#django_components.Component.get_template_name><code>get_template_name()</code></a>, <a href=../api#django_components.Component.template><code>template</code></a> or <a href=../api#django_components.Component.get_template><code>get_template()</code></a> must be defined.</p> </div> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>context</code></b> (<code><span title=django.template.context.Context>Context</span></code>) <div class=doc-md-description> <p>The Django template <a href=https://docs.djangoproject.com/en/5.1/ref/templates/api/#django.template.Context><code>Context</code></a> in which the component is rendered.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code> <div class=doc-md-description> <p>Optional[str]: The filepath to the template.</p> </div> </li> </ul> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.inject class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">inject</span> <a href=#django_components.Component.inject class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>inject</span><span class=p>(</span><span class=n>key</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>default</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2897 target=_blank>See source code</a></p> <p>Use this method to retrieve the data that was passed to a <a href=../template_tags#provide><code>{% provide %}</code></a> tag with the corresponding key.</p> <p>To retrieve the data, <code>inject()</code> must be called inside a component that's inside the <a href=../template_tags#provide><code>{% provide %}</code></a> tag.</p> <p>You may also pass a default that will be used if the <a href=../template_tags#provide><code>{% provide %}</code></a> tag with given key was NOT found.</p> <p>This method is part of the <a href=../../concepts/fundamentals/render_api>Render API</a>, and raises an error if called from outside the rendering execution.</p> <p>Read more about <a href=../../concepts/advanced/provide_inject>Provide / Inject</a>.</p> <p><strong>Example:</strong></p> <p>Given this template: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>provide</span> <span class=s2>&quot;my_provide&quot;</span> <span class=nv>message</span><span class=o>=</span><span class=s2>&quot;hello&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
</code></pre></div></p> <p>And given this definition of "my_comp" component: <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;hi {{ message }}!&quot;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=n>data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;my_provide&quot;</span><span class=p>)</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=n>message</span> <span class=o>=</span> <span class=n>data</span><span class=o>.</span><span class=n>message</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;message&quot;</span><span class=p>:</span> <span class=n>message</span><span class=p>}</span>
</code></pre></div></p> <p>This renders into: <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a>hi hello!
</code></pre></div></p> <p>As the <code>{{ message }}</code> is taken from the "my_provide" provider.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.on_render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_render</span> <a href=#django_components.Component.on_render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_render</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.Template>Template</span></span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" SlotResult
module-attribute
(django_components.slots.SlotResult)" href=#django_components.SlotResult>SlotResult</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" OnRenderGenerator
module-attribute
(django_components.component.OnRenderGenerator)" href=#django_components.OnRenderGenerator>OnRenderGenerator</a></span><span class=p>,</span> <span class=kc>None</span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1921 target=_blank>See source code</a></p> <p>This method does the actual rendering.</p> <p>Read more about this hook in <a href=../../concepts/advanced/hooks/#on_render>Component hooks</a>.</p> <p>You can override this method to:</p> <ul> <li>Change what template gets rendered</li> <li>Modify the context</li> <li>Modify the rendered output after it has been rendered</li> <li>Handle errors</li> </ul> <p>The default implementation renders the component's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template>Template</a> with the given <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context>Context</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>if</span> <span class=n>template</span> <span class=ow>is</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=kc>None</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
</code></pre></div> <p>The <code>template</code> argument is <code>None</code> if the component has no template.</p> <p><strong>Modifying rendered template</strong></p> <p>To change what gets rendered, you can:</p> <ul> <li>Render a different template</li> <li>Render a component</li> <li>Return a different string or SafeString</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=k>return</span> <span class=s2>&quot;Hello&quot;</span>
</code></pre></div> <p><strong>Post-processing rendered template</strong></p> <p>To access the final output, you can <code>yield</code> the result instead of returning it.</p> <p>This will return a tuple of (rendered HTML, error). The error is <code>None</code> if the rendering succeeded.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>html</span><span class=p>,</span> <span class=n>error</span> <span class=o>=</span> <span class=k>yield</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>if</span> <span class=n>error</span> <span class=ow>is</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=c1># The rendering succeeded</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>return</span> <span class=n>html</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=c1># The rendering failed</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Error: </span><span class=si>{</span><span class=n>error</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
</code></pre></div> <p>At this point you can do 3 things:</p> <ol> <li> <p>Return a new HTML</p> <p>The new HTML will be used as the final output.</p> <p>If the original template raised an error, it will be ignored.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>html</span><span class=p>,</span> <span class=n>error</span> <span class=o>=</span> <span class=k>yield</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=k>return</span> <span class=s2>&quot;NEW HTML&quot;</span>
</code></pre></div> </li> <li> <p>Raise a new exception</p> <p>The new exception is what will bubble up from the component.</p> <p>The original HTML and original error will be ignored.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>html</span><span class=p>,</span> <span class=n>error</span> <span class=o>=</span> <span class=k>yield</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a> <span class=k>raise</span> <span class=ne>Exception</span><span class=p>(</span><span class=s2>&quot;Error message&quot;</span><span class=p>)</span>
</code></pre></div> </li> <li> <p>Return nothing (or <code>None</code>) to handle the result as usual</p> <p>If you don't raise an exception, and neither return a new HTML, then original HTML / error will be used:</p> <ul> <li>If rendering succeeded, the original HTML will be used as the final output.</li> <li>If rendering failed, the original error will be propagated.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=n>html</span><span class=p>,</span> <span class=n>error</span> <span class=o>=</span> <span class=k>yield</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=k>if</span> <span class=n>error</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=c1># The rendering failed</span>
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Error: </span><span class=si>{</span><span class=n>error</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
</code></pre></div> </li> </ol> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.on_render_after class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_render_after</span> <a href=#django_components.Component.on_render_after class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_render_after</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.Template>Template</span></span><span class=p>],</span> <span class=n>result</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>],</span> <span class=n>error</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/exceptions.html#Exception>Exception</a></span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" SlotResult
module-attribute
(django_components.slots.SlotResult)" href=#django_components.SlotResult>SlotResult</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2035 target=_blank>See source code</a></p> <p>Hook that runs when the component was fully rendered, including all its children.</p> <p>It receives the same arguments as <a href=../api#django_components.Component.on_render_before><code>on_render_before()</code></a>, plus the outcome of the rendering:</p> <ul> <li><code>result</code>: The rendered output of the component. <code>None</code> if the rendering failed.</li> <li><code>error</code>: The error that occurred during the rendering, or <code>None</code> if the rendering succeeded.</li> </ul> <p><a href=../api#django_components.Component.on_render_after><code>on_render_after()</code></a> behaves the same way as the second part of <a href=../api#django_components.Component.on_render><code>on_render()</code></a> (after the <code>yield</code>).</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>,</span> <span class=n>result</span><span class=p>,</span> <span class=n>error</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>if</span> <span class=n>error</span> <span class=ow>is</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=c1># The rendering succeeded</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>return</span> <span class=n>result</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=c1># The rendering failed</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Error: </span><span class=si>{</span><span class=n>error</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
</code></pre></div> <p>Same as <a href=../api#django_components.Component.on_render><code>on_render()</code></a>, you can return a new HTML, raise a new exception, or return nothing:</p> <ol> <li> <p>Return a new HTML</p> <p>The new HTML will be used as the final output.</p> <p>If the original template raised an error, it will be ignored.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>,</span> <span class=n>result</span><span class=p>,</span> <span class=n>error</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=k>return</span> <span class=s2>&quot;NEW HTML&quot;</span>
</code></pre></div> </li> <li> <p>Raise a new exception</p> <p>The new exception is what will bubble up from the component.</p> <p>The original HTML and original error will be ignored.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>,</span> <span class=n>result</span><span class=p>,</span> <span class=n>error</span><span class=p>):</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=k>raise</span> <span class=ne>Exception</span><span class=p>(</span><span class=s2>&quot;Error message&quot;</span><span class=p>)</span>
</code></pre></div> </li> <li> <p>Return nothing (or <code>None</code>) to handle the result as usual</p> <p>If you don't raise an exception, and neither return a new HTML, then original HTML / error will be used:</p> <ul> <li>If rendering succeeded, the original HTML will be used as the final output.</li> <li>If rendering failed, the original error will be propagated.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>,</span> <span class=n>result</span><span class=p>,</span> <span class=n>error</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=k>if</span> <span class=n>error</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=c1># The rendering failed</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Error: </span><span class=si>{</span><span class=n>error</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
</code></pre></div> </li> </ol> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.on_render_before class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_render_before</span> <a href=#django_components.Component.on_render_before class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_render_before</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.Template>Template</span></span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L1872 target=_blank>See source code</a></p> <p>Runs just before the component's template is rendered.</p> <p>It is called for every component, including nested ones, as part of the component render lifecycle.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>context</code></b> (<code><span title=django.template.context.Context>Context</span></code>) <div class=doc-md-description> <p>The Django <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context>Context</a> that will be used to render the component's template.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>template</code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<span title=django.template.base.Template>Template</span>]</code>) <div class=doc-md-description> <p>The Django <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template>Template</a> instance that will be rendered, or <code>None</code> if no template.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code>None</code> <div class=doc-md-description> <p>None. This hook is for side effects only.</p> </div> </li> </ul> <p><strong>Example:</strong></p> <p>You can use this hook to access the context or the template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Context</span><span class=p>,</span> <span class=n>Template</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=c1># Insert value into the Context</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>context</span><span class=p>[</span><span class=s2>&quot;from_on_before&quot;</span><span class=p>]</span> <span class=o>=</span> <span class=s2>&quot;:)&quot;</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>template</span><span class=p>,</span> <span class=n>Template</span><span class=p>)</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>If you want to pass data to the template, prefer using <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> instead of this hook.</p> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Do NOT modify the template in this hook. The template is reused across renders.</p> <p>Since this hook is called for every component, this means that the template would be modified every time a component is rendered.</p> </div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.Component.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>],</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>deps_strategy</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span> <span class=o>=</span> <span class=s1>&#39;document&#39;</span><span class=p>,</span> <span class=nb>type</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>render_dependencies</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span> <span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>outer_context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>registered_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L3060 target=_blank>See source code</a></p> <p>Render the component into a string. This is the equivalent of calling the <a href=../template_tags#component><code>{% component %}</code></a> tag.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Button</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;John&quot;</span><span class=p>],</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;surname&quot;</span><span class=p>:</span> <span class=s2>&quot;Doe&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;age&quot;</span><span class=p>:</span> <span class=mi>30</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>},</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=s2>&quot;i AM A SLOT&quot;</span><span class=p>,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>},</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=p>)</span>
</code></pre></div> <p><strong>Inputs:</strong></p> <ul> <li> <p><code>args</code> - Optional. A list of positional args for the component. This is the same as calling the component as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;button&quot;</span> <span class=nv>arg1</span> <span class=nv>arg2</span> <span class=p>...</span> <span class=cp>%}</span>
</code></pre></div> </li> <li> <p><code>kwargs</code> - Optional. A dictionary of keyword arguments for the component. This is the same as calling the component as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;button&quot;</span> <span class=nv>key1</span><span class=o>=</span><span class=nv>val1</span> <span class=nv>key2</span><span class=o>=</span><span class=nv>val2</span> <span class=p>...</span> <span class=cp>%}</span>
</code></pre></div> </li> <li> <p><code>slots</code> - Optional. A dictionary of slot fills. This is the same as passing <a href=../template_tags#fill><code>{% fill %}</code></a> tags to the component.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;button&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;content&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=x> Click me!</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>Dictionary keys are the slot names. Dictionary values are the slot fills.</p> <p>Slot fills can be strings, render functions, or <a href=../api/#django_components.Slot><code>Slot</code></a> instances:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=n>Button</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=s2>&quot;content&quot;</span><span class=p>:</span> <span class=s2>&quot;Click me!&quot;</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=s2>&quot;content2&quot;</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>&quot;Click me!&quot;</span><span class=p>,</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a> <span class=s2>&quot;content3&quot;</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>&quot;Click me!&quot;</span><span class=p>),</span>
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a> <span class=p>},</span>
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a><span class=p>)</span>
</code></pre></div> </li> <li> <p><code>context</code> - Optional. Plain dictionary or Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context>Context</a>. The context within which the component is rendered.</p> <p>When a component is rendered within a template with the <a href=../template_tags#component><code>{% component %}</code></a> tag, this will be set to the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context>Context</a> instance that is used for rendering the template.</p> <p>When you call <code>Component.render()</code> directly from Python, you can ignore this input most of the time. Instead use <code>args</code>, <code>kwargs</code>, and <code>slots</code> to pass data to the component.</p> <p>You can pass <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.RequestContext><code>RequestContext</code></a> to the <code>context</code> argument, so that the component will gain access to the request object and will use <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#using-requestcontext>context processors</a>. Read more on <a href=../../concepts/fundamentals/http_request>Working with HTTP requests</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=n>Button</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <span class=n>context</span><span class=o>=</span><span class=n>RequestContext</span><span class=p>(</span><span class=n>request</span><span class=p>),</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=p>)</span>
</code></pre></div> <p>For advanced use cases, you can use <code>context</code> argument to "pre-render" the component in Python, and then pass the rendered output as plain string to the template. With this, the inner component is rendered as if it was within the template with <a href=../template_tags#component><code>{% component %}</code></a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=k>def</span><span class=w> </span><span class=nf>render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=c1># Pass `context` to Icon component so it is rendered</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=c1># as if nested within Button.</span>
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=n>icon</span> <span class=o>=</span> <span class=n>Icon</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a> <span class=n>context</span><span class=o>=</span><span class=n>context</span><span class=p>,</span>
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;icon-name&quot;</span><span class=p>],</span>
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=n>deps_strategy</span><span class=o>=</span><span class=s2>&quot;ignore&quot;</span><span class=p>,</span>
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=p>)</span>
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a> <span class=c1># Update context with icon</span>
<a id=__codelineno-6-11 name=__codelineno-6-11 href=#__codelineno-6-11></a> <span class=k>with</span> <span class=n>context</span><span class=o>.</span><span class=n>update</span><span class=p>({</span><span class=s2>&quot;icon&quot;</span><span class=p>:</span> <span class=n>icon</span><span class=p>}):</span>
<a id=__codelineno-6-12 name=__codelineno-6-12 href=#__codelineno-6-12></a> <span class=k>return</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
</code></pre></div> <p>Whether the variables defined in <code>context</code> are available to the template depends on the <a href=../settings#django_components.app_settings.ComponentsSettings.context_behavior>context behavior mode</a>:</p> <ul> <li> <p>In <code>"django"</code> context behavior mode, the template will have access to the keys of this context.</p> </li> <li> <p>In <code>"isolated"</code> context behavior mode, the template will NOT have access to this context, and data MUST be passed via component's args and kwargs.</p> </li> </ul> </li> <li> <p><code>deps_strategy</code> - Optional. Configure how to handle JS and CSS dependencies. Read more about <a href=../../concepts/fundamentals/rendering_components#dependencies-rendering>Dependencies rendering</a>.</p> <p>There are six strategies:</p> <ul> <li><a href=../../concepts/advanced/rendering_js_css#document><code>"document"</code></a> (default)<ul> <li>Smartly inserts JS / CSS into placeholders or into <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> tags.</li> <li>Requires the HTML to be rendered in a JS-enabled browser.</li> <li>Inserts extra script for managing fragments.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#fragment><code>"fragment"</code></a><ul> <li>A lightweight HTML fragment to be inserted into a document with AJAX.</li> <li>Fragment will fetch its own JS / CSS dependencies when inserted into the page.</li> <li>Requires the HTML to be rendered in a JS-enabled browser.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#simple><code>"simple"</code></a><ul> <li>Smartly insert JS / CSS into placeholders or into <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#prepend><code>"prepend"</code></a><ul> <li>Insert JS / CSS before the rendered HTML.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#append><code>"append"</code></a><ul> <li>Insert JS / CSS after the rendered HTML.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../concepts/advanced/rendering_js_css#ignore><code>"ignore"</code></a><ul> <li>HTML is left as-is. You can still process it with a different strategy later with <a href=../api/#django_components.render_dependencies><code>render_dependencies()</code></a>.</li> <li>Used for inserting rendered HTML into other components.</li> </ul> </li> </ul> </li> <li> <p><code>request</code> - Optional. HTTPRequest object. Pass a request object directly to the component to apply <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context.update>context processors</a>.</p> <p>Read more about <a href=../../concepts/fundamentals/http_request>Working with HTTP requests</a>.</p> </li> </ul> <p><strong>Type hints:</strong></p> <p><code>Component.render()</code> is NOT typed. To add type hints, you can wrap the inputs in component's <a href=../api/#django_components.Component.Args><code>Args</code></a>, <a href=../api/#django_components.Component.Kwargs><code>Kwargs</code></a>, and <a href=../api/#django_components.Component.Slots><code>Slots</code></a> classes.</p> <p>Read more on <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span><span class=p>,</span> <span class=n>Optional</span>
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Slot</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a><span class=c1># Define the component with the types</span>
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a>
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a> <span class=n>surname</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a> <span class=n>age</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a>
<a id=__codelineno-7-13 name=__codelineno-7-13 href=#__codelineno-7-13></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-7-14 name=__codelineno-7-14 href=#__codelineno-7-14></a> <span class=n>my_slot</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotInput</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-7-15 name=__codelineno-7-15 href=#__codelineno-7-15></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-7-16 name=__codelineno-7-16 href=#__codelineno-7-16></a>
<a id=__codelineno-7-17 name=__codelineno-7-17 href=#__codelineno-7-17></a><span class=c1># Add type hints to the render call</span>
<a id=__codelineno-7-18 name=__codelineno-7-18 href=#__codelineno-7-18></a><span class=n>Button</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-7-19 name=__codelineno-7-19 href=#__codelineno-7-19></a> <span class=n>args</span><span class=o>=</span><span class=n>Button</span><span class=o>.</span><span class=n>Args</span><span class=p>(</span>
<a id=__codelineno-7-20 name=__codelineno-7-20 href=#__codelineno-7-20></a> <span class=n>name</span><span class=o>=</span><span class=s2>&quot;John&quot;</span><span class=p>,</span>
<a id=__codelineno-7-21 name=__codelineno-7-21 href=#__codelineno-7-21></a> <span class=p>),</span>
<a id=__codelineno-7-22 name=__codelineno-7-22 href=#__codelineno-7-22></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>Button</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>(</span>
<a id=__codelineno-7-23 name=__codelineno-7-23 href=#__codelineno-7-23></a> <span class=n>surname</span><span class=o>=</span><span class=s2>&quot;Doe&quot;</span><span class=p>,</span>
<a id=__codelineno-7-24 name=__codelineno-7-24 href=#__codelineno-7-24></a> <span class=n>age</span><span class=o>=</span><span class=mi>30</span><span class=p>,</span>
<a id=__codelineno-7-25 name=__codelineno-7-25 href=#__codelineno-7-25></a> <span class=p>),</span>
<a id=__codelineno-7-26 name=__codelineno-7-26 href=#__codelineno-7-26></a> <span class=n>slots</span><span class=o>=</span><span class=n>Button</span><span class=o>.</span><span class=n>Slots</span><span class=p>(</span>
<a id=__codelineno-7-27 name=__codelineno-7-27 href=#__codelineno-7-27></a> <span class=n>footer</span><span class=o>=</span><span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>&quot;Click me!&quot;</span><span class=p>),</span>
<a id=__codelineno-7-28 name=__codelineno-7-28 href=#__codelineno-7-28></a> <span class=p>),</span>
<a id=__codelineno-7-29 name=__codelineno-7-29 href=#__codelineno-7-29></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.Component.render_to_response class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render_to_response</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.Component.render_to_response class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render_to_response</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>],</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>deps_strategy</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span> <span class=o>=</span> <span class=s1>&#39;document&#39;</span><span class=p>,</span> <span class=nb>type</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>render_dependencies</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span> <span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>outer_context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>registered_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L2970 target=_blank>See source code</a></p> <p>Render the component and wrap the content in an HTTP response class.</p> <p><code>render_to_response()</code> takes the same inputs as <a href=../api/#django_components.Component.render><code>Component.render()</code></a>. See that method for more information.</p> <p>After the component is rendered, the HTTP response class is instantiated with the rendered content.</p> <p>Any additional kwargs are passed to the response class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Button</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;John&quot;</span><span class=p>],</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;surname&quot;</span><span class=p>:</span> <span class=s2>&quot;Doe&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;age&quot;</span><span class=p>:</span> <span class=mi>30</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>},</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=s2>&quot;i AM A SLOT&quot;</span><span class=p>,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>},</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=c1># HttpResponse kwargs</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>status</span><span class=o>=</span><span class=mi>201</span><span class=p>,</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=n>headers</span><span class=o>=</span><span class=p>{</span><span class=o>...</span><span class=p>},</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a><span class=p>)</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a><span class=c1># HttpResponse(content=..., status=201, headers=...)</span>
</code></pre></div> <p><strong>Custom response class:</strong></p> <p>You can set a custom response class on the component via <a href=../api/#django_components.Component.response_class><code>Component.response_class</code></a>. Defaults to <a href=https://docs.djangoproject.com/en/5.2/ref/request-response/#httpresponse-objects><code>django.http.HttpResponse</code></a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.http</span><span class=w> </span><span class=kn>import</span> <span class=n>HttpResponse</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyHttpResponse</span><span class=p>(</span><span class=n>HttpResponse</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=o>...</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=n>response_class</span> <span class=o>=</span> <span class=n>MyHttpResponse</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a><span class=n>response</span> <span class=o>=</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a><span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>response</span><span class=p>,</span> <span class=n>MyHttpResponse</span><span class=p>)</span>
</code></pre></div> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentCache class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentCache</span> <a href=#django_components.ComponentCache class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentCache</span><span class=p>(</span><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.extension.ExtensionComponentConfig</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/cache.py#L19 target=_blank>See source code</a></p> <p>The interface for <code>Component.Cache</code>.</p> <p>The fields of this class are used to configure the component caching.</p> <p>Read more about <a href=../../concepts/advanced/component_caching>Component caching</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Cache</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>enabled</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>ttl</span> <span class=o>=</span> <span class=mi>60</span> <span class=o>*</span> <span class=mi>60</span> <span class=o>*</span> <span class=mi>24</span> <span class=c1># 1 day</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>cache_name</span> <span class=o>=</span> <span class=s2>&quot;my_cache&quot;</span>
</code></pre></div> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_cache (django_components.ComponentCache.get_cache)" href=#django_components.ComponentCache.get_cache>get_cache</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_cache_key (django_components.ComponentCache.get_cache_key)" href=#django_components.ComponentCache.get_cache_key>get_cache_key</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get_entry (django_components.ComponentCache.get_entry)" href=#django_components.ComponentCache.get_entry>get_entry</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" hash (django_components.ComponentCache.hash)" href=#django_components.ComponentCache.hash>hash</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" hash_slots (django_components.ComponentCache.hash_slots)" href=#django_components.ComponentCache.hash_slots>hash_slots</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" set_entry (django_components.ComponentCache.set_entry)" href=#django_components.ComponentCache.set_entry>set_entry</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" cache_name
class-attribute
instance-attribute
(django_components.ComponentCache.cache_name)" href=#django_components.ComponentCache.cache_name>cache_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component
instance-attribute
(django_components.ComponentCache.component)" href=#django_components.ComponentCache.component>component</a></code></b> (<code><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_class
instance-attribute
(django_components.ComponentCache.component_class)" href=#django_components.ComponentCache.component_class>component_class</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_cls
instance-attribute
(django_components.ComponentCache.component_cls)" href=#django_components.ComponentCache.component_cls>component_cls</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" enabled
class-attribute
instance-attribute
(django_components.ComponentCache.enabled)" href=#django_components.ComponentCache.enabled>enabled</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" include_slots
class-attribute
instance-attribute
(django_components.ComponentCache.include_slots)" href=#django_components.ComponentCache.include_slots>include_slots</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" ttl
class-attribute
instance-attribute
(django_components.ComponentCache.ttl)" href=#django_components.ComponentCache.ttl>ttl</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#int>int</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentCache.cache_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">cache_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentCache.cache_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>cache_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/cache.py#L98 target=_blank>See source code</a></p> <p>The name of the cache to use. If <code>None</code>, the default cache will be used.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentCache.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentCache.component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span> <span class=o>=</span> <span class=n><span title=django_components.extension.ExtensionComponentConfig(component)>component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L269 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L258 target=_blank>See source code</a></p> <p>When a <a href=./#django_components.Component><code>Component</code></a> is instantiated, also the nested extension classes (such as <code>Component.View</code>) are instantiated, receiving the component instance as an argument.</p> <p>This attribute holds the owner <a href=./#django_components.Component><code>Component</code></a> instance that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentCache.component_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentCache.component_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_class</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L255 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentCache.component_cls class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_cls</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentCache.component_cls class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_cls</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L251 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentCache.enabled class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">enabled</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentCache.enabled class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>enabled</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>False</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/cache.py#L40 target=_blank>See source code</a></p> <p>Whether this Component should be cached. Defaults to <code>False</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentCache.include_slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">include_slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentCache.include_slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>include_slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>False</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/cache.py#L44 target=_blank>See source code</a></p> <p>Whether the slots should be hashed into the cache key.</p> <p>If enabled, the following two cases will be treated as different entries:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;mycomponent&quot;</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;foo&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> FILL ONE</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;mycomponent&quot;</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;foo&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=x> FILL TWO</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Passing slots as functions to cached components with <code>include_slots=True</code> will raise an error.</p> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Slot caching DOES NOT account for context variables within the <code>{% fill %}</code> tag.</p> <p>For example, the following two cases will be treated as the same entry:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>with</span> <span class=nv>my_var</span><span class=o>=</span><span class=s2>&quot;foo&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;mycomponent&quot;</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;foo&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>my_var</span> <span class=cp>}}</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a><span class=cp>{%</span> <span class=k>with</span> <span class=nv>my_var</span><span class=o>=</span><span class=s2>&quot;bar&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;mycomponent&quot;</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;bar&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a><span class=x> </span><span class=cp>{{</span> <span class=nv>my_var</span> <span class=cp>}}</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
</code></pre></div> <p>Currently it's impossible to capture used variables. This will be addressed in v2. Read more about it in <a href=https://github.com/django-components/django-components/issues/1164>https://github.com/django-components/django-components/issues/1164</a>.</p> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentCache.ttl class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">ttl</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentCache.ttl class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>ttl</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#int>int</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/cache.py#L88 target=_blank>See source code</a></p> <p>The time-to-live (TTL) in seconds, i.e. for how long should an entry be valid in the cache.</p> <ul> <li>If <code>&gt; 0</code>, the entries will be cached for the given number of seconds.</li> <li>If <code>-1</code>, the entries will be cached indefinitely.</li> <li>If <code>0</code>, the entries won't be cached.</li> <li>If <code>None</code>, the default TTL will be used.</li> </ul> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentCache.get_cache class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_cache</span> <a href=#django_components.ComponentCache.get_cache class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_cache</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=n><span title=django.core.cache.BaseCache>BaseCache</span></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentCache.get_cache_key class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_cache_key</span> <a href=#django_components.ComponentCache.get_cache_key class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_cache_key</span><span class=p>(</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentCache.get_entry class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get_entry</span> <a href=#django_components.ComponentCache.get_entry class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_entry</span><span class=p>(</span><span class=n>cache_key</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentCache.hash class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">hash</span> <a href=#django_components.ComponentCache.hash class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>hash</span><span class=p>(</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/cache.py#L126 target=_blank>See source code</a></p> <p>Defines how the input (both args and kwargs) is hashed into a cache key.</p> <p>By default, <code>hash()</code> serializes the input into a string. As such, the default implementation might NOT be suitable if you need to hash complex objects.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentCache.hash_slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">hash_slots</span> <a href=#django_components.ComponentCache.hash_slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>hash_slots</span><span class=p>(</span><span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" Slot
dataclass
(django_components.slots.Slot)" href=#django_components.Slot>Slot</a></span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentCache.set_entry class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">set_entry</span> <a href=#django_components.ComponentCache.set_entry class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>set_entry</span><span class=p>(</span><span class=n>cache_key</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>value</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentDebugHighlight class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentDebugHighlight</span> <a href=#django_components.ComponentDebugHighlight class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentDebugHighlight</span><span class=p>(</span><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.extension.ExtensionComponentConfig</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/debug_highlight.py#L63 target=_blank>See source code</a></p> <p>The interface for <code>Component.DebugHighlight</code>.</p> <p>The fields of this class are used to configure the component debug highlighting for this component and its direct slots.</p> <p>Read more about <a href=../../guides/other/troubleshooting#component-and-slot-highlighting>Component debug highlighting</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>DebugHighlight</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>highlight_components</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>highlight_slots</span> <span class=o>=</span> <span class=kc>True</span>
</code></pre></div> <p>To highlight ALL components and slots, set <a href=../../reference/settings/#django_components.app_settings.ComponentsSettings.extensions_defaults>extension defaults</a> in your settings:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentsSettings</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=n>extensions_defaults</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=s2>&quot;debug_highlight&quot;</span><span class=p>:</span> <span class=p>{</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=s2>&quot;highlight_components&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=s2>&quot;highlight_slots&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=p>},</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=p>},</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a><span class=p>)</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component
instance-attribute
(django_components.ComponentDebugHighlight.component)" href=#django_components.ComponentDebugHighlight.component>component</a></code></b> (<code><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_class
instance-attribute
(django_components.ComponentDebugHighlight.component_class)" href=#django_components.ComponentDebugHighlight.component_class>component_class</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_cls
instance-attribute
(django_components.ComponentDebugHighlight.component_cls)" href=#django_components.ComponentDebugHighlight.component_cls>component_cls</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" highlight_components
class-attribute
instance-attribute
(django_components.ComponentDebugHighlight.highlight_components)" href=#django_components.ComponentDebugHighlight.highlight_components>highlight_components</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" highlight_slots
class-attribute
instance-attribute
(django_components.ComponentDebugHighlight.highlight_slots)" href=#django_components.ComponentDebugHighlight.highlight_slots>highlight_slots</a></code></b> <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDebugHighlight.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDebugHighlight.component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span> <span class=o>=</span> <span class=n><span title=django_components.extension.ExtensionComponentConfig(component)>component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L269 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L258 target=_blank>See source code</a></p> <p>When a <a href=./#django_components.Component><code>Component</code></a> is instantiated, also the nested extension classes (such as <code>Component.View</code>) are instantiated, receiving the component instance as an argument.</p> <p>This attribute holds the owner <a href=./#django_components.Component><code>Component</code></a> instance that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDebugHighlight.component_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDebugHighlight.component_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_class</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L255 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDebugHighlight.component_cls class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_cls</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDebugHighlight.component_cls class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_cls</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L251 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDebugHighlight.highlight_components class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">highlight_components</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDebugHighlight.highlight_components class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>highlight_components</span> <span class=o>=</span> <span class=n><span title=django_components.extensions.debug_highlight.HighlightComponentsDescriptor>HighlightComponentsDescriptor</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/debug_highlight.py#L103 target=_blank>See source code</a></p> <p>Whether to highlight this component in the rendered output.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDebugHighlight.highlight_slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">highlight_slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDebugHighlight.highlight_slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>highlight_slots</span> <span class=o>=</span> <span class=n><span title=django_components.extensions.debug_highlight.HighlightSlotsDescriptor>HighlightSlotsDescriptor</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/debug_highlight.py#L105 target=_blank>See source code</a></p> <p>Whether to highlight slots of this component in the rendered output.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentDefaults class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentDefaults</span> <a href=#django_components.ComponentDefaults class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentDefaults</span><span class=p>(</span><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.extension.ExtensionComponentConfig</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/defaults.py#L128 target=_blank>See source code</a></p> <p>The interface for <code>Component.Defaults</code>.</p> <p>The fields of this class are used to set default values for the component's kwargs.</p> <p>Read more about <a href=../../concepts/fundamentals/component_defaults>Component defaults</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Default</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Defaults</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>position</span> <span class=o>=</span> <span class=s2>&quot;left&quot;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>selected_items</span> <span class=o>=</span> <span class=n>Default</span><span class=p>(</span><span class=k>lambda</span><span class=p>:</span> <span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>])</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component
instance-attribute
(django_components.ComponentDefaults.component)" href=#django_components.ComponentDefaults.component>component</a></code></b> (<code><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_class
instance-attribute
(django_components.ComponentDefaults.component_class)" href=#django_components.ComponentDefaults.component_class>component_class</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_cls
instance-attribute
(django_components.ComponentDefaults.component_cls)" href=#django_components.ComponentDefaults.component_cls>component_cls</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDefaults.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDefaults.component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span> <span class=o>=</span> <span class=n><span title=django_components.extension.ExtensionComponentConfig(component)>component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L269 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L258 target=_blank>See source code</a></p> <p>When a <a href=./#django_components.Component><code>Component</code></a> is instantiated, also the nested extension classes (such as <code>Component.View</code>) are instantiated, receiving the component instance as an argument.</p> <p>This attribute holds the owner <a href=./#django_components.Component><code>Component</code></a> instance that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDefaults.component_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDefaults.component_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_class</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L255 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentDefaults.component_cls class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_cls</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentDefaults.component_cls class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_cls</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L251 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentExtension class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentExtension</span> <a href=#django_components.ComponentExtension class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>object</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L292 target=_blank>See source code</a></p> <p>Base class for all extensions.</p> <p>Read more on <a href=../../concepts/advanced/extensions/ >Extensions</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>ExampleExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>&quot;example&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=c1># Component-level behavior and settings. User will be able to override</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># the attributes and methods defined here on the component classes.</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>class</span><span class=w> </span><span class=nc>ComponentConfig</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=o>.</span><span class=n>ComponentConfig</span><span class=p>):</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>foo</span> <span class=o>=</span> <span class=s2>&quot;1&quot;</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>bar</span> <span class=o>=</span> <span class=s2>&quot;2&quot;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>def</span><span class=w> </span><span class=nf>baz</span><span class=p>(</span><span class=bp>cls</span><span class=p>):</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=k>return</span> <span class=s2>&quot;3&quot;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=c1># URLs</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=n>urls</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=n>URLRoute</span><span class=p>(</span><span class=n>path</span><span class=o>=</span><span class=s2>&quot;dummy-view/&quot;</span><span class=p>,</span> <span class=n>handler</span><span class=o>=</span><span class=n>dummy_view</span><span class=p>,</span> <span class=n>name</span><span class=o>=</span><span class=s2>&quot;dummy&quot;</span><span class=p>),</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=n>URLRoute</span><span class=p>(</span><span class=n>path</span><span class=o>=</span><span class=s2>&quot;dummy-view-2/&lt;int:id&gt;/&lt;str:name&gt;/&quot;</span><span class=p>,</span> <span class=n>handler</span><span class=o>=</span><span class=n>dummy_view_2</span><span class=p>,</span> <span class=n>name</span><span class=o>=</span><span class=s2>&quot;dummy-2&quot;</span><span class=p>),</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a> <span class=p>]</span>
<a id=__codelineno-0-18 name=__codelineno-0-18 href=#__codelineno-0-18></a>
<a id=__codelineno-0-19 name=__codelineno-0-19 href=#__codelineno-0-19></a> <span class=c1># Commands</span>
<a id=__codelineno-0-20 name=__codelineno-0-20 href=#__codelineno-0-20></a> <span class=n>commands</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-21 name=__codelineno-0-21 href=#__codelineno-0-21></a> <span class=n>HelloWorldCommand</span><span class=p>,</span>
<a id=__codelineno-0-22 name=__codelineno-0-22 href=#__codelineno-0-22></a> <span class=p>]</span>
<a id=__codelineno-0-23 name=__codelineno-0-23 href=#__codelineno-0-23></a>
<a id=__codelineno-0-24 name=__codelineno-0-24 href=#__codelineno-0-24></a> <span class=c1># Hooks</span>
<a id=__codelineno-0-25 name=__codelineno-0-25 href=#__codelineno-0-25></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_class_created</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentClassCreatedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-26 name=__codelineno-0-26 href=#__codelineno-0-26></a> <span class=nb>print</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=vm>__name__</span><span class=p>)</span>
<a id=__codelineno-0-27 name=__codelineno-0-27 href=#__codelineno-0-27></a>
<a id=__codelineno-0-28 name=__codelineno-0-28 href=#__codelineno-0-28></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_class_deleted</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentClassDeletedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-29 name=__codelineno-0-29 href=#__codelineno-0-29></a> <span class=nb>print</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=vm>__name__</span><span class=p>)</span>
</code></pre></div> <p>Which users then can override on a per-component basis. E.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Example</span><span class=p>:</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=n>foo</span> <span class=o>=</span> <span class=s2>&quot;overridden&quot;</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>def</span><span class=w> </span><span class=nf>baz</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>return</span> <span class=s2>&quot;overridden baz&quot;</span>
</code></pre></div> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_component_class_created (django_components.ComponentExtension.on_component_class_created)" href=#django_components.ComponentExtension.on_component_class_created>on_component_class_created</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_component_class_deleted (django_components.ComponentExtension.on_component_class_deleted)" href=#django_components.ComponentExtension.on_component_class_deleted>on_component_class_deleted</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_component_data (django_components.ComponentExtension.on_component_data)" href=#django_components.ComponentExtension.on_component_data>on_component_data</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_component_input (django_components.ComponentExtension.on_component_input)" href=#django_components.ComponentExtension.on_component_input>on_component_input</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_component_registered (django_components.ComponentExtension.on_component_registered)" href=#django_components.ComponentExtension.on_component_registered>on_component_registered</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_component_rendered (django_components.ComponentExtension.on_component_rendered)" href=#django_components.ComponentExtension.on_component_rendered>on_component_rendered</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_component_unregistered (django_components.ComponentExtension.on_component_unregistered)" href=#django_components.ComponentExtension.on_component_unregistered>on_component_unregistered</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_css_loaded (django_components.ComponentExtension.on_css_loaded)" href=#django_components.ComponentExtension.on_css_loaded>on_css_loaded</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_js_loaded (django_components.ComponentExtension.on_js_loaded)" href=#django_components.ComponentExtension.on_js_loaded>on_js_loaded</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_registry_created (django_components.ComponentExtension.on_registry_created)" href=#django_components.ComponentExtension.on_registry_created>on_registry_created</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_registry_deleted (django_components.ComponentExtension.on_registry_deleted)" href=#django_components.ComponentExtension.on_registry_deleted>on_registry_deleted</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_slot_rendered (django_components.ComponentExtension.on_slot_rendered)" href=#django_components.ComponentExtension.on_slot_rendered>on_slot_rendered</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_template_compiled (django_components.ComponentExtension.on_template_compiled)" href=#django_components.ComponentExtension.on_template_compiled>on_template_compiled</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" on_template_loaded (django_components.ComponentExtension.on_template_loaded)" href=#django_components.ComponentExtension.on_template_loaded>on_template_loaded</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" ComponentConfig
class-attribute
(django_components.ComponentExtension.ComponentConfig)" href=#django_components.ComponentExtension.ComponentConfig>ComponentConfig</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ExtensionComponentConfig (django_components.extension.ExtensionComponentConfig)" href=#django_components.ExtensionComponentConfig>ExtensionComponentConfig</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" class_name
class-attribute
(django_components.ComponentExtension.class_name)" href=#django_components.ComponentExtension.class_name>class_name</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" commands
class-attribute
(django_components.ComponentExtension.commands)" href=#django_components.ComponentExtension.commands>commands</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ComponentCommand (django_components.util.command.ComponentCommand)" href=../extension_commands/#django_components.ComponentCommand>ComponentCommand</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" name
class-attribute
(django_components.ComponentExtension.name)" href=#django_components.ComponentExtension.name>name</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" urls
class-attribute
(django_components.ComponentExtension.urls)" href=#django_components.ComponentExtension.urls>urls</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-internal" title=" URLRoute
dataclass
(django_components.util.routing.URLRoute)" href=../extension_urls/#django_components.URLRoute>URLRoute</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentExtension.ComponentConfig class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">ComponentConfig</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.ComponentExtension.ComponentConfig class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>ComponentConfig</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ExtensionComponentConfig (django_components.extension.ExtensionComponentConfig)" href=#django_components.ExtensionComponentConfig>ExtensionComponentConfig</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-internal" title=" ExtensionComponentConfig (django_components.extension.ExtensionComponentConfig)" href=#django_components.ExtensionComponentConfig>ExtensionComponentConfig</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L420 target=_blank>See source code</a></p> <p>Base class that the "component-level" extension config nested within a <a href=./#django_components.Component><code>Component</code></a> class will inherit from.</p> <p>This is where you can define new methods and attributes that will be available to the component instance.</p> <p>Background:</p> <p>The extension may add new features to the <a href=./#django_components.Component><code>Component</code></a> class by allowing users to define and access a nested class in the <a href=./#django_components.Component><code>Component</code></a> class. E.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=o>...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;my_extension&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>my_extension</span><span class=o>.</span><span class=n>do_something</span><span class=p>(),</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=p>}</span>
</code></pre></div> <p>When rendering a component, the nested extension class will be set as a subclass of <code>ComponentConfig</code>. So it will be same as if the user had directly inherited from extension's <code>ComponentConfig</code>. E.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=o>.</span><span class=n>ComponentConfig</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=o>...</span>
</code></pre></div> <p>This setting decides what the extension class will inherit from.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentExtension.class_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">class_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.ComponentExtension.class_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>class_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L383 target=_blank>See source code</a></p> <p>Name of the extension class.</p> <p>By default, this is set automatically at class creation. The class name is the same as the <a href=./#django_components.ComponentExtension.name><code>name</code></a> attribute, but with snake_case converted to PascalCase.</p> <p>So if the extension name is <code>"my_extension"</code>, then the extension class name will be <code>"MyExtension"</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>:</span> <span class=c1># &lt;--- This is the extension class</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=o>...</span>
</code></pre></div> <p>To customize the class name, you can manually set the <code>class_name</code> attribute.</p> <p>The class name must be a valid Python identifier.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyExt</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>&quot;my_extension&quot;</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=n>class_name</span> <span class=o>=</span> <span class=s2>&quot;MyCustomExtension&quot;</span>
</code></pre></div> <p>This will make the extension class name <code>"MyCustomExtension"</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>class</span><span class=w> </span><span class=nc>MyCustomExtension</span><span class=p>:</span> <span class=c1># &lt;--- This is the extension class</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=o>...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentExtension.commands class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">commands</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.ComponentExtension.commands class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>commands</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentCommand (django_components.util.command.ComponentCommand)" href=../extension_commands/#django_components.ComponentCommand>ComponentCommand</a></span><span class=p>]]</span> <span class=o>=</span> <span class=p>[]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L458 target=_blank>See source code</a></p> <p>List of commands that can be run by the extension.</p> <p>These commands will be available to the user as <code>components ext run &lt;extension&gt; &lt;command&gt;</code>.</p> <p>Commands are defined as subclasses of <a href=../extension_commands/#django_components.ComponentCommand><code>ComponentCommand</code></a>.</p> <p><strong>Example:</strong></p> <p>This example defines an extension with a command that prints "Hello world". To run the command, the user would run <code>components ext run hello_world hello</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentCommand</span><span class=p>,</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>CommandArg</span><span class=p>,</span> <span class=n>CommandArgGroup</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>HelloWorldCommand</span><span class=p>(</span><span class=n>ComponentCommand</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>&quot;hello&quot;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>help</span> <span class=o>=</span> <span class=s2>&quot;Hello world command.&quot;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=c1># Allow to pass flags `--foo`, `--bar` and `--baz`.</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=c1># Argument parsing is managed by `argparse`.</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=n>arguments</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>CommandArg</span><span class=p>(</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=s2>&quot;--foo&quot;</span><span class=p>,</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=n>help</span><span class=o>=</span><span class=s2>&quot;Foo description.&quot;</span><span class=p>,</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=p>),</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=c1># When printing the command help message, `bar` and `baz`</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=c1># will be grouped under &quot;group bar&quot;.</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=n>CommandArgGroup</span><span class=p>(</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a> <span class=n>title</span><span class=o>=</span><span class=s2>&quot;group bar&quot;</span><span class=p>,</span>
<a id=__codelineno-0-18 name=__codelineno-0-18 href=#__codelineno-0-18></a> <span class=n>description</span><span class=o>=</span><span class=s2>&quot;Group description.&quot;</span><span class=p>,</span>
<a id=__codelineno-0-19 name=__codelineno-0-19 href=#__codelineno-0-19></a> <span class=n>arguments</span><span class=o>=</span><span class=p>[</span>
<a id=__codelineno-0-20 name=__codelineno-0-20 href=#__codelineno-0-20></a> <span class=n>CommandArg</span><span class=p>(</span>
<a id=__codelineno-0-21 name=__codelineno-0-21 href=#__codelineno-0-21></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=s2>&quot;--bar&quot;</span><span class=p>,</span>
<a id=__codelineno-0-22 name=__codelineno-0-22 href=#__codelineno-0-22></a> <span class=n>help</span><span class=o>=</span><span class=s2>&quot;Bar description.&quot;</span><span class=p>,</span>
<a id=__codelineno-0-23 name=__codelineno-0-23 href=#__codelineno-0-23></a> <span class=p>),</span>
<a id=__codelineno-0-24 name=__codelineno-0-24 href=#__codelineno-0-24></a> <span class=n>CommandArg</span><span class=p>(</span>
<a id=__codelineno-0-25 name=__codelineno-0-25 href=#__codelineno-0-25></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=s2>&quot;--baz&quot;</span><span class=p>,</span>
<a id=__codelineno-0-26 name=__codelineno-0-26 href=#__codelineno-0-26></a> <span class=n>help</span><span class=o>=</span><span class=s2>&quot;Baz description.&quot;</span><span class=p>,</span>
<a id=__codelineno-0-27 name=__codelineno-0-27 href=#__codelineno-0-27></a> <span class=p>),</span>
<a id=__codelineno-0-28 name=__codelineno-0-28 href=#__codelineno-0-28></a> <span class=p>],</span>
<a id=__codelineno-0-29 name=__codelineno-0-29 href=#__codelineno-0-29></a> <span class=p>),</span>
<a id=__codelineno-0-30 name=__codelineno-0-30 href=#__codelineno-0-30></a> <span class=p>]</span>
<a id=__codelineno-0-31 name=__codelineno-0-31 href=#__codelineno-0-31></a>
<a id=__codelineno-0-32 name=__codelineno-0-32 href=#__codelineno-0-32></a> <span class=c1># Callback that receives the parsed arguments and options.</span>
<a id=__codelineno-0-33 name=__codelineno-0-33 href=#__codelineno-0-33></a> <span class=k>def</span><span class=w> </span><span class=nf>handle</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
<a id=__codelineno-0-34 name=__codelineno-0-34 href=#__codelineno-0-34></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;HelloWorldCommand.handle: args=</span><span class=si>{</span><span class=n>args</span><span class=si>}</span><span class=s2>, kwargs=</span><span class=si>{</span><span class=n>kwargs</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
<a id=__codelineno-0-35 name=__codelineno-0-35 href=#__codelineno-0-35></a>
<a id=__codelineno-0-36 name=__codelineno-0-36 href=#__codelineno-0-36></a><span class=c1># Associate the command with the extension</span>
<a id=__codelineno-0-37 name=__codelineno-0-37 href=#__codelineno-0-37></a><span class=k>class</span><span class=w> </span><span class=nc>HelloWorldExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-38 name=__codelineno-0-38 href=#__codelineno-0-38></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>&quot;hello_world&quot;</span>
<a id=__codelineno-0-39 name=__codelineno-0-39 href=#__codelineno-0-39></a>
<a id=__codelineno-0-40 name=__codelineno-0-40 href=#__codelineno-0-40></a> <span class=n>commands</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-41 name=__codelineno-0-41 href=#__codelineno-0-41></a> <span class=n>HelloWorldCommand</span><span class=p>,</span>
<a id=__codelineno-0-42 name=__codelineno-0-42 href=#__codelineno-0-42></a> <span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentExtension.name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.ComponentExtension.name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L348 target=_blank>See source code</a></p> <p>Name of the extension.</p> <p>Name must be lowercase, and must be a valid Python identifier (e.g. <code>"my_extension"</code>).</p> <p>The extension may add new features to the <a href=./#django_components.Component><code>Component</code></a> class by allowing users to define and access a nested class in the <a href=./#django_components.Component><code>Component</code></a> class.</p> <p>The extension name determines the name of the nested class in the <a href=./#django_components.Component><code>Component</code></a> class, and the attribute under which the extension will be accessible.</p> <p>E.g. if the extension name is <code>"my_extension"</code>, then the nested class in the <a href=./#django_components.Component><code>Component</code></a> class will be <code>MyExtension</code>, and the extension will be accessible as <code>MyComp.my_extension</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=o>...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;my_extension&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>my_extension</span><span class=o>.</span><span class=n>do_something</span><span class=p>(),</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=p>}</span>
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>The extension class name can be customized by setting the <a href=./#django_components.ComponentExtension.class_name><code>class_name</code></a> attribute.</p> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentExtension.urls class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">urls</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.ComponentExtension.urls class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>urls</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" URLRoute
dataclass
(django_components.util.routing.URLRoute)" href=../extension_urls/#django_components.URLRoute>URLRoute</a></span><span class=p>]</span> <span class=o>=</span> <span class=p>[]</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_component_class_created class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_component_class_created</span> <a href=#django_components.ComponentExtension.on_component_class_created class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_component_class_created</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnComponentClassCreatedContext (django_components.extension.OnComponentClassCreatedContext)" href=../extension_hooks/#django_components.extension.OnComponentClassCreatedContext>OnComponentClassCreatedContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L537 target=_blank>See source code</a></p> <p>Called when a new <a href=./#django_components.Component><code>Component</code></a> class is created.</p> <p>This hook is called after the <a href=./#django_components.Component><code>Component</code></a> class is fully defined but before it's registered.</p> <p>Use this hook to perform any initialization or validation of the <a href=./#django_components.Component><code>Component</code></a> class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentClassCreatedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_class_created</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentClassCreatedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Add a new attribute to the Component class</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=n>my_attr</span> <span class=o>=</span> <span class=s2>&quot;my_value&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_component_class_deleted class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_component_class_deleted</span> <a href=#django_components.ComponentExtension.on_component_class_deleted class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_component_class_deleted</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnComponentClassDeletedContext (django_components.extension.OnComponentClassDeletedContext)" href=../extension_hooks/#django_components.extension.OnComponentClassDeletedContext>OnComponentClassDeletedContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L559 target=_blank>See source code</a></p> <p>Called when a <a href=./#django_components.Component><code>Component</code></a> class is being deleted.</p> <p>This hook is called before the <a href=./#django_components.Component><code>Component</code></a> class is deleted from memory.</p> <p>Use this hook to perform any cleanup related to the <a href=./#django_components.Component><code>Component</code></a> class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentClassDeletedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_class_deleted</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentClassDeletedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Remove Component class from the extension&#39;s cache on deletion</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=bp>self</span><span class=o>.</span><span class=n>cache</span><span class=o>.</span><span class=n>pop</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=p>,</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_component_data class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_component_data</span> <a href=#django_components.ComponentExtension.on_component_data class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_component_data</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnComponentDataContext (django_components.extension.OnComponentDataContext)" href=../extension_hooks/#django_components.extension.OnComponentDataContext>OnComponentDataContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L710 target=_blank>See source code</a></p> <p>Called when a <a href=./#django_components.Component><code>Component</code></a> was triggered to render, after a component's context and data methods have been processed.</p> <p>This hook is called after <a href=./#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>, <a href=./#django_components.Component.get_js_data><code>Component.get_js_data()</code></a> and <a href=./#django_components.Component.get_css_data><code>Component.get_css_data()</code></a>.</p> <p>This hook runs after <a href=./#django_components.ComponentExtension.on_component_input><code>on_component_input</code></a>.</p> <p>Use this hook to modify or validate the component's data before rendering.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentDataContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentDataContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Add extra template variable to all components when they are rendered</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>ctx</span><span class=o>.</span><span class=n>template_data</span><span class=p>[</span><span class=s2>&quot;my_template_var&quot;</span><span class=p>]</span> <span class=o>=</span> <span class=s2>&quot;my_value&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_component_input class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_component_input</span> <a href=#django_components.ComponentExtension.on_component_input class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_component_input</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnComponentInputContext (django_components.extension.OnComponentInputContext)" href=../extension_hooks/#django_components.extension.OnComponentInputContext>OnComponentInputContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L664 target=_blank>See source code</a></p> <p>Called when a <a href=./#django_components.Component><code>Component</code></a> was triggered to render, but before a component's context and data methods are invoked.</p> <p>Use this hook to modify or validate component inputs before they're processed.</p> <p>This is the first hook that is called when rendering a component. As such this hook is called before <a href=./#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>, <a href=./#django_components.Component.get_js_data><code>Component.get_js_data()</code></a>, and <a href=./#django_components.Component.get_css_data><code>Component.get_css_data()</code></a> methods, and the <a href=../extension_hooks/#django_components.extension.ComponentExtension.on_component_data><code>on_component_data</code></a> hook.</p> <p>This hook also allows to skip the rendering of a component altogether. If the hook returns a non-null value, this value will be used instead of rendering the component.</p> <p>You can use this to implement a caching mechanism for components, or define components that will be rendered conditionally.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentInputContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_input</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentInputContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Add extra kwarg to all components when they are rendered</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>ctx</span><span class=o>.</span><span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;my_input&quot;</span><span class=p>]</span> <span class=o>=</span> <span class=s2>&quot;my_value&quot;</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>In this hook, the components' inputs are still mutable.</p> <p>As such, if a component defines <a href=./#django_components.Component.Args><code>Args</code></a>, <a href=./#django_components.Component.Kwargs><code>Kwargs</code></a>, <a href=./#django_components.Component.Slots><code>Slots</code></a> types, these types are NOT yet instantiated.</p> <p>Instead, component fields like <a href=./#django_components.Component.args><code>Component.args</code></a>, <a href=./#django_components.Component.kwargs><code>Component.kwargs</code></a>, <a href=./#django_components.Component.slots><code>Component.slots</code></a> are plain <code>list</code> / <code>dict</code> objects.</p> </div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_component_registered class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_component_registered</span> <a href=#django_components.ComponentExtension.on_component_registered class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_component_registered</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnComponentRegisteredContext (django_components.extension.OnComponentRegisteredContext)" href=../extension_hooks/#django_components.extension.OnComponentRegisteredContext>OnComponentRegisteredContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L622 target=_blank>See source code</a></p> <p>Called when a <a href=./#django_components.Component><code>Component</code></a> class is registered with a <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a>.</p> <p>This hook is called after a <a href=./#django_components.Component><code>Component</code></a> class is successfully registered.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentRegisteredContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_registered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentRegisteredContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Component </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=si>}</span><span class=s2> registered to </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>registry</span><span class=si>}</span><span class=s2> as &#39;</span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>&#39;&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_component_rendered class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_component_rendered</span> <a href=#django_components.ComponentExtension.on_component_rendered class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_component_rendered</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><span title=django_components.extension.OnComponentRenderedContext>OnComponentRenderedContext</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L736 target=_blank>See source code</a></p> <p>Called when a <a href=./#django_components.Component><code>Component</code></a> was rendered, including all its child components.</p> <p>Use this hook to access or post-process the component's rendered output.</p> <p>This hook works similarly to <a href=./#django_components.Component.on_render_after><code>Component.on_render_after()</code></a>:</p> <ol> <li> <p>To modify the output, return a new string from this hook. The original output or error will be ignored.</p> </li> <li> <p>To cause this component to return a new error, raise that error. The original output and error will be ignored.</p> </li> <li> <p>If you neither raise nor return string, the original output or error will be used.</p> </li> </ol> <p><strong>Examples:</strong></p> <p>Change the final output of a component:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentRenderedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_rendered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentRenderedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Append a comment to the component&#39;s rendered output</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>result</span> <span class=o>+</span> <span class=s2>&quot;&lt;!-- MyExtension comment --&gt;&quot;</span>
</code></pre></div> <p>Cause the component to raise a new exception:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentRenderedContext</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_rendered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentRenderedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=c1># Raise a new exception</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>raise</span> <span class=ne>Exception</span><span class=p>(</span><span class=s2>&quot;Error message&quot;</span><span class=p>)</span>
</code></pre></div> <p>Return nothing (or <code>None</code>) to handle the result as usual:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentRenderedContext</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_rendered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentRenderedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>if</span> <span class=n>ctx</span><span class=o>.</span><span class=n>error</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=c1># The component raised an exception</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Error: </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>error</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=c1># The component rendered successfully</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Result: </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>result</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_component_unregistered class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_component_unregistered</span> <a href=#django_components.ComponentExtension.on_component_unregistered class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_component_unregistered</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnComponentUnregisteredContext (django_components.extension.OnComponentUnregisteredContext)" href=../extension_hooks/#django_components.extension.OnComponentUnregisteredContext>OnComponentUnregisteredContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L641 target=_blank>See source code</a></p> <p>Called when a <a href=./#django_components.Component><code>Component</code></a> class is unregistered from a <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a>.</p> <p>This hook is called after a <a href=./#django_components.Component><code>Component</code></a> class is removed from the registry.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentUnregisteredContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_unregistered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentUnregisteredContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Component </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=si>}</span><span class=s2> unregistered from </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>registry</span><span class=si>}</span><span class=s2> as &#39;</span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>&#39;&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_css_loaded class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_css_loaded</span> <a href=#django_components.ComponentExtension.on_css_loaded class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_css_loaded</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><span title=django_components.extension.OnCssLoadedContext>OnCssLoadedContext</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L843 target=_blank>See source code</a></p> <p>Called when a Component's CSS is loaded as a string.</p> <p>This hook runs only once per <a href=./#django_components.Component><code>Component</code></a> class and works for both <a href=./#django_components.Component.css><code>Component.css</code></a> and <a href=./#django_components.Component.css_file><code>Component.css_file</code></a>.</p> <p>Use this hook to read or modify the CSS.</p> <p>To modify the CSS, return a new string from this hook.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnCssLoadedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_css_loaded</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnCssLoadedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Modify the CSS</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>content</span><span class=o>.</span><span class=n>replace</span><span class=p>(</span><span class=s2>&quot;Hello&quot;</span><span class=p>,</span> <span class=s2>&quot;Hi&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_js_loaded class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_js_loaded</span> <a href=#django_components.ComponentExtension.on_js_loaded class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_js_loaded</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><span title=django_components.extension.OnJsLoadedContext>OnJsLoadedContext</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L867 target=_blank>See source code</a></p> <p>Called when a Component's JS is loaded as a string.</p> <p>This hook runs only once per <a href=./#django_components.Component><code>Component</code></a> class and works for both <a href=./#django_components.Component.js><code>Component.js</code></a> and <a href=./#django_components.Component.js_file><code>Component.js_file</code></a>.</p> <p>Use this hook to read or modify the JS.</p> <p>To modify the JS, return a new string from this hook.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnCssLoadedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_js_loaded</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnJsLoadedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Modify the JS</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>content</span><span class=o>.</span><span class=n>replace</span><span class=p>(</span><span class=s2>&quot;Hello&quot;</span><span class=p>,</span> <span class=s2>&quot;Hi&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_registry_created class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_registry_created</span> <a href=#django_components.ComponentExtension.on_registry_created class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_registry_created</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnRegistryCreatedContext (django_components.extension.OnRegistryCreatedContext)" href=../extension_hooks/#django_components.extension.OnRegistryCreatedContext>OnRegistryCreatedContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L580 target=_blank>See source code</a></p> <p>Called when a new <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a> is created.</p> <p>This hook is called after a new <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a> instance is initialized.</p> <p>Use this hook to perform any initialization needed for the registry.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnRegistryCreatedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_registry_created</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnRegistryCreatedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Add a new attribute to the registry</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>ctx</span><span class=o>.</span><span class=n>registry</span><span class=o>.</span><span class=n>my_attr</span> <span class=o>=</span> <span class=s2>&quot;my_value&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_registry_deleted class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_registry_deleted</span> <a href=#django_components.ComponentExtension.on_registry_deleted class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_registry_deleted</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" OnRegistryDeletedContext (django_components.extension.OnRegistryDeletedContext)" href=../extension_hooks/#django_components.extension.OnRegistryDeletedContext>OnRegistryDeletedContext</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L601 target=_blank>See source code</a></p> <p>Called when a <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a> is being deleted.</p> <p>This hook is called before a <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a> instance is deleted.</p> <p>Use this hook to perform any cleanup related to the registry.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnRegistryDeletedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_registry_deleted</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnRegistryDeletedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Remove registry from the extension&#39;s cache on deletion</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=bp>self</span><span class=o>.</span><span class=n>cache</span><span class=o>.</span><span class=n>pop</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>registry</span><span class=p>,</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_slot_rendered class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_slot_rendered</span> <a href=#django_components.ComponentExtension.on_slot_rendered class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_slot_rendered</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><span title=django_components.extension.OnSlotRenderedContext>OnSlotRenderedContext</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L895 target=_blank>See source code</a></p> <p>Called when a <a href=../template_tags/#slot><code>{% slot %}</code></a> tag was rendered.</p> <p>Use this hook to access or post-process the slot's rendered output.</p> <p>To modify the output, return a new string from this hook.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnSlotRenderedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_slot_rendered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnSlotRenderedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Append a comment to the slot&#39;s rendered output</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>result</span> <span class=o>+</span> <span class=s2>&quot;&lt;!-- MyExtension comment --&gt;&quot;</span>
</code></pre></div> <p><strong>Access slot metadata:</strong></p> <p>You can access the <a href=../template_tags/#slot><code>{% slot %}</code> tag</a> node (<a href=./#django_components.SlotNode><code>SlotNode</code></a>) and its metadata using <code>ctx.slot_node</code>.</p> <p>For example, to find the <a href=./#django_components.Component><code>Component</code></a> class to which belongs the template where the <a href=../template_tags/#slot><code>{% slot %}</code></a> tag is defined, you can use <a href=./#django_components.SlotNode.template_component><code>ctx.slot_node.template_component</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnSlotRenderedContext</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_slot_rendered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnSlotRenderedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=c1># Access slot metadata</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=n>slot_node</span> <span class=o>=</span> <span class=n>ctx</span><span class=o>.</span><span class=n>slot_node</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>slot_owner</span> <span class=o>=</span> <span class=n>slot_node</span><span class=o>.</span><span class=n>template_component</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Slot owner: </span><span class=si>{</span><span class=n>slot_owner</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_template_compiled class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_template_compiled</span> <a href=#django_components.ComponentExtension.on_template_compiled class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_template_compiled</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><span title=django_components.extension.OnTemplateCompiledContext>OnTemplateCompiledContext</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L821 target=_blank>See source code</a></p> <p>Called when a Component's template is compiled into a <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template><code>Template</code></a> object.</p> <p>This hook runs only once per <a href=./#django_components.Component><code>Component</code></a> class and works for both <a href=./#django_components.Component.template><code>Component.template</code></a> and <a href=./#django_components.Component.template_file><code>Component.template_file</code></a>.</p> <p>Use this hook to read or modify the template (in-place) after it's compiled.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnTemplateCompiledContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_template_compiled</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnTemplateCompiledContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Template origin: </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>template</span><span class=o>.</span><span class=n>origin</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentExtension.on_template_loaded class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">on_template_loaded</span> <a href=#django_components.ComponentExtension.on_template_loaded class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>on_template_loaded</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n><span title=django_components.extension.OnTemplateLoadedContext>OnTemplateLoadedContext</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L797 target=_blank>See source code</a></p> <p>Called when a Component's template is loaded as a string.</p> <p>This hook runs only once per <a href=./#django_components.Component><code>Component</code></a> class and works for both <a href=./#django_components.Component.template><code>Component.template</code></a> and <a href=./#django_components.Component.template_file><code>Component.template_file</code></a>.</p> <p>Use this hook to read or modify the template before it's compiled.</p> <p>To modify the template, return a new string from this hook.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnTemplateLoadedContext</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_template_loaded</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnTemplateLoadedContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Modify the template</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>content</span><span class=o>.</span><span class=n>replace</span><span class=p>(</span><span class=s2>&quot;Hello&quot;</span><span class=p>,</span> <span class=s2>&quot;Hi&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentFileEntry class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentFileEntry</span> <a href=#django_components.ComponentFileEntry class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>tuple</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/util/loader.py#L110 target=_blank>See source code</a></p> <p>Result returned by <a href=../api#django_components.get_component_files><code>get_component_files()</code></a>.</p> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" dot_path
instance-attribute
(django_components.ComponentFileEntry.dot_path)" href=#django_components.ComponentFileEntry.dot_path>dot_path</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" filepath
instance-attribute
(django_components.ComponentFileEntry.filepath)" href=#django_components.ComponentFileEntry.filepath>filepath</a></code></b> (<code><a class="autorefs autorefs-external" title=pathlib.Path href=https://docs.python.org/3.12/library/pathlib.html#pathlib.Path>Path</a></code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentFileEntry.dot_path class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">dot_path</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentFileEntry.dot_path class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>dot_path</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/util/loader.py#L113 target=_blank>See source code</a></p> <p>The python import path for the module. E.g. <code>app.components.mycomp</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentFileEntry.filepath class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">filepath</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentFileEntry.filepath class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>filepath</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=pathlib.Path href=https://docs.python.org/3.12/library/pathlib.html#pathlib.Path>Path</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/util/loader.py#L115 target=_blank>See source code</a></p> <p>The filesystem path to the module. E.g. <code>/path/to/project/app/components/mycomp.py</code></p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentInput class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentInput</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-dataclass"><code>dataclass</code></small> </span> <a href=#django_components.ComponentInput class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentInput</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><span title=django_components.slots.SlotName>SlotName</span></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" Slot
dataclass
(django_components.slots.Slot)" href=#django_components.Slot>Slot</a></span><span class=p>],</span> <span class=n>deps_strategy</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span><span class=p>,</span> <span class=nb>type</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span><span class=p>,</span> <span class=n>render_dependencies</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>object</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L215 target=_blank>See source code</a></p> <p>Deprecated. Will be removed in v1.</p> <p>Object holding the inputs that were passed to <a href=../api#django_components.Component.render><code>Component.render()</code></a> or the <a href=../template_tags#component><code>{% component %}</code></a> template tag.</p> <p>This object is available only during render under <a href=../api#django_components.Component.input><code>Component.input</code></a>.</p> <p>Read more about the <a href=../../concepts/fundamentals/render_api>Render API</a>.</p> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" args
instance-attribute
(django_components.ComponentInput.args)" href=#django_components.ComponentInput.args>args</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" context
instance-attribute
(django_components.ComponentInput.context)" href=#django_components.ComponentInput.context>context</a></code></b> (<code><span title=django.template.context.Context>Context</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" deps_strategy
instance-attribute
(django_components.ComponentInput.deps_strategy)" href=#django_components.ComponentInput.deps_strategy>deps_strategy</a></code></b> (<code><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" kwargs
instance-attribute
(django_components.ComponentInput.kwargs)" href=#django_components.ComponentInput.kwargs>kwargs</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render_dependencies
instance-attribute
(django_components.ComponentInput.render_dependencies)" href=#django_components.ComponentInput.render_dependencies>render_dependencies</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" slots
instance-attribute
(django_components.ComponentInput.slots)" href=#django_components.ComponentInput.slots>slots</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<span title=django_components.slots.SlotName>SlotName</span>, <a class="autorefs autorefs-internal" title=" Slot
dataclass
(django_components.slots.Slot)" href=#django_components.Slot>Slot</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" type
instance-attribute
(django_components.ComponentInput.type)" href=#django_components.ComponentInput.type>type</a></code></b> (<code><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentInput.args class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">args</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentInput.args class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L233 target=_blank>See source code</a></p> <p>Positional arguments (as list) passed to <code>Component.render()</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentInput.context class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">context</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentInput.context class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L228 target=_blank>See source code</a></p> <p>Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> passed to <code>Component.render()</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentInput.deps_strategy class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">deps_strategy</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentInput.deps_strategy class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>deps_strategy</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L239 target=_blank>See source code</a></p> <p>Dependencies strategy passed to <code>Component.render()</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentInput.kwargs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">kwargs</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentInput.kwargs class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L235 target=_blank>See source code</a></p> <p>Keyword arguments (as dict) passed to <code>Component.render()</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentInput.render_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">render_dependencies</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentInput.render_dependencies class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>render_dependencies</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L245 target=_blank>See source code</a></p> <p>Deprecated. Will be removed in v1. Use <code>deps_strategy="ignore"</code> instead.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentInput.slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentInput.slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><span title=django_components.slots.SlotName>SlotName</span></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" Slot
dataclass
(django_components.slots.Slot)" href=#django_components.Slot>Slot</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L237 target=_blank>See source code</a></p> <p>Slots (as dict) passed to <code>Component.render()</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentInput.type class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">type</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentInput.type class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nb>type</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L242 target=_blank>See source code</a></p> <p>Deprecated. Will be removed in v1. Use <code>deps_strategy</code> instead.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentMediaInput class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentMediaInput</span> <a href=#django_components.ComponentMediaInput class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>typing.Protocol</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_media.py#L108 target=_blank>See source code</a></p> <p>Defines JS and CSS media files associated with a <a href=../api#django_components.Component><code>Component</code></a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;path/to/script.js&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;https://unpkg.com/alpinejs@3.14.7/dist/cdn.min.js&quot;</span><span class=p>,</span> <span class=c1># AlpineJS</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>]</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=p>[</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=s2>&quot;path/to/style.css&quot;</span><span class=p>,</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=s2>&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span><span class=p>,</span> <span class=c1># TailwindCSS</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=p>],</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=s2>&quot;print&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;path/to/style2.css&quot;</span><span class=p>],</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=p>}</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" css
class-attribute
instance-attribute
(django_components.ComponentMediaInput.css)" href=#django_components.ComponentMediaInput.css>css</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a>, <a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a>], <a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a>], <a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a>]]]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" extend
class-attribute
instance-attribute
(django_components.ComponentMediaInput.extend)" href=#django_components.ComponentMediaInput.extend>extend</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>, <a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" js
class-attribute
instance-attribute
(django_components.ComponentMediaInput.js)" href=#django_components.ComponentMediaInput.js>js</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a>, <a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a>]]]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentMediaInput.css class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">css</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentMediaInput.css class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>css</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a></span><span class=p>]]]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_media.py#L129 target=_blank>See source code</a></p> <p>CSS files associated with a <a href=../api#django_components.Component><code>Component</code></a>.</p> <ul> <li> <p>If a string, it's assumed to be a path to a CSS file.</p> </li> <li> <p>If a list, each entry is assumed to be a path to a CSS file.</p> </li> <li> <p>If a dict, the keys are media types (e.g. "all", "print", "screen", etc.), and the values are either:</p> <ul> <li>A string, assumed to be a path to a CSS file.</li> <li>A list, each entry is assumed to be a path to a CSS file.</li> </ul> </li> </ul> <p>Each entry can be a string, bytes, SafeString, PathLike, or a callable that returns one of the former (see <a href=../api#django_components.ComponentMediaInputPath><code>ComponentMediaInputPath</code></a>).</p> <p>Examples: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;path/to/style.css&quot;</span>
</code></pre></div></p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=n>css</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;path/to/style1.css&quot;</span><span class=p>,</span> <span class=s2>&quot;path/to/style2.css&quot;</span><span class=p>]</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=s2>&quot;path/to/style.css&quot;</span><span class=p>,</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=s2>&quot;print&quot;</span><span class=p>:</span> <span class=s2>&quot;path/to/print.css&quot;</span><span class=p>,</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=p>}</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;path/to/style1.css&quot;</span><span class=p>,</span> <span class=s2>&quot;path/to/style2.css&quot;</span><span class=p>],</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=s2>&quot;print&quot;</span><span class=p>:</span> <span class=s2>&quot;path/to/print.css&quot;</span><span class=p>,</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=p>}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentMediaInput.extend class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">extend</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentMediaInput.extend class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>extend</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>True</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_media.py#L214 target=_blank>See source code</a></p> <p>Configures whether the component should inherit the media files from the parent component.</p> <ul> <li>If <code>True</code>, the component inherits the media files from the parent component.</li> <li>If <code>False</code>, the component does not inherit the media files from the parent component.</li> <li>If a list of components classes, the component inherits the media files ONLY from these specified components.</li> </ul> <p>Read more in <a href=../../concepts/fundamentals/secondary_js_css_files/#media-inheritance>Media inheritance</a> section.</p> <p><strong>Example:</strong></p> <p>Disable media inheritance:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>ParentComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;parent.js&quot;</span><span class=p>]</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>ParentComponent</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>extend</span> <span class=o>=</span> <span class=kc>False</span> <span class=c1># Don&#39;t inherit parent media</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;script.js&quot;</span><span class=p>]</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>_js</span><span class=p>)</span> <span class=c1># [&quot;script.js&quot;]</span>
</code></pre></div> <p>Specify which components to inherit from. In this case, the media files are inherited ONLY from the specified components, and NOT from the original parent components:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>ParentComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;parent.js&quot;</span><span class=p>]</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>ParentComponent</span><span class=p>):</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=c1># Only inherit from these, ignoring the files from the parent</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=n>extend</span> <span class=o>=</span> <span class=p>[</span><span class=n>OtherComponent1</span><span class=p>,</span> <span class=n>OtherComponent2</span><span class=p>]</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;script.js&quot;</span><span class=p>]</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>_js</span><span class=p>)</span> <span class=c1># [&quot;script.js&quot;, &quot;other1.js&quot;, &quot;other2.js&quot;]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentMediaInput.js class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">js</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentMediaInput.js class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>js</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentMediaInputPath
module-attribute
(django_components.component_media.ComponentMediaInputPath)" href=#django_components.ComponentMediaInputPath>ComponentMediaInputPath</a></span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_media.py#L183 target=_blank>See source code</a></p> <p>JS files associated with a <a href=../api#django_components.Component><code>Component</code></a>.</p> <ul> <li> <p>If a string, it's assumed to be a path to a JS file.</p> </li> <li> <p>If a list, each entry is assumed to be a path to a JS file.</p> </li> </ul> <p>Each entry can be a string, bytes, SafeString, PathLike, or a callable that returns one of the former (see <a href=../api#django_components.ComponentMediaInputPath><code>ComponentMediaInputPath</code></a>).</p> <p>Examples: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;path/to/script.js&quot;</span>
</code></pre></div></p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;path/to/script1.js&quot;</span><span class=p>,</span> <span class=s2>&quot;path/to/script2.js&quot;</span><span class=p>]</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>js</span> <span class=o>=</span> <span class=k>lambda</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;path/to/script1.js&quot;</span><span class=p>,</span> <span class=s2>&quot;path/to/script2.js&quot;</span><span class=p>]</span>
</code></pre></div> </div> </div> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.ComponentMediaInputPath class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">ComponentMediaInputPath</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.ComponentMediaInputPath class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>ComponentMediaInputPath</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#bytes>bytes</a></span><span class=p>,</span> <span class=n><span title=django.utils.safestring.SafeData>SafeData</span></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=pathlib.Path href=https://docs.python.org/3.12/library/pathlib.html#pathlib.Path>Path</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=os.PathLike href=https://docs.python.org/3.12/library/os.html#os.PathLike>PathLike</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#bytes>bytes</a></span><span class=p>,</span> <span class=n><span title=django.utils.safestring.SafeData>SafeData</span></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=pathlib.Path href=https://docs.python.org/3.12/library/pathlib.html#pathlib.Path>Path</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=os.PathLike href=https://docs.python.org/3.12/library/os.html#os.PathLike>PathLike</a></span><span class=p>]]]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_media.py#L67 target=_blank>See source code</a></p> <p>A type representing an entry in <a href=../api#django_components.ComponentMediaInput.js>Media.js</a> or <a href=../api#django_components.ComponentMediaInput.css>Media.css</a>.</p> <p>If an entry is a <a href=https://dev.to/doridoro/django-safestring-afj>SafeString</a> (or has <code>__html__</code> method), then entry is assumed to be a formatted HTML tag. Otherwise, it's assumed to be a path to a file.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;path/to/script.js&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=sa>b</span><span class=s2>&quot;script.js&quot;</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>SafeString</span><span class=p>(</span><span class=s2>&quot;&lt;script src=&#39;path/to/script.js&#39;&gt;&lt;/script&gt;&quot;</span><span class=p>),</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=p>]</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>css</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=n>Path</span><span class=p>(</span><span class=s2>&quot;path/to/style.css&quot;</span><span class=p>),</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=k>lambda</span><span class=p>:</span> <span class=s2>&quot;path/to/style.css&quot;</span><span class=p>,</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=k>lambda</span><span class=p>:</span> <span class=n>Path</span><span class=p>(</span><span class=s2>&quot;path/to/style.css&quot;</span><span class=p>),</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentNode class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentNode</span> <a href=#django_components.ComponentNode class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentNode</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>,</span> <span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>],</span> <span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>nodelist</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.node.BaseNode</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L3808 target=_blank>See source code</a></p> <p>Renders one of the components that was previously registered with <a href=./#django_components.register><code>@register()</code></a> decorator.</p> <p>The <a href=../template_tags#component><code>{% component %}</code></a> tag takes:</p> <ul> <li>Component's registered name as the first positional argument,</li> <li>Followed by any number of positional and keyword arguments.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x>&lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;button&quot;</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;John&quot;</span> <span class=nv>job</span><span class=o>=</span><span class=s2>&quot;Developer&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x>&lt;/div&gt;</span>
</code></pre></div> <p>The component name must be a string literal.</p> <h5 id=django_components.ComponentNode--inserting-slot-fills>Inserting slot fills<a class=headerlink href=#django_components.ComponentNode--inserting-slot-fills title="Permanent link">¤</a></h5> <p>If the component defined any <a href=../../concepts/fundamentals/slots/ >slots</a>, you can "fill" these slots by placing the <a href=../template_tags#fill><code>{% fill %}</code></a> tags within the <a href=../template_tags#component><code>{% component %}</code></a> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_table&quot;</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x> &lt; 1 | 2 | 3 &gt;</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>You can even nest <a href=../template_tags#fill><code>{% fill %}</code></a> tags within <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#if><code>{% if %}</code></a>, <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#for><code>{% for %}</code></a> and other tags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_table&quot;</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>if</span> <span class=nv>rows</span> <span class=cp>%}</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=x> &lt; 1 | 2 | 3 &gt;</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <h5 id=django_components.ComponentNode--isolating-components>Isolating components<a class=headerlink href=#django_components.ComponentNode--isolating-components title="Permanent link">¤</a></h5> <p>By default, components behave similarly to Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#include><code>{% include %}</code></a>, and the template inside the component has access to the variables defined in the outer template.</p> <p>You can selectively isolate a component, using the <code>only</code> flag, so that the inner template can access only the data that was explicitly passed to it:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;name&quot;</span> <span class=nv>positional_arg</span> <span class=nv>keyword_arg</span><span class=o>=</span><span class=nv>value</span> <span class=p>...</span> <span class=nv>only</span> <span class=cp>%}</span>
</code></pre></div> <p>Alternatively, you can set all components to be isolated by default, by setting <a href=../settings#django_components.app_settings.ComponentsSettings.context_behavior><code>context_behavior</code></a> to <code>"isolated"</code> in your settings:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=c1># settings.py</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=s2>&quot;context_behavior&quot;</span><span class=p>:</span> <span class=s2>&quot;isolated&quot;</span><span class=p>,</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=p>}</span>
</code></pre></div> <h5 id=django_components.ComponentNode--omitting-the-component-keyword>Omitting the component keyword<a class=headerlink href=#django_components.ComponentNode--omitting-the-component-keyword title="Permanent link">¤</a></h5> <p>If you would like to omit the <code>component</code> keyword, and simply refer to your components by their registered names:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=cp>{%</span> <span class=k>button</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;John&quot;</span> <span class=nv>job</span><span class=o>=</span><span class=s2>&quot;Developer&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>You can do so by setting the "shorthand" <a href=../../concepts/advanced/tag_formatters>Tag formatter</a> in the settings:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=c1># settings.py</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=s2>&quot;tag_formatter&quot;</span><span class=p>:</span> <span class=s2>&quot;django_components.component_shorthand_formatter&quot;</span><span class=p>,</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a><span class=p>}</span>
</code></pre></div> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" parse
classmethod
(django_components.ComponentNode.parse)" href=#django_components.ComponentNode.parse>parse</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" register
classmethod
(django_components.ComponentNode.register)" href=#django_components.ComponentNode.register>register</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render (django_components.ComponentNode.render)" href=#django_components.ComponentNode.render>render</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" unregister
classmethod
(django_components.ComponentNode.unregister)" href=#django_components.ComponentNode.unregister>unregister</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" active_flags
property
(django_components.ComponentNode.active_flags)" href=#django_components.ComponentNode.active_flags>active_flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" allowed_flags
class-attribute
instance-attribute
(django_components.ComponentNode.allowed_flags)" href=#django_components.ComponentNode.allowed_flags>allowed_flags</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" contents
instance-attribute
(django_components.ComponentNode.contents)" href=#django_components.ComponentNode.contents>contents</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" end_tag
class-attribute
instance-attribute
(django_components.ComponentNode.end_tag)" href=#django_components.ComponentNode.end_tag>end_tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" flags
instance-attribute
(django_components.ComponentNode.flags)" href=#django_components.ComponentNode.flags>flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" name
instance-attribute
(django_components.ComponentNode.name)" href=#django_components.ComponentNode.name>name</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" node_id
instance-attribute
(django_components.ComponentNode.node_id)" href=#django_components.ComponentNode.node_id>node_id</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" nodelist
instance-attribute
(django_components.ComponentNode.nodelist)" href=#django_components.ComponentNode.nodelist>nodelist</a></code></b> (<code><span title=django.template.base.NodeList>NodeList</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" params
instance-attribute
(django_components.ComponentNode.params)" href=#django_components.ComponentNode.params>params</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<span title=django_components.util.template_tag.TagAttr>TagAttr</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" registry
instance-attribute
(django_components.ComponentNode.registry)" href=#django_components.ComponentNode.registry>registry</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tag
class-attribute
instance-attribute
(django_components.ComponentNode.tag)" href=#django_components.ComponentNode.tag>tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_component
instance-attribute
(django_components.ComponentNode.template_component)" href=#django_components.ComponentNode.template_component>template_component</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_name
instance-attribute
(django_components.ComponentNode.template_name)" href=#django_components.ComponentNode.template_name>template_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.active_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">active_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.ComponentNode.active_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>active_flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L506 target=_blank>See source code</a></p> <p>Flags that were set for this specific instance as a list of strings.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>Will have the following flags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.allowed_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">allowed_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.allowed_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>(</span><span class=n><span title=django_components.component.COMP_ONLY_FLAG>COMP_ONLY_FLAG</span></span><span class=p>,)</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.contents class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">contents</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.contents class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(contents)>contents</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L498 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L435 target=_blank>See source code</a></p> <p>The contents of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>contents</code> will be <code>"&lt;div&gt; ... &lt;/div&gt;"</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.end_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">end_tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.end_tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>end_tag</span> <span class=o>=</span> <span class=s1>&#39;endcomponent&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(flags)>flags</span></span> <span class=ow>or</span> <span class=p>{</span><span class=n><span title=flag>flag</span></span><span class=p>:</span> <span class=n>Falsefor</span> <span class=n><span title=flag>flag</span></span> <span class=ow>in</span> <span class=p>(</span><span class=n><span title=django_components.node.BaseNode(self).allowed_flags>allowed_flags</span></span> <span class=ow>or</span> <span class=p>[])}</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L495 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L376 target=_blank>See source code</a></p> <p>Dictionary of all <a href=../api#django_components.BaseNode.allowed_flags><code>allowed_flags</code></a> that were set on the tag.</p> <p>Flags that were set are <code>True</code>, and the rest are <code>False</code>.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 2 flags, <code>default</code> and <code>required</code>, but only <code>default</code> was set.</p> <p>The <code>flags</code> dictionary will be:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=s2>&quot;default&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=s2>&quot;required&quot;</span><span class=p>:</span> <span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=p>}</span>
</code></pre></div> <p>You can check if a flag is set by doing:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>if</span> <span class=n>node</span><span class=o>.</span><span class=n>flags</span><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>]:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=o>...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>name</span> <span class=o>=</span> <span class=n><span title=django_components.component.ComponentNode(name)>name</span></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.node_id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">node_id</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.node_id class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(node_id)>node_id</span></span> <span class=ow>or</span> <span class=n><span title=django_components.util.misc.gen_id>gen_id</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L497 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L452 target=_blank>See source code</a></p> <p>The unique ID of the node.</p> <p>Extensions can use this ID to store additional information.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.nodelist class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">nodelist</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.nodelist class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>nodelist</span><span class=p>:</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(nodelist)>nodelist</span></span> <span class=ow>or</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L496 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L415 target=_blank>See source code</a></p> <p>The nodelist of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>nodelist</code> will contain the <code>&lt;div&gt; ... &lt;/div&gt;</code> part.</p> <p>Unlike <a href=../api#django_components.BaseNode.contents><code>contents</code></a>, the <code>nodelist</code> contains the actual Nodes, not just the text.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.params class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">params</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.params class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(params)>params</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L494 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L357 target=_blank>See source code</a></p> <p>The parameters to the tag in the template.</p> <p>A single param represents an arg or kwarg of the template tag.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=s1>&#39;val2 two&#39;</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 3 params:</p> <ul> <li>Posiitonal arg <code>"my_comp"</code></li> <li>Keyword arg <code>key=val</code></li> <li>Keyword arg <code>key2='val2 two'</code></li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.registry class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">registry</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.registry class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>registry</span> <span class=o>=</span> <span class=n><span title=django_components.component.ComponentNode(registry)>registry</span></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tag</span> <span class=o>=</span> <span class=s1>&#39;component&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.template_component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.template_component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_component)>template_component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L500 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L474 target=_blank>See source code</a></p> <p>If the template that contains this node belongs to a <a href=../api#django_components.Component><code>Component</code></a>, then this will be the <a href=../api#django_components.Component><code>Component</code></a> class.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentNode.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentNode.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_name)>template_name</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L499 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L459 target=_blank>See source code</a></p> <p>The name of the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template><code>Template</code></a> that contains this node.</p> <p>The template name is set by Django's <a href=https://docs.djangoproject.com/en/5.2/topics/templates/#loaders>template loaders</a>.</p> <p>For example, the filesystem template loader will set this to the absolute path of the template file.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a>&quot;/home/user/project/templates/my_template.html&quot;
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentNode.parse class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">parse</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.ComponentNode.parse class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>parse</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>,</span> <span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>start_tag</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>end_tag</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentNode.register class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">register</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.ComponentNode.register class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>register</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L562 target=_blank>See source code</a></p> <p>A convenience method for registering the tag with the given library.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;mynode&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>MyNode</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=n>library</span><span class=p>)</span>
</code></pre></div> <p>Allows you to then use the node in templates like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>mylibrary</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>mynode</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentNode.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <a href=#django_components.ComponentNode.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentNode.unregister class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">unregister</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.ComponentNode.unregister class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>unregister</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L583 target=_blank>See source code</a></p> <p>Unregisters the node from the given library.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentRegistry class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentRegistry</span> <a href=#django_components.ComponentRegistry class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentRegistry</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.Library>Library</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>settings</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" RegistrySettings (django_components.component_registry.RegistrySettings)" href=#django_components.RegistrySettings>RegistrySettings</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-internal" title=" RegistrySettings (django_components.component_registry.RegistrySettings)" href=#django_components.RegistrySettings>RegistrySettings</a></span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>object</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L154 target=_blank>See source code</a></p> <p>Manages <a href=./#django_components.Component>components</a> and makes them available in the template, by default as <a href=../template_tags/#component><code>{% component %}</code></a> tags.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>value</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>To enable a component to be used in a template, the component must be registered with a component registry.</p> <p>When you register a component to a registry, behind the scenes the registry automatically adds the component's template tag (e.g. <code>{% component %}</code> to the <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-tags/#code-layout><code>Library</code></a>. And the opposite happens when you unregister a component - the tag is removed.</p> <p>See <a href=../../concepts/advanced/component_registry/ >Registering components</a>.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>library</code></b> (<code><span title=django.template.Library>Library</span></code>, default: <code>None</code> ) <div class=doc-md-description> <p>Django <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-tags/#code-layout><code>Library</code></a> associated with this registry. If omitted, the default Library instance from django_components is used.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>settings</code></b> (<code><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-internal" title=" RegistrySettings (django_components.component_registry.RegistrySettings)" href=#django_components.RegistrySettings>RegistrySettings</a>, <a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a>[[<a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a>], <a class="autorefs autorefs-internal" title=" RegistrySettings (django_components.component_registry.RegistrySettings)" href=#django_components.RegistrySettings>RegistrySettings</a>]]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>Configure how the components registered with this registry will behave when rendered. See <a href=./#django_components.RegistrySettings><code>RegistrySettings</code></a>. Can be either a static value or a callable that returns the settings. If omitted, the settings from <a href=../settings/#django_components.app_settings.ComponentsSettings><code>COMPONENTS</code></a> are used.</p> </div> </li> </ul> <p><strong>Notes:</strong></p> <ul> <li>The default registry is available as <a href=./#django_components.registry><code>django_components.registry</code></a>.</li> <li>The default registry is used when registering components with <a href=./#django_components.register><code>@register</code></a> decorator.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># Use with default Library</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>registry</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>()</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=c1># Or a custom one</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=n>my_lib</span> <span class=o>=</span> <span class=n>Library</span><span class=p>()</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=n>registry</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>(</span><span class=n>library</span><span class=o>=</span><span class=n>my_lib</span><span class=p>)</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=c1># Usage</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;card&quot;</span><span class=p>,</span> <span class=n>CardComponent</span><span class=p>)</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=n>registry</span><span class=o>.</span><span class=n>all</span><span class=p>()</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=n>registry</span><span class=o>.</span><span class=n>clear</span><span class=p>()</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a><span class=n>registry</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a><span class=n>registry</span><span class=o>.</span><span class=n>has</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
</code></pre></div> <h3 id=django_components.ComponentRegistry--using-registry-to-share-components>Using registry to share components<a class=headerlink href=#django_components.ComponentRegistry--using-registry-to-share-components title="Permanent link">¤</a></h3> <p>You can use component registry for isolating or "packaging" components:</p> <ol> <li> <p>Create new instance of <code>ComponentRegistry</code> and Library: <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=x>my_comps = Library()</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x>my_comps_reg = ComponentRegistry(library=my_comps)</span>
</code></pre></div></p> </li> <li> <p>Register components to the registry: <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=x>my_comps_reg.register(&quot;my_button&quot;, ButtonComponent)</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x>my_comps_reg.register(&quot;my_card&quot;, CardComponent)</span>
</code></pre></div></p> </li> <li> <p>In your target project, load the Library associated with the registry: <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>my_comps</span> <span class=cp>%}</span>
</code></pre></div></p> </li> <li> <p>Use the registered components in your templates: <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;button&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div></p> </li> </ol> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" all (django_components.ComponentRegistry.all)" href=#django_components.ComponentRegistry.all>all</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" clear (django_components.ComponentRegistry.clear)" href=#django_components.ComponentRegistry.clear>clear</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get (django_components.ComponentRegistry.get)" href=#django_components.ComponentRegistry.get>get</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" has (django_components.ComponentRegistry.has)" href=#django_components.ComponentRegistry.has>has</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" register (django_components.ComponentRegistry.register)" href=#django_components.ComponentRegistry.register>register</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" unregister (django_components.ComponentRegistry.unregister)" href=#django_components.ComponentRegistry.unregister>unregister</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" library
property
(django_components.ComponentRegistry.library)" href=#django_components.ComponentRegistry.library>library</a></code></b> (<code><span title=django.template.Library>Library</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" settings
property
(django_components.ComponentRegistry.settings)" href=#django_components.ComponentRegistry.settings>settings</a></code></b> (<code><span title=django_components.component_registry.InternalRegistrySettings>InternalRegistrySettings</span></code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentRegistry.library class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">library</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.ComponentRegistry.library class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L277 target=_blank>See source code</a></p> <p>The template tag <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-tags/#code-layout><code>Library</code></a> that is associated with the registry.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentRegistry.settings class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">settings</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.ComponentRegistry.settings class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>settings</span><span class=p>:</span> <span class=n><span title=django_components.component_registry.InternalRegistrySettings>InternalRegistrySettings</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L298 target=_blank>See source code</a></p> <p><a href=./#django_components.RegistrySettings>Registry settings</a> configured for this registry.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentRegistry.all class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">all</span> <a href=#django_components.ComponentRegistry.all class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>all</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L489 target=_blank>See source code</a></p> <p>Retrieve all registered <a href=./#django_components.Component><code>Component</code></a> classes.</p> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]]</code> <div class=doc-md-description> <p>Dict[str, Type[Component]]: A dictionary of component names to component classes</p> </div> </li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># First register components</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;card&quot;</span><span class=p>,</span> <span class=n>CardComponent</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=c1># Then get all</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=n>registry</span><span class=o>.</span><span class=n>all</span><span class=p>()</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=c1># &gt; {</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=c1># &gt; &quot;button&quot;: ButtonComponent,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=c1># &gt; &quot;card&quot;: CardComponent,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=c1># &gt; }</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentRegistry.clear class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">clear</span> <a href=#django_components.ComponentRegistry.clear class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>clear</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L514 target=_blank>See source code</a></p> <p>Clears the registry, unregistering all components.</p> <p>Example:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># First register components</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;card&quot;</span><span class=p>,</span> <span class=n>CardComponent</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=c1># Then clear</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=n>registry</span><span class=o>.</span><span class=n>clear</span><span class=p>()</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=c1># Then get all</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=n>registry</span><span class=o>.</span><span class=n>all</span><span class=p>()</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=c1># &gt; {}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentRegistry.get class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get</span> <a href=#django_components.ComponentRegistry.get class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L433 target=_blank>See source code</a></p> <p>Retrieve a <a href=./#django_components.Component><code>Component</code></a> class registered under the given name.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>The name under which the component was registered. Required.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]</code> <div class=doc-md-description> <p>Type[Component]: The component class registered under the given name.</p> </div> </li> </ul> <p><strong>Raises:</strong></p> <ul> <li><a href=../exceptions/#django_components.NotRegistered><code>NotRegistered</code></a> if the given name is not registered.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># First register component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=c1># Then get</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>registry</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=c1># &gt; ButtonComponent</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentRegistry.has class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">has</span> <a href=#django_components.ComponentRegistry.has class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>has</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L465 target=_blank>See source code</a></p> <p>Check if a <a href=./#django_components.Component><code>Component</code></a> class is registered under the given name.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>The name under which the component was registered. Required.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>bool</code></b> ( <code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code> ) <div class=doc-md-description> <p><code>True</code> if the component is registered, <code>False</code> otherwise.</p> </div> </li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># First register component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=c1># Then check</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>registry</span><span class=o>.</span><span class=n>has</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=c1># &gt; True</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentRegistry.register class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">register</span> <a href=#django_components.ComponentRegistry.register class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>register</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>])</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L319 target=_blank>See source code</a></p> <p>Register a <a href=./#django_components.Component><code>Component</code></a> class with this registry under the given name.</p> <p>A component MUST be registered before it can be used in a template such as: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div></p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>The name under which the component will be registered. Required.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>component</code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> <p>The component class to register. Required.</p> </div> </li> </ul> <p><strong>Raises:</strong></p> <ul> <li><a href=../exceptions/#django_components.AlreadyRegistered><code>AlreadyRegistered</code></a> if a different component was already registered under the same name.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentRegistry.unregister class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">unregister</span> <a href=#django_components.ComponentRegistry.unregister class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>unregister</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L372 target=_blank>See source code</a></p> <p>Unregister the <a href=./#django_components.Component><code>Component</code></a> class that was registered under the given name.</p> <p>Once a component is unregistered, it is no longer available in the templates.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>The name under which the component is registered. Required.</p> </div> </li> </ul> <p><strong>Raises:</strong></p> <ul> <li><a href=../exceptions/#django_components.NotRegistered><code>NotRegistered</code></a> if the given name is not registered.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># First register component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=c1># Then unregister</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>registry</span><span class=o>.</span><span class=n>unregister</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentVars class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentVars</span> <a href=#django_components.ComponentVars class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>tuple</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L249 target=_blank>See source code</a></p> <p>Type for the variables available inside the component templates.</p> <p>All variables here are scoped under <code>component_vars.</code>, so e.g. attribute <code>kwargs</code> on this class is accessible inside the template as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{{</span> <span class=nv>component_vars.kwargs</span> <span class=cp>}}</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" args
instance-attribute
(django_components.ComponentVars.args)" href=#django_components.ComponentVars.args>args</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" is_filled
instance-attribute
(django_components.ComponentVars.is_filled)" href=#django_components.ComponentVars.is_filled>is_filled</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" kwargs
instance-attribute
(django_components.ComponentVars.kwargs)" href=#django_components.ComponentVars.kwargs>kwargs</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" slots
instance-attribute
(django_components.ComponentVars.slots)" href=#django_components.ComponentVars.slots>slots</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentVars.args class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">args</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentVars.args class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L261 target=_blank>See source code</a></p> <p>The <code>args</code> argument as passed to <a href=../api/#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>.</p> <p>This is the same <a href=../api/#django_components.Component.args><code>Component.args</code></a> that's available on the component instance.</p> <p>If you defined the <a href=../api/#django_components.Component.Args><code>Component.Args</code></a> class, then the <code>args</code> property will return an instance of that class.</p> <p>Otherwise, <code>args</code> will be a plain list.</p> <p><strong>Example:</strong></p> <p>With <code>Args</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;table&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>per_page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=p>&lt;</span><span class=nt>h1</span><span class=p>&gt;</span>Table<span class=p>&lt;/</span><span class=nt>h1</span><span class=p>&gt;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Page: <span class=cp>{{</span> <span class=nv>component_vars.args.page</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Per page: <span class=cp>{{</span> <span class=nv>component_vars.args.per_page</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> <p>Without <code>Args</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;table&quot;</span><span class=p>)</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=p>&lt;</span><span class=nt>h1</span><span class=p>&gt;</span>Table<span class=p>&lt;/</span><span class=nt>h1</span><span class=p>&gt;</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Page: <span class=cp>{{</span> <span class=nv>component_vars.args.0</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Per page: <span class=cp>{{</span> <span class=nv>component_vars.args.1</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentVars.is_filled class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">is_filled</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentVars.is_filled class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>is_filled</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L417 target=_blank>See source code</a></p> <p>Deprecated. Will be removed in v1. Use <a href=../template_vars#django_components.component.ComponentVars.slots><code>component_vars.slots</code></a> instead. Note that <code>component_vars.slots</code> no longer escapes the slot names.</p> <p>Dictonary describing which component slots are filled (<code>True</code>) or are not (<code>False</code>).</p> <p><i>New in version 0.70</i></p> <p>Use as <code>{{ component_vars.is_filled }}</code></p> <p>Example:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c>{# Render wrapping HTML only if the slot is defined #}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.is_filled.my_slot</span> <span class=cp>%}</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> &lt;div class=&quot;slot-wrapper&quot;&gt;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;my_slot&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
</code></pre></div> <p>This is equivalent to checking if a given key is among the slot fills:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=s2>&quot;my_slot_filled&quot;</span><span class=p>:</span> <span class=s2>&quot;my_slot&quot;</span> <span class=ow>in</span> <span class=n>slots</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=p>}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentVars.kwargs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">kwargs</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentVars.kwargs class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L313 target=_blank>See source code</a></p> <p>The <code>kwargs</code> argument as passed to <a href=../api/#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>.</p> <p>This is the same <a href=../api/#django_components.Component.kwargs><code>Component.kwargs</code></a> that's available on the component instance.</p> <p>If you defined the <a href=../api/#django_components.Component.Kwargs><code>Component.Kwargs</code></a> class, then the <code>kwargs</code> property will return an instance of that class.</p> <p>Otherwise, <code>kwargs</code> will be a plain dict.</p> <p><strong>Example:</strong></p> <p>With <code>Kwargs</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;table&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>per_page</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=p>&lt;</span><span class=nt>h1</span><span class=p>&gt;</span>Table<span class=p>&lt;/</span><span class=nt>h1</span><span class=p>&gt;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Page: <span class=cp>{{</span> <span class=nv>component_vars.kwargs.page</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Per page: <span class=cp>{{</span> <span class=nv>component_vars.kwargs.per_page</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> <p>Without <code>Kwargs</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;table&quot;</span><span class=p>)</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=p>&lt;</span><span class=nt>h1</span><span class=p>&gt;</span>Table<span class=p>&lt;/</span><span class=nt>h1</span><span class=p>&gt;</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Page: <span class=cp>{{</span> <span class=nv>component_vars.kwargs.page</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Per page: <span class=cp>{{</span> <span class=nv>component_vars.kwargs.per_page</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentVars.slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentVars.slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L365 target=_blank>See source code</a></p> <p>The <code>slots</code> argument as passed to <a href=../api/#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>.</p> <p>This is the same <a href=../api/#django_components.Component.slots><code>Component.slots</code></a> that's available on the component instance.</p> <p>If you defined the <a href=../api/#django_components.Component.Slots><code>Component.Slots</code></a> class, then the <code>slots</code> property will return an instance of that class.</p> <p>Otherwise, <code>slots</code> will be a plain dict.</p> <p><strong>Example:</strong></p> <p>With <code>Slots</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;table&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;pagination&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;footer&quot;</span> <span class=nv>body</span><span class=o>=</span><span class=nv>component_vars.slots.footer</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> <p>Without <code>Slots</code> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;table&quot;</span><span class=p>)</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&#39;&#39;&#39;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;pagination&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;footer&quot;</span> <span class=nv>body</span><span class=o>=</span><span class=nv>component_vars.slots.footer</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=sd>&#39;&#39;&#39;</span>
</code></pre></div> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentView class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentView</span> <a href=#django_components.ComponentView class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentView</span><span class=p>(</span><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.extension.ExtensionComponentConfig</code>, <code>django.views.generic.base.View</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/view.py#L78 target=_blank>See source code</a></p> <p>The interface for <code>Component.View</code>.</p> <p>The fields of this class are used to configure the component views and URLs.</p> <p>This class is a subclass of <a href=https://docs.djangoproject.com/en/5.2/ref/class-based-views/base/#view><code>django.views.View</code></a>. The <a href=../api#django_components.Component><code>Component</code></a> class is available via <code>self.component_cls</code>.</p> <p>Override the methods of this class to define the behavior of the component.</p> <p>Read more about <a href=../../concepts/fundamentals/component_views_urls>Component views and URLs</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>:</span> <span class=n>HttpRequest</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>HttpResponse</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=n>HttpResponse</span><span class=p>(</span><span class=s2>&quot;Hello, world!&quot;</span><span class=p>)</span>
</code></pre></div> <p><strong>Component URL:</strong></p> <p>If the <code>public</code> attribute is set to <code>True</code>, the component will have its own URL that will point to the Component's View.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=n>public</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=k>return</span> <span class=n>HttpResponse</span><span class=p>(</span><span class=s2>&quot;Hello, world!&quot;</span><span class=p>)</span>
</code></pre></div> <p>Will create a URL route like <code>/components/ext/view/components/a1b2c3/</code>.</p> <p>To get the URL for the component, use <a href=../api#django_components.get_component_url><code>get_component_url()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>url</span> <span class=o>=</span> <span class=n>get_component_url</span><span class=p>(</span><span class=n>MyComponent</span><span class=p>)</span>
</code></pre></div> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" delete (django_components.ComponentView.delete)" href=#django_components.ComponentView.delete>delete</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" get (django_components.ComponentView.get)" href=#django_components.ComponentView.get>get</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" head (django_components.ComponentView.head)" href=#django_components.ComponentView.head>head</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" options (django_components.ComponentView.options)" href=#django_components.ComponentView.options>options</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" patch (django_components.ComponentView.patch)" href=#django_components.ComponentView.patch>patch</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" post (django_components.ComponentView.post)" href=#django_components.ComponentView.post>post</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" put (django_components.ComponentView.put)" href=#django_components.ComponentView.put>put</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" trace (django_components.ComponentView.trace)" href=#django_components.ComponentView.trace>trace</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component
class-attribute
instance-attribute
(django_components.ComponentView.component)" href=#django_components.ComponentView.component>component</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_class
instance-attribute
(django_components.ComponentView.component_class)" href=#django_components.ComponentView.component_class>component_class</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_cls
class-attribute
instance-attribute
(django_components.ComponentView.component_cls)" href=#django_components.ComponentView.component_cls>component_cls</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" public
class-attribute
(django_components.ComponentView.public)" href=#django_components.ComponentView.public>public</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" url
property
(django_components.ComponentView.url)" href=#django_components.ComponentView.url>url</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentView.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentView.component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.cast href=https://docs.python.org/3.12/library/typing.html#typing.cast>cast</a></span><span class=p>(</span><span class=s1>&#39;Component&#39;</span><span class=p>,</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/view.py#L131 target=_blank>See source code</a></p> <p>DEPRECATED: Will be removed in v1.0. Use <a href=../api#django_components.ComponentView.component_cls><code>component_cls</code></a> instead.</p> <p>This is a dummy instance created solely for the View methods.</p> <p>It is the same as if you instantiated the component class directly:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span> <span class=o>=</span> <span class=n>Calendar</span><span class=p>()</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>component</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentView.component_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentView.component_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_class</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L255 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentView.component_cls class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_cls</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentView.component_cls class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_cls</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.cast href=https://docs.python.org/3.12/library/typing.html#typing.cast>cast</a></span><span class=p>(</span><span class=s1>&#39;Type[Component]&#39;</span><span class=p>,</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/view.py#L146 target=_blank>See source code</a></p> <p>The parent component class.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentView.public class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">public</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.ComponentView.public class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>public</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>False</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/view.py#L187 target=_blank>See source code</a></p> <p>Whether the component should be available via a URL.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>public</span> <span class=o>=</span> <span class=kc>True</span>
</code></pre></div> <p>Will create a URL route like <code>/components/ext/view/components/a1b2c3/</code>.</p> <p>To get the URL for the component, use <a href=../api#django_components.get_component_url><code>get_component_url()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>url</span> <span class=o>=</span> <span class=n>get_component_url</span><span class=p>(</span><span class=n>MyComponent</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentView.url class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">url</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.ComponentView.url class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>url</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/view.py#L165 target=_blank>See source code</a></p> <p>The URL for the component.</p> <p>Raises <code>RuntimeError</code> if the component is not public.</p> <p>This is the same as calling <a href=../api#django_components.get_component_url><code>get_component_url()</code></a> with the parent <a href=../api#django_components.Component><code>Component</code></a> class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>url</span> <span class=o>==</span> <span class=n>get_component_url</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>component_cls</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.delete class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">delete</span> <a href=#django_components.ComponentView.delete class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>delete</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.get class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">get</span> <a href=#django_components.ComponentView.get class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.head class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">head</span> <a href=#django_components.ComponentView.head class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>head</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.options class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">options</span> <a href=#django_components.ComponentView.options class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>options</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.patch class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">patch</span> <a href=#django_components.ComponentView.patch class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>patch</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.post class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">post</span> <a href=#django_components.ComponentView.post class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>post</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.put class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">put</span> <a href=#django_components.ComponentView.put class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>put</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ComponentView.trace class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">trace</span> <a href=#django_components.ComponentView.trace class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>trace</span><span class=p>(</span><span class=n>request</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.2/_objects/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ComponentsSettings class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentsSettings</span> <a href=#django_components.ComponentsSettings class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>tuple</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L139 target=_blank>See source code</a></p> <p>Settings available for django_components.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>autodiscover</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>dirs</span> <span class=o>=</span> <span class=p>[</span><span class=n>BASE_DIR</span> <span class=o>/</span> <span class=s2>&quot;components&quot;</span><span class=p>],</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=p>)</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" app_dirs
class-attribute
instance-attribute
(django_components.ComponentsSettings.app_dirs)" href=#django_components.ComponentsSettings.app_dirs>app_dirs</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Sequence href=https://docs.python.org/3.12/library/typing.html#typing.Sequence>Sequence</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" autodiscover
class-attribute
instance-attribute
(django_components.ComponentsSettings.autodiscover)" href=#django_components.ComponentsSettings.autodiscover>autodiscover</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" cache
class-attribute
instance-attribute
(django_components.ComponentsSettings.cache)" href=#django_components.ComponentsSettings.cache>cache</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" context_behavior
class-attribute
instance-attribute
(django_components.ComponentsSettings.context_behavior)" href=#django_components.ComponentsSettings.context_behavior>context_behavior</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<span title=django_components.app_settings.ContextBehaviorType>ContextBehaviorType</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" debug_highlight_components
class-attribute
instance-attribute
(django_components.ComponentsSettings.debug_highlight_components)" href=#django_components.ComponentsSettings.debug_highlight_components>debug_highlight_components</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" debug_highlight_slots
class-attribute
instance-attribute
(django_components.ComponentsSettings.debug_highlight_slots)" href=#django_components.ComponentsSettings.debug_highlight_slots>debug_highlight_slots</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" dirs
class-attribute
instance-attribute
(django_components.ComponentsSettings.dirs)" href=#django_components.ComponentsSettings.dirs>dirs</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Sequence href=https://docs.python.org/3.12/library/typing.html#typing.Sequence>Sequence</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=os.PathLike href=https://docs.python.org/3.12/library/os.html#os.PathLike>PathLike</a>, <a class="autorefs autorefs-external" title=typing.Tuple href=https://docs.python.org/3.12/library/typing.html#typing.Tuple>Tuple</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>], <a class="autorefs autorefs-external" title=typing.Tuple href=https://docs.python.org/3.12/library/typing.html#typing.Tuple>Tuple</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=os.PathLike href=https://docs.python.org/3.12/library/os.html#os.PathLike>PathLike</a>]]]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" dynamic_component_name
class-attribute
instance-attribute
(django_components.ComponentsSettings.dynamic_component_name)" href=#django_components.ComponentsSettings.dynamic_component_name>dynamic_component_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" extensions
class-attribute
instance-attribute
(django_components.ComponentsSettings.extensions)" href=#django_components.ComponentsSettings.extensions>extensions</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Sequence href=https://docs.python.org/3.12/library/typing.html#typing.Sequence>Sequence</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" ComponentExtension (django_components.extension.ComponentExtension)" href=#django_components.ComponentExtension>ComponentExtension</a>], <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" extensions_defaults
class-attribute
instance-attribute
(django_components.ComponentsSettings.extensions_defaults)" href=#django_components.ComponentsSettings.extensions_defaults>extensions_defaults</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" forbidden_static_files
class-attribute
instance-attribute
(django_components.ComponentsSettings.forbidden_static_files)" href=#django_components.ComponentsSettings.forbidden_static_files>forbidden_static_files</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=re.Pattern href=https://docs.python.org/3.12/library/re.html#re.Pattern>Pattern</a>]]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" libraries
class-attribute
instance-attribute
(django_components.ComponentsSettings.libraries)" href=#django_components.ComponentsSettings.libraries>libraries</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" multiline_tags
class-attribute
instance-attribute
(django_components.ComponentsSettings.multiline_tags)" href=#django_components.ComponentsSettings.multiline_tags>multiline_tags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" reload_on_file_change
class-attribute
instance-attribute
(django_components.ComponentsSettings.reload_on_file_change)" href=#django_components.ComponentsSettings.reload_on_file_change>reload_on_file_change</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" reload_on_template_change
class-attribute
instance-attribute
(django_components.ComponentsSettings.reload_on_template_change)" href=#django_components.ComponentsSettings.reload_on_template_change>reload_on_template_change</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" static_files_allowed
class-attribute
instance-attribute
(django_components.ComponentsSettings.static_files_allowed)" href=#django_components.ComponentsSettings.static_files_allowed>static_files_allowed</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=re.Pattern href=https://docs.python.org/3.12/library/re.html#re.Pattern>Pattern</a>]]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" static_files_forbidden
class-attribute
instance-attribute
(django_components.ComponentsSettings.static_files_forbidden)" href=#django_components.ComponentsSettings.static_files_forbidden>static_files_forbidden</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=re.Pattern href=https://docs.python.org/3.12/library/re.html#re.Pattern>Pattern</a>]]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tag_formatter
class-attribute
instance-attribute
(django_components.ComponentsSettings.tag_formatter)" href=#django_components.ComponentsSettings.tag_formatter>tag_formatter</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-internal" title=" TagFormatterABC (django_components.tag_formatter.TagFormatterABC)" href=#django_components.TagFormatterABC>TagFormatterABC</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_cache_size
class-attribute
instance-attribute
(django_components.ComponentsSettings.template_cache_size)" href=#django_components.ComponentsSettings.template_cache_size>template_cache_size</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#int>int</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.app_dirs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">app_dirs</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.app_dirs class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>app_dirs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Sequence href=https://docs.python.org/3.12/library/typing.html#typing.Sequence>Sequence</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L239 target=_blank>See source code</a></p> <p>Specify the app-level directories that contain your components.</p> <p>Defaults to <code>["components"]</code>. That is, for each Django app, we search <code>&lt;app&gt;/components/</code> for components.</p> <p>The paths must be relative to app, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>app_dirs</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;my_comps&quot;</span><span class=p>],</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> <p>To search for <code>&lt;app&gt;/my_comps/</code>.</p> <p>These locations are searched during <a href=../../concepts/fundamentals/autodiscovery/ >autodiscovery</a>, or when you <a href=../../concepts/fundamentals/html_js_css_files/ >define HTML, JS, or CSS as separate files</a>.</p> <p>Set to empty list to disable app-level components:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>app_dirs</span><span class=o>=</span><span class=p>[],</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.autodiscover class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">autodiscover</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.autodiscover class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>autodiscover</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L199 target=_blank>See source code</a></p> <p>Toggle whether to run <a href=../../concepts/fundamentals/autodiscovery/ >autodiscovery</a> at the Django server startup.</p> <p>Defaults to <code>True</code></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>autodiscover</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.cache class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">cache</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.cache class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>cache</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L267 target=_blank>See source code</a></p> <p>Name of the <a href=https://docs.djangoproject.com/en/5.2/topics/cache/ >Django cache</a> to be used for storing component's JS and CSS files.</p> <p>If <code>None</code>, a <a href=https://docs.djangoproject.com/en/5.2/topics/cache/#local-memory-caching><code>LocMemCache</code></a> is used with default settings.</p> <p>Defaults to <code>None</code>.</p> <p>Read more about <a href=../../guides/setup/caching/ >caching</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>cache</span><span class=o>=</span><span class=s2>&quot;my_cache&quot;</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.context_behavior class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">context_behavior</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.context_behavior class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>context_behavior</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.app_settings.ContextBehaviorType>ContextBehaviorType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L286 target=_blank>See source code</a></p> <p>Configure whether, inside a component template, you can use variables from the outside (<a href=./#django_components.ContextBehavior.DJANGO><code>"django"</code></a>) or not (<a href=./#django_components.ContextBehavior.ISOLATED><code>"isolated"</code></a>). This also affects what variables are available inside the <a href=../template_tags/#fill><code>{% fill %}</code></a> tags.</p> <p>Also see <a href=../../concepts/advanced/component_context_scope/#context-behavior>Component context and scope</a>.</p> <p>Defaults to <code>"django"</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>context_behavior</span><span class=o>=</span><span class=s2>&quot;isolated&quot;</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> <blockquote> <p>NOTE: <code>context_behavior</code> and <code>slot_context_behavior</code> options were merged in v0.70.</p> <p>If you are migrating from BEFORE v0.67, set <code>context_behavior</code> to <code>"django"</code>. From v0.67 to v0.78 (incl) the default value was <code>"isolated"</code>.</p> <p>For v0.79 and later, the default is again <code>"django"</code>. See the rationale for change <a href=https://github.com/django-components/django-components/issues/498>here</a>.</p> </blockquote> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.debug_highlight_components class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">debug_highlight_components</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.debug_highlight_components class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>debug_highlight_components</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L314 target=_blank>See source code</a></p> <p>DEPRECATED. Use <a href=../settings/#django_components.app_settings.ComponentsSettings.extensions_defaults><code>extensions_defaults</code></a> instead. Will be removed in v1.</p> <p>Enable / disable component highlighting. See <a href=../../guides/other/troubleshooting/#component-and-slot-highlighting>Troubleshooting</a> for more details.</p> <p>Defaults to <code>False</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>debug_highlight_components</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.debug_highlight_slots class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">debug_highlight_slots</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.debug_highlight_slots class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>debug_highlight_slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L333 target=_blank>See source code</a></p> <p>DEPRECATED. Use <a href=../settings/#django_components.app_settings.ComponentsSettings.extensions_defaults><code>extensions_defaults</code></a> instead. Will be removed in v1.</p> <p>Enable / disable slot highlighting. See <a href=../../guides/other/troubleshooting/#component-and-slot-highlighting>Troubleshooting</a> for more details.</p> <p>Defaults to <code>False</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>debug_highlight_slots</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.dirs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">dirs</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.dirs class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>dirs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Sequence href=https://docs.python.org/3.12/library/typing.html#typing.Sequence>Sequence</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=os.PathLike href=https://docs.python.org/3.12/library/os.html#os.PathLike>PathLike</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Tuple href=https://docs.python.org/3.12/library/typing.html#typing.Tuple>Tuple</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Tuple href=https://docs.python.org/3.12/library/typing.html#typing.Tuple>Tuple</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=os.PathLike href=https://docs.python.org/3.12/library/os.html#os.PathLike>PathLike</a></span><span class=p>]]]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L212 target=_blank>See source code</a></p> <p>Specify the directories that contain your components.</p> <p>Defaults to <code>[Path(settings.BASE_DIR) / "components"]</code>. That is, the root <code>components/</code> app.</p> <p>Directories must be full paths, same as with <a href=https://docs.djangoproject.com/en/5.2/ref/settings/#std-setting-STATICFILES_DIRS>STATICFILES_DIRS</a>.</p> <p>These locations are searched during <a href=../../concepts/fundamentals/autodiscovery/ >autodiscovery</a>, or when you <a href=../../concepts/fundamentals/html_js_css_files/ >define HTML, JS, or CSS as separate files</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>dirs</span><span class=o>=</span><span class=p>[</span><span class=n>BASE_DIR</span> <span class=o>/</span> <span class=s2>&quot;components&quot;</span><span class=p>],</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> <p>Set to empty list to disable global components directories:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>dirs</span><span class=o>=</span><span class=p>[],</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.dynamic_component_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">dynamic_component_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.dynamic_component_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>dynamic_component_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L351 target=_blank>See source code</a></p> <p>By default, the <a href=../components/#django_components.components.dynamic.DynamicComponent>dynamic component</a> is registered under the name <code>"dynamic"</code>.</p> <p>In case of a conflict, you can use this setting to change the component name used for the dynamic components.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># settings.py</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>dynamic_component_name</span><span class=o>=</span><span class=s2>&quot;my_dynamic&quot;</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=p>)</span>
</code></pre></div> <p>After which you will be able to use the dynamic component with the new name:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_dynamic&quot;</span> <span class=k>is</span><span class=o>=</span><span class=nv>table_comp</span> <span class=nv>data</span><span class=o>=</span><span class=nv>table_data</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>table_headers</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;pagination&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.extensions class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">extensions</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.extensions class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>extensions</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Sequence href=https://docs.python.org/3.12/library/typing.html#typing.Sequence>Sequence</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentExtension (django_components.extension.ComponentExtension)" href=#django_components.ComponentExtension>ComponentExtension</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L153 target=_blank>See source code</a></p> <p>List of <a href=../../concepts/advanced/extensions/ >extensions</a> to be loaded.</p> <p>The extensions can be specified as:</p> <ul> <li>Python import path, e.g. <code>"path.to.my_extension.MyExtension"</code>.</li> <li>Extension class, e.g. <code>my_extension.MyExtension</code>.</li> </ul> <p>Read more about <a href=../../concepts/advanced/extensions/ >extensions</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>extensions</span><span class=o>=</span><span class=p>[</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=s2>&quot;path.to.my_extension.MyExtension&quot;</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>StorybookExtension</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p>],</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.extensions_defaults class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">extensions_defaults</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.extensions_defaults class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>extensions_defaults</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L176 target=_blank>See source code</a></p> <p>Global defaults for the extension classes.</p> <p>Read more about <a href=../../concepts/advanced/extensions/#extension-defaults>Extension defaults</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>extensions_defaults</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=s2>&quot;my_extension&quot;</span><span class=p>:</span> <span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;my_setting&quot;</span><span class=p>:</span> <span class=s2>&quot;my_value&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p>},</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=s2>&quot;cache&quot;</span><span class=p>:</span> <span class=p>{</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;enabled&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;ttl&quot;</span><span class=p>:</span> <span class=mi>60</span><span class=p>,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>},</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=p>},</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.forbidden_static_files class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">forbidden_static_files</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.forbidden_static_files class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>forbidden_static_files</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=re.Pattern href=https://docs.python.org/3.12/library/re.html#re.Pattern>Pattern</a></span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L516 target=_blank>See source code</a></p> <p>Deprecated. Use <a href=../settings/#django_components.app_settings.ComponentsSettings.static_files_forbidden><code>COMPONENTS.static_files_forbidden</code></a> instead.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.libraries class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">libraries</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.libraries class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>libraries</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L377 target=_blank>See source code</a></p> <p>Configure extra python modules that should be loaded.</p> <p>This may be useful if you are not using the <a href=../../concepts/fundamentals/autodiscovery/ >autodiscovery feature</a>, or you need to load components from non-standard locations. Thus you can have a structure of components that is independent from your apps.</p> <p>Expects a list of python module paths. Defaults to empty list.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>libraries</span><span class=o>=</span><span class=p>[</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=s2>&quot;mysite.components.forms&quot;</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;mysite.components.buttons&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;mysite.components.cards&quot;</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>],</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=p>)</span>
</code></pre></div> <p>This would be the equivalent of importing these modules from within Django's <a href=https://docs.djangoproject.com/en/5.2/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>def</span><span class=w> </span><span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=kn>import</span><span class=w> </span><span class=s2>&quot;mysite.components.forms&quot;</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=kn>import</span><span class=w> </span><span class=s2>&quot;mysite.components.buttons&quot;</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=kn>import</span><span class=w> </span><span class=s2>&quot;mysite.components.cards&quot;</span>
</code></pre></div> <h4 id=django_components.ComponentsSettings.libraries--manually-loading-libraries>Manually loading libraries<a class=headerlink href=#django_components.ComponentsSettings.libraries--manually-loading-libraries title="Permanent link">¤</a></h4> <p>In the rare case that you need to manually trigger the import of libraries, you can use the <a href=./#django_components.import_libraries><code>import_libraries()</code></a> function:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>import_libraries</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=n>import_libraries</span><span class=p>()</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.multiline_tags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">multiline_tags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.multiline_tags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>multiline_tags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L422 target=_blank>See source code</a></p> <p>Enable / disable <a href=../../concepts/fundamentals/template_tag_syntax/#multiline-tags>multiline support for template tags</a>. If <code>True</code>, template tags like <code>{% component %}</code> or <code>{{ my_var }}</code> can span multiple lines.</p> <p>Defaults to <code>True</code>.</p> <p>Disable this setting if you are making custom modifications to Django's regular expression for parsing templates at <code>django.template.base.tag_re</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>multiline_tags</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.reload_on_file_change class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">reload_on_file_change</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.reload_on_file_change class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>reload_on_file_change</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L446 target=_blank>See source code</a></p> <p>This is relevant if you are using the project structure where HTML, JS, CSS and Python are in separate files and nested in a directory.</p> <p>In this case you may notice that when you are running a development server, the server sometimes does not reload when you change component files.</p> <p>Django's native <a href=https://stackoverflow.com/a/66023029/9788634>live reload</a> logic handles only Python files and HTML template files. It does NOT reload when other file types change or when template files are nested more than one level deep.</p> <p>The setting <code>reload_on_file_change</code> fixes this, reloading the dev server even when your component's HTML, JS, or CSS changes.</p> <p>If <code>True</code>, django_components configures Django to reload when files inside <a href=../settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> change.</p> <p>See <a href=../../guides/setup/development_server/#reload-dev-server-on-component-file-changes>Reload dev server on component file changes</a>.</p> <p>Defaults to <code>False</code>.</p> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>This setting should be enabled only for the dev environment!</p> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.reload_on_template_change class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">reload_on_template_change</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.reload_on_template_change class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>reload_on_template_change</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L441 target=_blank>See source code</a></p> <p>Deprecated. Use <a href=../settings/#django_components.app_settings.ComponentsSettings.reload_on_file_change><code>COMPONENTS.reload_on_file_change</code></a> instead.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.static_files_allowed class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">static_files_allowed</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.static_files_allowed class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>static_files_allowed</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=re.Pattern href=https://docs.python.org/3.12/library/re.html#re.Pattern>Pattern</a></span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L476 target=_blank>See source code</a></p> <p>A list of file extensions (including the leading dot) that define which files within <a href=../settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> are treated as <a href=https://docs.djangoproject.com/en/5.2/howto/static-files/ >static files</a>.</p> <p>If a file is matched against any of the patterns, it's considered a static file. Such files are collected when running <a href=https://docs.djangoproject.com/en/5.2/ref/contrib/staticfiles/#collectstatic><code>collectstatic</code></a>, and can be accessed under the <a href=https://docs.djangoproject.com/en/5.2/ref/settings/#static-url>static file endpoint</a>.</p> <p>You can also pass in compiled regexes (<a href=https://docs.python.org/3/library/re.html#re.Pattern><code>re.Pattern</code></a>) for more advanced patterns.</p> <p>By default, JS, CSS, and common image and font file formats are considered static files:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>static_files_allowed</span><span class=o>=</span><span class=p>[</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=s2>&quot;.css&quot;</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;.js&quot;</span><span class=p>,</span> <span class=s2>&quot;.jsx&quot;</span><span class=p>,</span> <span class=s2>&quot;.ts&quot;</span><span class=p>,</span> <span class=s2>&quot;.tsx&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Images</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=s2>&quot;.apng&quot;</span><span class=p>,</span> <span class=s2>&quot;.png&quot;</span><span class=p>,</span> <span class=s2>&quot;.avif&quot;</span><span class=p>,</span> <span class=s2>&quot;.gif&quot;</span><span class=p>,</span> <span class=s2>&quot;.jpg&quot;</span><span class=p>,</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;.jpeg&quot;</span><span class=p>,</span> <span class=s2>&quot;.jfif&quot;</span><span class=p>,</span> <span class=s2>&quot;.pjpeg&quot;</span><span class=p>,</span> <span class=s2>&quot;.pjp&quot;</span><span class=p>,</span> <span class=s2>&quot;.svg&quot;</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;.webp&quot;</span><span class=p>,</span> <span class=s2>&quot;.bmp&quot;</span><span class=p>,</span> <span class=s2>&quot;.ico&quot;</span><span class=p>,</span> <span class=s2>&quot;.cur&quot;</span><span class=p>,</span> <span class=s2>&quot;.tif&quot;</span><span class=p>,</span> <span class=s2>&quot;.tiff&quot;</span><span class=p>,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=c1># Fonts</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=s2>&quot;.eot&quot;</span><span class=p>,</span> <span class=s2>&quot;.ttf&quot;</span><span class=p>,</span> <span class=s2>&quot;.woff&quot;</span><span class=p>,</span> <span class=s2>&quot;.otf&quot;</span><span class=p>,</span> <span class=s2>&quot;.svg&quot;</span><span class=p>,</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=p>],</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=p>)</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Exposing your Python files can be a security vulnerability. See <a href=../../overview/security_notes/ >Security notes</a>.</p> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.static_files_forbidden class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">static_files_forbidden</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.static_files_forbidden class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>static_files_forbidden</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=re.Pattern href=https://docs.python.org/3.12/library/re.html#re.Pattern>Pattern</a></span><span class=p>]]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L521 target=_blank>See source code</a></p> <p>A list of file extensions (including the leading dot) that define which files within <a href=../settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> will NEVER be treated as <a href=https://docs.djangoproject.com/en/5.2/howto/static-files/ >static files</a>.</p> <p>If a file is matched against any of the patterns, it will never be considered a static file, even if the file matches a pattern in <a href=../settings/#django_components.app_settings.ComponentsSettings.static_files_allowed><code>static_files_allowed</code></a>.</p> <p>Use this setting together with <a href=../settings/#django_components.app_settings.ComponentsSettings.static_files_allowed><code>static_files_allowed</code></a> for a fine control over what file types will be exposed.</p> <p>You can also pass in compiled regexes (<a href=https://docs.python.org/3/library/re.html#re.Pattern><code>re.Pattern</code></a>) for more advanced patterns.</p> <p>By default, any HTML and Python are considered NOT static files:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>static_files_forbidden</span><span class=o>=</span><span class=p>[</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=s2>&quot;.html&quot;</span><span class=p>,</span> <span class=s2>&quot;.django&quot;</span><span class=p>,</span> <span class=s2>&quot;.dj&quot;</span><span class=p>,</span> <span class=s2>&quot;.tpl&quot;</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=c1># Python files</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;.py&quot;</span><span class=p>,</span> <span class=s2>&quot;.pyc&quot;</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=p>],</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=p>)</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Exposing your Python files can be a security vulnerability. See <a href=../../overview/security_notes/ >Security notes</a>.</p> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.tag_formatter class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tag_formatter</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.tag_formatter class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tag_formatter</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" TagFormatterABC (django_components.tag_formatter.TagFormatterABC)" href=#django_components.TagFormatterABC>TagFormatterABC</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L558 target=_blank>See source code</a></p> <p>Configure what syntax is used inside Django templates to render components. See the <a href=../tag_formatters/ >available tag formatters</a>.</p> <p>Defaults to <code>"django_components.component_formatter"</code>.</p> <p>Learn more about <a href=../../concepts/advanced/tag_formatters/ >Customizing component tags with TagFormatter</a>.</p> <p>Can be set either as direct reference:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>component_formatter</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;tag_formatter&quot;</span><span class=p>:</span> <span class=n>component_formatter</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=p>)</span>
</code></pre></div> <p>Or as an import string;</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=s2>&quot;tag_formatter&quot;</span><span class=p>:</span> <span class=s2>&quot;django_components.component_formatter&quot;</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=p>)</span>
</code></pre></div> <p><strong>Examples:</strong></p> <ul> <li> <p><code>"django_components.component_formatter"</code></p> <p>Set</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=s2>&quot;tag_formatter&quot;</span><span class=p>:</span> <span class=s2>&quot;django_components.component_formatter&quot;</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=p>)</span>
</code></pre></div> <p>To write components like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;button&quot;</span> <span class=nv>href</span><span class=o>=</span><span class=s2>&quot;...&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=x> Click me!</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> </li> <li> <p><code>django_components.component_shorthand_formatter</code></p> <p>Set</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <span class=s2>&quot;tag_formatter&quot;</span><span class=p>:</span> <span class=s2>&quot;django_components.component_shorthand_formatter&quot;</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=p>)</span>
</code></pre></div> <p>To write components like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=cp>{%</span> <span class=k>button</span> <span class=nv>href</span><span class=o>=</span><span class=s2>&quot;...&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=x> Click me!</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=cp>{%</span> <span class=k>endbutton</span> <span class=cp>%}</span>
</code></pre></div> </li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ComponentsSettings.template_cache_size class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_cache_size</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ComponentsSettings.template_cache_size class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_cache_size</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#int>int</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L625 target=_blank>See source code</a></p> <p>DEPRECATED. Template caching will be removed in v1.</p> <p>Configure the maximum amount of Django templates to be cached.</p> <p>Defaults to <code>128</code>.</p> <p>Each time a <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template>Django template</a> is rendered, it is cached to a global in-memory cache (using Python's <a href=https://docs.python.org/3/library/functools.html#functools.lru_cache><code>lru_cache</code></a> decorator). This speeds up the next render of the component. As the same component is often used many times on the same page, these savings add up.</p> <p>By default the cache holds 128 component templates in memory, which should be enough for most sites. But if you have a lot of components, or if you are overriding <a href=./#django_components.Component.get_template><code>Component.get_template()</code></a> to render many dynamic templates, you can increase this number.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>template_cache_size</span><span class=o>=</span><span class=mi>256</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=p>)</span>
</code></pre></div> <p>To remove the cache limit altogether and cache everything, set <code>template_cache_size</code> to <code>None</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>template_cache_size</span><span class=o>=</span><span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=p>)</span>
</code></pre></div> <p>If you want to add templates to the cache yourself, you can use <a href=./#django_components.cached_template><code>cached_template()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>cached_template</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=n>cached_template</span><span class=p>(</span><span class=s2>&quot;Variable: {{ variable }}&quot;</span><span class=p>)</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=c1># You can optionally specify Template class, and other Template inputs:</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a><span class=k>class</span><span class=w> </span><span class=nc>MyTemplate</span><span class=p>(</span><span class=n>Template</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>pass</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a><span class=n>cached_template</span><span class=p>(</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=s2>&quot;Variable: {{ variable }}&quot;</span><span class=p>,</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a> <span class=n>template_cls</span><span class=o>=</span><span class=n>MyTemplate</span><span class=p>,</span>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a> <span class=n>name</span><span class=o>=...</span>
<a id=__codelineno-2-13 name=__codelineno-2-13 href=#__codelineno-2-13></a> <span class=n>origin</span><span class=o>=...</span>
<a id=__codelineno-2-14 name=__codelineno-2-14 href=#__codelineno-2-14></a> <span class=n>engine</span><span class=o>=...</span>
<a id=__codelineno-2-15 name=__codelineno-2-15 href=#__codelineno-2-15></a><span class=p>)</span>
</code></pre></div> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ContextBehavior class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ContextBehavior</span> <a href=#django_components.ContextBehavior class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>str</code>, <code>enum.Enum</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L41 target=_blank>See source code</a></p> <p>Configure how (and whether) the context is passed to the component fills and what variables are available inside the <a href=../template_tags/#fill><code>{% fill %}</code></a> tags.</p> <p>Also see <a href=../../concepts/advanced/component_context_scope/#context-behavior>Component context and scope</a>.</p> <p><strong>Options:</strong></p> <ul> <li><code>django</code>: With this setting, component fills behave as usual Django tags.</li> <li><code>isolated</code>: This setting makes the component fills behave similar to Vue or React.</li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" DJANGO
class-attribute
instance-attribute
(django_components.ContextBehavior.DJANGO)" href=#django_components.ContextBehavior.DJANGO>DJANGO</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" ISOLATED
class-attribute
instance-attribute
(django_components.ContextBehavior.ISOLATED)" href=#django_components.ContextBehavior.ISOLATED>ISOLATED</a></code></b> <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ContextBehavior.DJANGO class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">DJANGO</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ContextBehavior.DJANGO class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>DJANGO</span> <span class=o>=</span> <span class=s1>&#39;django&#39;</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L54 target=_blank>See source code</a></p> <p>With this setting, component fills behave as usual Django tags. That is, they enrich the context, and pass it along.</p> <ol> <li>Component fills use the context of the component they are within.</li> <li>Variables from <a href=./#django_components.Component.get_template_data><code>Component.get_template_data()</code></a> are available to the component fill.</li> </ol> <p><strong>Example:</strong></p> <p>Given this template <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>with</span> <span class=nv>cheese</span><span class=o>=</span><span class=s2>&quot;feta&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s1>&#39;my_comp&#39;</span> <span class=cp>%}</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>my_var</span> <span class=cp>}}</span><span class=x> # my_var</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> </span><span class=cp>{{</span> <span class=nv>cheese</span> <span class=cp>}}</span><span class=x> # cheese</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
</code></pre></div></p> <p>and this context returned from the <code>Component.get_template_data()</code> method <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span>
</code></pre></div></p> <p>Then if component "my_comp" defines context <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span>
</code></pre></div></p> <p>Then this will render: <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=x>456 # my_var</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=x>feta # cheese</span>
</code></pre></div></p> <p>Because "my_comp" overrides the variable "my_var", so <code>{{ my_var }}</code> equals <code>456</code>.</p> <p>And variable "cheese" will equal <code>feta</code>, because the fill CAN access the current context.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ContextBehavior.ISOLATED class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">ISOLATED</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ContextBehavior.ISOLATED class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>ISOLATED</span> <span class=o>=</span> <span class=s1>&#39;isolated&#39;</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/app_settings.py#L98 target=_blank>See source code</a></p> <p>This setting makes the component fills behave similar to Vue or React, where the fills use EXCLUSIVELY the context variables defined in <a href=./#django_components.Component.get_template_data><code>Component.get_template_data()</code></a>.</p> <p><strong>Example:</strong></p> <p>Given this template <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>with</span> <span class=nv>cheese</span><span class=o>=</span><span class=s2>&quot;feta&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s1>&#39;my_comp&#39;</span> <span class=cp>%}</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>my_var</span> <span class=cp>}}</span><span class=x> # my_var</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> </span><span class=cp>{{</span> <span class=nv>cheese</span> <span class=cp>}}</span><span class=x> # cheese</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
</code></pre></div></p> <p>and this context returned from the <code>get_template_data()</code> method <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span>
</code></pre></div></p> <p>Then if component "my_comp" defines context <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span>
</code></pre></div></p> <p>Then this will render: <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=x>123 # my_var</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=x> # cheese</span>
</code></pre></div></p> <p>Because both variables "my_var" and "cheese" are taken from the root context. Since "cheese" is not defined in root context, it's empty.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.Default class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">Default</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-dataclass"><code>dataclass</code></small> </span> <a href=#django_components.Default class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>Default</span><span class=p>(</span><span class=n>value</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>])</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>object</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/defaults.py#L27 target=_blank>See source code</a></p> <p>Use this class to mark a field on the <code>Component.Defaults</code> class as a factory.</p> <p>Read more about <a href=../../concepts/fundamentals/component_defaults>Component defaults</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Default</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Defaults</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=c1># Plain value doesn&#39;t need a factory</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>position</span> <span class=o>=</span> <span class=s2>&quot;left&quot;</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=c1># Lists and dicts need to be wrapped in `Default`</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=c1># Otherwise all instances will share the same value</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=n>selected_items</span> <span class=o>=</span> <span class=n>Default</span><span class=p>(</span><span class=k>lambda</span><span class=p>:</span> <span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>])</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" value
instance-attribute
(django_components.Default.value)" href=#django_components.Default.value>value</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a>[[], <a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Default.value class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">value</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Default.value class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>value</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.DependenciesStrategy class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">DependenciesStrategy</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.DependenciesStrategy class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>DependenciesStrategy</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.Literal href=https://docs.python.org/3.12/library/typing.html#typing.Literal>Literal</a></span><span class=p>[</span><span class=s1>&#39;document&#39;</span><span class=p>,</span> <span class=s1>&#39;fragment&#39;</span><span class=p>,</span> <span class=s1>&#39;simple&#39;</span><span class=p>,</span> <span class=s1>&#39;prepend&#39;</span><span class=p>,</span> <span class=s1>&#39;append&#39;</span><span class=p>,</span> <span class=s1>&#39;ignore&#39;</span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/dependencies.py#L41 target=_blank>See source code</a></p> <p>Type for the available strategies for rendering JS and CSS dependencies.</p> <p>Read more about the <a href=../../concepts/advanced/rendering_js_css>dependencies strategies</a>.</p> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.Empty class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">Empty</span> <a href=#django_components.Empty class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>tuple</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/util/types.py#L4 target=_blank>See source code</a></p> <p>Type for an object with no members.</p> <p>You can use this to define <a href=../api#django_components.Component>Component</a> types that accept NO args, kwargs, slots, etc:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Empty</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>Args</span> <span class=o>=</span> <span class=n>Empty</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>Kwargs</span> <span class=o>=</span> <span class=n>Empty</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=o>...</span>
</code></pre></div> <p>This class is a shorthand for:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>Empty</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>pass</span>
</code></pre></div> <p>Read more about <a href=../../concepts/fundamentals/typing_and_validation>Typing and validation</a>.</p> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ExtensionComponentConfig class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ExtensionComponentConfig</span> <a href=#django_components.ExtensionComponentConfig class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ExtensionComponentConfig</span><span class=p>(</span><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>object</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L212 target=_blank>See source code</a></p> <p><code>ExtensionComponentConfig</code> is the base class for all extension component configs.</p> <p>Extensions can define nested classes on the component class, such as <a href=./#django_components.Component.View><code>Component.View</code></a> or <a href=./#django_components.Component.Cache><code>Component.Cache</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=o>...</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Cache</span><span class=p>:</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>ttl</span> <span class=o>=</span> <span class=mi>60</span>
</code></pre></div> <p>This allows users to configure extension behavior per component.</p> <p>Behind the scenes, the nested classes that users define on their components are merged with the extension's "base" class.</p> <p>So the example above is the same as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>(</span><span class=n>ViewExtension</span><span class=o>.</span><span class=n>ComponentConfig</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=o>...</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Cache</span><span class=p>(</span><span class=n>CacheExtension</span><span class=o>.</span><span class=n>ComponentConfig</span><span class=p>):</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>ttl</span> <span class=o>=</span> <span class=mi>60</span>
</code></pre></div> <p>Where both <code>ViewExtension.ComponentConfig</code> and <code>CacheExtension.ComponentConfig</code> are subclasses of <code>ExtensionComponentConfig</code>.</p> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component
instance-attribute
(django_components.ExtensionComponentConfig.component)" href=#django_components.ExtensionComponentConfig.component>component</a></code></b> (<code><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_class
instance-attribute
(django_components.ExtensionComponentConfig.component_class)" href=#django_components.ExtensionComponentConfig.component_class>component_class</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_cls
instance-attribute
(django_components.ExtensionComponentConfig.component_cls)" href=#django_components.ExtensionComponentConfig.component_cls>component_cls</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ExtensionComponentConfig.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ExtensionComponentConfig.component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span> <span class=o>=</span> <span class=n><span title=django_components.extension.ExtensionComponentConfig(component)>component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L269 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L258 target=_blank>See source code</a></p> <p>When a <a href=./#django_components.Component><code>Component</code></a> is instantiated, also the nested extension classes (such as <code>Component.View</code>) are instantiated, receiving the component instance as an argument.</p> <p>This attribute holds the owner <a href=./#django_components.Component><code>Component</code></a> instance that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ExtensionComponentConfig.component_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ExtensionComponentConfig.component_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_class</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L255 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ExtensionComponentConfig.component_cls class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_cls</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ExtensionComponentConfig.component_cls class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_cls</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extension.py#L251 target=_blank>See source code</a></p> <p>The <a href=./#django_components.Component><code>Component</code></a> class that this extension is defined on.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.FillNode class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">FillNode</span> <a href=#django_components.FillNode class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>FillNode</span><span class=p>(</span><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>],</span> <span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>nodelist</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.node.BaseNode</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L991 target=_blank>See source code</a></p> <p>Use <a href=../template_tags#fill><code>{% fill %}</code></a> tag to insert content into component's <a href=../../concepts/fundamentals/slots>slots</a>.</p> <p><a href=../template_tags#fill><code>{% fill %}</code></a> tag may be used only within a <code>{% component %}..{% endcomponent %}</code> block, and raises a <code>TemplateSyntaxError</code> if used outside of a component.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Name of the slot to insert this content into. Use <code>"default"</code> for the <a href=../../concepts/fundamentals/slots#default-slot>default slot</a>.</li> <li><code>data</code> (str, optional): This argument allows you to access the data passed to the slot under the specified variable name. See <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</li> <li><code>fallback</code> (str, optional): This argument allows you to access the original content of the slot under the specified variable name. See <a href=../../concepts/fundamentals/slots#slot-fallback>Slot fallback</a>.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_table&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> &lt; 1 | 2 | 3 &gt;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <h5 id=django_components.FillNode--access-slot-fallback>Access slot fallback<a class=headerlink href=#django_components.FillNode--access-slot-fallback title="Permanent link">¤</a></h5> <p>Use the <code>fallback</code> kwarg to access the original content of the slot.</p> <p>The <code>fallback</code> kwarg defines the name of the variable that will contain the slot's fallback content.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-fallback>Slot fallback</a>.</p> <p>Component template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=c>{# my_table.html #}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x>&lt;table&gt;</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x> ...</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;pagination&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=x> &lt; 1 | 2 | 3 &gt;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a><span class=x>&lt;/table&gt;</span>
</code></pre></div> <p>Fill:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_table&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>&quot;fallback&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=x> &lt;div class=&quot;my-class&quot;&gt;</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=x> </span><span class=cp>{{</span> <span class=nv>fallback</span> <span class=cp>}}</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <h5 id=django_components.FillNode--access-slot-data>Access slot data<a class=headerlink href=#django_components.FillNode--access-slot-data title="Permanent link">¤</a></h5> <p>Use the <code>data</code> kwarg to access the data passed to the slot.</p> <p>The <code>data</code> kwarg defines the name of the variable that will contain the slot's data.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</p> <p>Component template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=c>{# my_table.html #}</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=x>&lt;table&gt;</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=x> ...</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;pagination&quot;</span> <span class=nv>pages</span><span class=o>=</span><span class=nv>pages</span> <span class=cp>%}</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a><span class=x> &lt; 1 | 2 | 3 &gt;</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a><span class=x>&lt;/table&gt;</span>
</code></pre></div> <p>Fill:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_table&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=nv>data</span><span class=o>=</span><span class=s2>&quot;slot_data&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>for</span> <span class=nv>page</span> <span class=k>in</span> <span class=nv>slot_data.pages</span> <span class=cp>%}</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=x> &lt;a href=&quot;</span><span class=cp>{{</span> <span class=nv>page.link</span> <span class=cp>}}</span><span class=x>&quot;&gt;</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=x> </span><span class=cp>{{</span> <span class=nv>page.index</span> <span class=cp>}}</span>
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a><span class=x> &lt;/a&gt;</span>
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <h5 id=django_components.FillNode--using-default-slot>Using default slot<a class=headerlink href=#django_components.FillNode--using-default-slot title="Permanent link">¤</a></h5> <p>To access slot data and the fallback slot content on the default slot, use <a href=../template_tags#fill><code>{% fill %}</code></a> with <code>name</code> set to <code>"default"</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;button&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;default&quot;</span> <span class=nv>data</span><span class=o>=</span><span class=s2>&quot;slot_data&quot;</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>&quot;slot_fallback&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=x> You clicked me </span><span class=cp>{{</span> <span class=nv>slot_data.count</span> <span class=cp>}}</span><span class=x> times!</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_fallback</span> <span class=cp>}}</span>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <h5 id=django_components.FillNode--slot-fills-from-python>Slot fills from Python<a class=headerlink href=#django_components.FillNode--slot-fills-from-python title="Permanent link">¤</a></h5> <p>You can pass a slot fill from Python to a component by setting the <code>body</code> kwarg on the <a href=../template_tags#fill><code>{% fill %}</code></a> tag.</p> <p>First pass a <a href=../api#django_components.Slot><code>Slot</code></a> instance to the template with the <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> method:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>Slot</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a> <span class=s2>&quot;my_slot&quot;</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>&quot;Hello, world!&quot;</span><span class=p>),</span>
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=p>}</span>
</code></pre></div> <p>Then pass the slot to the <a href=../template_tags#fill><code>{% fill %}</code></a> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;table&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=nv>body</span><span class=o>=</span><span class=nv>my_slot</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>If you define both the <code>body</code> kwarg and the <a href=../template_tags#fill><code>{% fill %}</code></a> tag's body, an error will be raised.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;table&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;pagination&quot;</span> <span class=nv>body</span><span class=o>=</span><span class=nv>my_slot</span> <span class=cp>%}</span>
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=x> ...</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> </div> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" parse
classmethod
(django_components.FillNode.parse)" href=#django_components.FillNode.parse>parse</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" register
classmethod
(django_components.FillNode.register)" href=#django_components.FillNode.register>register</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render (django_components.FillNode.render)" href=#django_components.FillNode.render>render</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" unregister
classmethod
(django_components.FillNode.unregister)" href=#django_components.FillNode.unregister>unregister</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" active_flags
property
(django_components.FillNode.active_flags)" href=#django_components.FillNode.active_flags>active_flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" allowed_flags
class-attribute
instance-attribute
(django_components.FillNode.allowed_flags)" href=#django_components.FillNode.allowed_flags>allowed_flags</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" contents
instance-attribute
(django_components.FillNode.contents)" href=#django_components.FillNode.contents>contents</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" end_tag
class-attribute
instance-attribute
(django_components.FillNode.end_tag)" href=#django_components.FillNode.end_tag>end_tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" flags
instance-attribute
(django_components.FillNode.flags)" href=#django_components.FillNode.flags>flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" node_id
instance-attribute
(django_components.FillNode.node_id)" href=#django_components.FillNode.node_id>node_id</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" nodelist
instance-attribute
(django_components.FillNode.nodelist)" href=#django_components.FillNode.nodelist>nodelist</a></code></b> (<code><span title=django.template.base.NodeList>NodeList</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" params
instance-attribute
(django_components.FillNode.params)" href=#django_components.FillNode.params>params</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<span title=django_components.util.template_tag.TagAttr>TagAttr</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tag
class-attribute
instance-attribute
(django_components.FillNode.tag)" href=#django_components.FillNode.tag>tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_component
instance-attribute
(django_components.FillNode.template_component)" href=#django_components.FillNode.template_component>template_component</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_name
instance-attribute
(django_components.FillNode.template_name)" href=#django_components.FillNode.template_name>template_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.active_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">active_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.FillNode.active_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>active_flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L506 target=_blank>See source code</a></p> <p>Flags that were set for this specific instance as a list of strings.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>Will have the following flags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.allowed_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">allowed_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.allowed_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.contents class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">contents</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.contents class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(contents)>contents</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L498 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L435 target=_blank>See source code</a></p> <p>The contents of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>contents</code> will be <code>"&lt;div&gt; ... &lt;/div&gt;"</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.end_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">end_tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.end_tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>end_tag</span> <span class=o>=</span> <span class=s1>&#39;endfill&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(flags)>flags</span></span> <span class=ow>or</span> <span class=p>{</span><span class=n><span title=flag>flag</span></span><span class=p>:</span> <span class=n>Falsefor</span> <span class=n><span title=flag>flag</span></span> <span class=ow>in</span> <span class=p>(</span><span class=n><span title=django_components.node.BaseNode(self).allowed_flags>allowed_flags</span></span> <span class=ow>or</span> <span class=p>[])}</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L495 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L376 target=_blank>See source code</a></p> <p>Dictionary of all <a href=../api#django_components.BaseNode.allowed_flags><code>allowed_flags</code></a> that were set on the tag.</p> <p>Flags that were set are <code>True</code>, and the rest are <code>False</code>.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 2 flags, <code>default</code> and <code>required</code>, but only <code>default</code> was set.</p> <p>The <code>flags</code> dictionary will be:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=s2>&quot;default&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=s2>&quot;required&quot;</span><span class=p>:</span> <span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=p>}</span>
</code></pre></div> <p>You can check if a flag is set by doing:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>if</span> <span class=n>node</span><span class=o>.</span><span class=n>flags</span><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>]:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=o>...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.node_id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">node_id</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.node_id class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(node_id)>node_id</span></span> <span class=ow>or</span> <span class=n><span title=django_components.util.misc.gen_id>gen_id</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L497 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L452 target=_blank>See source code</a></p> <p>The unique ID of the node.</p> <p>Extensions can use this ID to store additional information.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.nodelist class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">nodelist</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.nodelist class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>nodelist</span><span class=p>:</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(nodelist)>nodelist</span></span> <span class=ow>or</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L496 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L415 target=_blank>See source code</a></p> <p>The nodelist of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>nodelist</code> will contain the <code>&lt;div&gt; ... &lt;/div&gt;</code> part.</p> <p>Unlike <a href=../api#django_components.BaseNode.contents><code>contents</code></a>, the <code>nodelist</code> contains the actual Nodes, not just the text.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.params class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">params</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.params class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(params)>params</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L494 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L357 target=_blank>See source code</a></p> <p>The parameters to the tag in the template.</p> <p>A single param represents an arg or kwarg of the template tag.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=s1>&#39;val2 two&#39;</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 3 params:</p> <ul> <li>Posiitonal arg <code>"my_comp"</code></li> <li>Keyword arg <code>key=val</code></li> <li>Keyword arg <code>key2='val2 two'</code></li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tag</span> <span class=o>=</span> <span class=s1>&#39;fill&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.template_component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.template_component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_component)>template_component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L500 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L474 target=_blank>See source code</a></p> <p>If the template that contains this node belongs to a <a href=../api#django_components.Component><code>Component</code></a>, then this will be the <a href=../api#django_components.Component><code>Component</code></a> class.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.FillNode.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.FillNode.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_name)>template_name</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L499 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L459 target=_blank>See source code</a></p> <p>The name of the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template><code>Template</code></a> that contains this node.</p> <p>The template name is set by Django's <a href=https://docs.djangoproject.com/en/5.2/topics/templates/#loaders>template loaders</a>.</p> <p>For example, the filesystem template loader will set this to the absolute path of the template file.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a>&quot;/home/user/project/templates/my_template.html&quot;
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.FillNode.parse class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">parse</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.FillNode.parse class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>parse</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=" BaseNode (django_components.node.BaseNode)" href=#django_components.BaseNode>BaseNode</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L528 target=_blank>See source code</a></p> <p>This function is what is passed to Django's <code>Library.tag()</code> when <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-tags/#registering-the-tag>registering the tag</a>.</p> <p>In other words, this method is called by Django's template parser when we encounter a tag that matches this node's tag, e.g. <code>{% component %}</code> or <code>{% slot %}</code>.</p> <p>To register the tag, you can use <a href=../api#django_components.BaseNode.register><code>BaseNode.register()</code></a>.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.FillNode.register class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">register</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.FillNode.register class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>register</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L562 target=_blank>See source code</a></p> <p>A convenience method for registering the tag with the given library.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;mynode&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>MyNode</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=n>library</span><span class=p>)</span>
</code></pre></div> <p>Allows you to then use the node in templates like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>mylibrary</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>mynode</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.FillNode.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <a href=#django_components.FillNode.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a></span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=o>*</span><span class=p>,</span> <span class=n>data</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>fallback</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>body</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" SlotInput
module-attribute
(django_components.slots.SlotInput)" href=#django_components.SlotInput>SlotInput</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>default</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.FillNode.unregister class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">unregister</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.FillNode.unregister class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>unregister</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L583 target=_blank>See source code</a></p> <p>Unregisters the node from the given library.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.OnRenderGenerator class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">OnRenderGenerator</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.OnRenderGenerator class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>OnRenderGenerator</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.Generator href=https://docs.python.org/3.12/library/typing.html#typing.Generator>Generator</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" SlotResult
module-attribute
(django_components.slots.SlotResult)" href=#django_components.SlotResult>SlotResult</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Tuple href=https://docs.python.org/3.12/library/typing.html#typing.Tuple>Tuple</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" SlotResult
module-attribute
(django_components.slots.SlotResult)" href=#django_components.SlotResult>SlotResult</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/exceptions.html#Exception>Exception</a></span><span class=p>]],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" SlotResult
module-attribute
(django_components.slots.SlotResult)" href=#django_components.SlotResult>SlotResult</a></span><span class=p>]]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L110 target=_blank>See source code</a></p> <p>This is the signature of the <a href=../api/#django_components.Component.on_render><code>Component.on_render()</code></a> method if it yields (and thus returns a generator).</p> <p>When <code>on_render()</code> is a generator then it:</p> <ul> <li> <p>Yields a rendered template (string or <code>None</code>)</p> </li> <li> <p>Receives back a tuple of <code>(final_output, error)</code>.</p> <p>The final output is the rendered template that now has all its children rendered too. May be <code>None</code> if you yielded <code>None</code> earlier.</p> <p>The error is <code>None</code> if the rendering was successful. Otherwise the error is set and the output is <code>None</code>.</p> </li> <li> <p>At the end it may return a new string to override the final rendered output.</p> </li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>OnRenderGenerator</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=bp>self</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>],</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=p>)</span> <span class=o>-&gt;</span> <span class=n>OnRenderGenerator</span><span class=p>:</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=c1># Do something BEFORE rendering template</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=c1># Same as `Component.on_render_before()`</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>context</span><span class=p>[</span><span class=s2>&quot;hello&quot;</span><span class=p>]</span> <span class=o>=</span> <span class=s2>&quot;world&quot;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=c1># Yield rendered template to receive fully-rendered template or error</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=n>html</span><span class=p>,</span> <span class=n>error</span> <span class=o>=</span> <span class=k>yield</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=c1># Do something AFTER rendering template, or post-process</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a> <span class=c1># the rendered template.</span>
<a id=__codelineno-0-18 name=__codelineno-0-18 href=#__codelineno-0-18></a> <span class=c1># Same as `Component.on_render_after()`</span>
<a id=__codelineno-0-19 name=__codelineno-0-19 href=#__codelineno-0-19></a> <span class=k>return</span> <span class=n>html</span> <span class=o>+</span> <span class=s2>&quot;&lt;p&gt;Hello&lt;/p&gt;&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.ProvideNode class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ProvideNode</span> <a href=#django_components.ProvideNode class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ProvideNode</span><span class=p>(</span><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>],</span> <span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>nodelist</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.node.BaseNode</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/provide.py#L12 target=_blank>See source code</a></p> <p>The <a href=../template_tags#provide><code>{% provide %}</code></a> tag is part of the "provider" part of the <a href=../../concepts/advanced/provide_inject>provide / inject feature</a>.</p> <p>Pass kwargs to this tag to define the provider's data.</p> <p>Any components defined within the <code>{% provide %}..{% endprovide %}</code> tags will be able to access this data with <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</p> <p>This is similar to React's <a href=https://react.dev/learn/passing-data-deeply-with-context><code>ContextProvider</code></a>, or Vue's <a href=https://vuejs.org/guide/components/provide-inject><code>provide()</code></a>.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Provider name. This is the name you will then use in <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</li> <li><code>**kwargs</code>: Any extra kwargs will be passed as the provided data.</li> </ul> <p><strong>Example:</strong></p> <p>Provide the "user_data" in parent component:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;parent&quot;</span><span class=p>)</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=cp>{%</span> <span class=k>provide</span> <span class=s2>&quot;user_data&quot;</span> <span class=nv>user</span><span class=o>=</span><span class=nv>user</span> <span class=cp>%}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;child&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=s2>&quot;user&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;user&quot;</span><span class=p>],</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=p>}</span>
</code></pre></div> <p>Since the "child" component is used within the <code>{% provide %} / {% endprovide %}</code> tags, we can request the "user_data" using <code>Component.inject("user_data")</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;child&quot;</span><span class=p>)</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> User is: <span class=cp>{{</span> <span class=nv>user</span> <span class=cp>}}</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=n>user</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;user_data&quot;</span><span class=p>)</span><span class=o>.</span><span class=n>user</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=s2>&quot;user&quot;</span><span class=p>:</span> <span class=n>user</span><span class=p>,</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=p>}</span>
</code></pre></div> <p>Notice that the keys defined on the <a href=../template_tags#provide><code>{% provide %}</code></a> tag are then accessed as attributes when accessing them with <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</p> <p>✅ Do this <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>user</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;user_data&quot;</span><span class=p>)</span><span class=o>.</span><span class=n>user</span>
</code></pre></div></p> <p>❌ Don't do this <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=n>user</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;user_data&quot;</span><span class=p>)[</span><span class=s2>&quot;user&quot;</span><span class=p>]</span>
</code></pre></div></p> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" parse
classmethod
(django_components.ProvideNode.parse)" href=#django_components.ProvideNode.parse>parse</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" register
classmethod
(django_components.ProvideNode.register)" href=#django_components.ProvideNode.register>register</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render (django_components.ProvideNode.render)" href=#django_components.ProvideNode.render>render</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" unregister
classmethod
(django_components.ProvideNode.unregister)" href=#django_components.ProvideNode.unregister>unregister</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" active_flags
property
(django_components.ProvideNode.active_flags)" href=#django_components.ProvideNode.active_flags>active_flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" allowed_flags
class-attribute
instance-attribute
(django_components.ProvideNode.allowed_flags)" href=#django_components.ProvideNode.allowed_flags>allowed_flags</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" contents
instance-attribute
(django_components.ProvideNode.contents)" href=#django_components.ProvideNode.contents>contents</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" end_tag
class-attribute
instance-attribute
(django_components.ProvideNode.end_tag)" href=#django_components.ProvideNode.end_tag>end_tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" flags
instance-attribute
(django_components.ProvideNode.flags)" href=#django_components.ProvideNode.flags>flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" node_id
instance-attribute
(django_components.ProvideNode.node_id)" href=#django_components.ProvideNode.node_id>node_id</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" nodelist
instance-attribute
(django_components.ProvideNode.nodelist)" href=#django_components.ProvideNode.nodelist>nodelist</a></code></b> (<code><span title=django.template.base.NodeList>NodeList</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" params
instance-attribute
(django_components.ProvideNode.params)" href=#django_components.ProvideNode.params>params</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<span title=django_components.util.template_tag.TagAttr>TagAttr</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tag
class-attribute
instance-attribute
(django_components.ProvideNode.tag)" href=#django_components.ProvideNode.tag>tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_component
instance-attribute
(django_components.ProvideNode.template_component)" href=#django_components.ProvideNode.template_component>template_component</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_name
instance-attribute
(django_components.ProvideNode.template_name)" href=#django_components.ProvideNode.template_name>template_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.active_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">active_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.ProvideNode.active_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>active_flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L506 target=_blank>See source code</a></p> <p>Flags that were set for this specific instance as a list of strings.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>Will have the following flags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.allowed_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">allowed_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.allowed_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.contents class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">contents</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.contents class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(contents)>contents</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L498 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L435 target=_blank>See source code</a></p> <p>The contents of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>contents</code> will be <code>"&lt;div&gt; ... &lt;/div&gt;"</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.end_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">end_tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.end_tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>end_tag</span> <span class=o>=</span> <span class=s1>&#39;endprovide&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(flags)>flags</span></span> <span class=ow>or</span> <span class=p>{</span><span class=n><span title=flag>flag</span></span><span class=p>:</span> <span class=n>Falsefor</span> <span class=n><span title=flag>flag</span></span> <span class=ow>in</span> <span class=p>(</span><span class=n><span title=django_components.node.BaseNode(self).allowed_flags>allowed_flags</span></span> <span class=ow>or</span> <span class=p>[])}</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L495 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L376 target=_blank>See source code</a></p> <p>Dictionary of all <a href=../api#django_components.BaseNode.allowed_flags><code>allowed_flags</code></a> that were set on the tag.</p> <p>Flags that were set are <code>True</code>, and the rest are <code>False</code>.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 2 flags, <code>default</code> and <code>required</code>, but only <code>default</code> was set.</p> <p>The <code>flags</code> dictionary will be:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=s2>&quot;default&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=s2>&quot;required&quot;</span><span class=p>:</span> <span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=p>}</span>
</code></pre></div> <p>You can check if a flag is set by doing:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>if</span> <span class=n>node</span><span class=o>.</span><span class=n>flags</span><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>]:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=o>...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.node_id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">node_id</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.node_id class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(node_id)>node_id</span></span> <span class=ow>or</span> <span class=n><span title=django_components.util.misc.gen_id>gen_id</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L497 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L452 target=_blank>See source code</a></p> <p>The unique ID of the node.</p> <p>Extensions can use this ID to store additional information.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.nodelist class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">nodelist</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.nodelist class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>nodelist</span><span class=p>:</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(nodelist)>nodelist</span></span> <span class=ow>or</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L496 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L415 target=_blank>See source code</a></p> <p>The nodelist of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>nodelist</code> will contain the <code>&lt;div&gt; ... &lt;/div&gt;</code> part.</p> <p>Unlike <a href=../api#django_components.BaseNode.contents><code>contents</code></a>, the <code>nodelist</code> contains the actual Nodes, not just the text.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.params class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">params</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.params class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(params)>params</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L494 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L357 target=_blank>See source code</a></p> <p>The parameters to the tag in the template.</p> <p>A single param represents an arg or kwarg of the template tag.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=s1>&#39;val2 two&#39;</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 3 params:</p> <ul> <li>Posiitonal arg <code>"my_comp"</code></li> <li>Keyword arg <code>key=val</code></li> <li>Keyword arg <code>key2='val2 two'</code></li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tag</span> <span class=o>=</span> <span class=s1>&#39;provide&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.template_component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.template_component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_component)>template_component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L500 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L474 target=_blank>See source code</a></p> <p>If the template that contains this node belongs to a <a href=../api#django_components.Component><code>Component</code></a>, then this will be the <a href=../api#django_components.Component><code>Component</code></a> class.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.ProvideNode.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.ProvideNode.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_name)>template_name</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L499 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L459 target=_blank>See source code</a></p> <p>The name of the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template><code>Template</code></a> that contains this node.</p> <p>The template name is set by Django's <a href=https://docs.djangoproject.com/en/5.2/topics/templates/#loaders>template loaders</a>.</p> <p>For example, the filesystem template loader will set this to the absolute path of the template file.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a>&quot;/home/user/project/templates/my_template.html&quot;
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ProvideNode.parse class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">parse</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.ProvideNode.parse class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>parse</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=" BaseNode (django_components.node.BaseNode)" href=#django_components.BaseNode>BaseNode</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L528 target=_blank>See source code</a></p> <p>This function is what is passed to Django's <code>Library.tag()</code> when <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-tags/#registering-the-tag>registering the tag</a>.</p> <p>In other words, this method is called by Django's template parser when we encounter a tag that matches this node's tag, e.g. <code>{% component %}</code> or <code>{% slot %}</code>.</p> <p>To register the tag, you can use <a href=../api#django_components.BaseNode.register><code>BaseNode.register()</code></a>.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ProvideNode.register class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">register</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.ProvideNode.register class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>register</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L562 target=_blank>See source code</a></p> <p>A convenience method for registering the tag with the given library.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;mynode&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>MyNode</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=n>library</span><span class=p>)</span>
</code></pre></div> <p>Allows you to then use the node in templates like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>mylibrary</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>mynode</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ProvideNode.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <a href=#django_components.ProvideNode.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a></span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.utils.safestring.SafeString href=https://docs.djangoproject.com/en/5.2/_objects/ref/utils/#django.utils.safestring.SafeString>SafeString</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.ProvideNode.unregister class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">unregister</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.ProvideNode.unregister class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>unregister</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L583 target=_blank>See source code</a></p> <p>Unregisters the node from the given library.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.RegistrySettings class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">RegistrySettings</span> <a href=#django_components.RegistrySettings class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>tuple</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L64 target=_blank>See source code</a></p> <p>Configuration for a <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a>.</p> <p>These settings define how the components registered with this registry will behave when rendered.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentRegistry</span><span class=p>,</span> <span class=n>RegistrySettings</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>registry_settings</span> <span class=o>=</span> <span class=n>RegistrySettings</span><span class=p>(</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>context_behavior</span><span class=o>=</span><span class=s2>&quot;django&quot;</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>tag_formatter</span><span class=o>=</span><span class=s2>&quot;django_components.component_shorthand_formatter&quot;</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=p>)</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=n>registry</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>(</span><span class=n>settings</span><span class=o>=</span><span class=n>registry_settings</span><span class=p>)</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" CONTEXT_BEHAVIOR
class-attribute
instance-attribute
(django_components.RegistrySettings.CONTEXT_BEHAVIOR)" href=#django_components.RegistrySettings.CONTEXT_BEHAVIOR>CONTEXT_BEHAVIOR</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<span title=django_components.app_settings.ContextBehaviorType>ContextBehaviorType</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" TAG_FORMATTER
class-attribute
instance-attribute
(django_components.RegistrySettings.TAG_FORMATTER)" href=#django_components.RegistrySettings.TAG_FORMATTER>TAG_FORMATTER</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-internal" title=" TagFormatterABC (django_components.tag_formatter.TagFormatterABC)" href=#django_components.TagFormatterABC>TagFormatterABC</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" context_behavior
class-attribute
instance-attribute
(django_components.RegistrySettings.context_behavior)" href=#django_components.RegistrySettings.context_behavior>context_behavior</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<span title=django_components.app_settings.ContextBehaviorType>ContextBehaviorType</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tag_formatter
class-attribute
instance-attribute
(django_components.RegistrySettings.tag_formatter)" href=#django_components.RegistrySettings.tag_formatter>tag_formatter</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-internal" title=" TagFormatterABC (django_components.tag_formatter.TagFormatterABC)" href=#django_components.TagFormatterABC>TagFormatterABC</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.RegistrySettings.CONTEXT_BEHAVIOR class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">CONTEXT_BEHAVIOR</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.RegistrySettings.CONTEXT_BEHAVIOR class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>CONTEXT_BEHAVIOR</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.app_settings.ContextBehaviorType>ContextBehaviorType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L94 target=_blank>See source code</a></p> <p><em>Deprecated. Use <code>context_behavior</code> instead. Will be removed in v1.</em></p> <p>Same as the global <a href=../settings/#django_components.app_settings.ComponentsSettings.context_behavior><code>COMPONENTS.context_behavior</code></a> setting, but for this registry.</p> <p>If omitted, defaults to the global <a href=../settings/#django_components.app_settings.ComponentsSettings.context_behavior><code>COMPONENTS.context_behavior</code></a> setting.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.RegistrySettings.TAG_FORMATTER class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">TAG_FORMATTER</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.RegistrySettings.TAG_FORMATTER class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>TAG_FORMATTER</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" TagFormatterABC (django_components.tag_formatter.TagFormatterABC)" href=#django_components.TagFormatterABC>TagFormatterABC</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L119 target=_blank>See source code</a></p> <p><em>Deprecated. Use <code>tag_formatter</code> instead. Will be removed in v1.</em></p> <p>Same as the global <a href=../settings/#django_components.app_settings.ComponentsSettings.tag_formatter><code>COMPONENTS.tag_formatter</code></a> setting, but for this registry.</p> <p>If omitted, defaults to the global <a href=../settings/#django_components.app_settings.ComponentsSettings.tag_formatter><code>COMPONENTS.tag_formatter</code></a> setting.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.RegistrySettings.context_behavior class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">context_behavior</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.RegistrySettings.context_behavior class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>context_behavior</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.app_settings.ContextBehaviorType>ContextBehaviorType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L82 target=_blank>See source code</a></p> <p>Same as the global <a href=../settings/#django_components.app_settings.ComponentsSettings.context_behavior><code>COMPONENTS.context_behavior</code></a> setting, but for this registry.</p> <p>If omitted, defaults to the global <a href=../settings/#django_components.app_settings.ComponentsSettings.context_behavior><code>COMPONENTS.context_behavior</code></a> setting.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.RegistrySettings.tag_formatter class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tag_formatter</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.RegistrySettings.tag_formatter class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tag_formatter</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" TagFormatterABC (django_components.tag_formatter.TagFormatterABC)" href=#django_components.TagFormatterABC>TagFormatterABC</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L107 target=_blank>See source code</a></p> <p>Same as the global <a href=../settings/#django_components.app_settings.ComponentsSettings.tag_formatter><code>COMPONENTS.tag_formatter</code></a> setting, but for this registry.</p> <p>If omitted, defaults to the global <a href=../settings/#django_components.app_settings.ComponentsSettings.tag_formatter><code>COMPONENTS.tag_formatter</code></a> setting.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.Slot class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">Slot</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-dataclass"><code>dataclass</code></small> </span> <a href=#django_components.Slot class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>Slot</span><span class=p>(</span><span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span> <span class=n>content_func</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotFunc (django_components.slots.SlotFunc)" href=#django_components.SlotFunc>SlotFunc</a></span><span class=p>[</span><span class=n><span title=django_components.slots.TSlotData>TSlotData</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.cast href=https://docs.python.org/3.12/library/typing.html#typing.cast>cast</a></span><span class=p>(</span><span class=s1>&#39;SlotFunc[TSlotData]&#39;</span><span class=p>,</span> <span class=kc>None</span><span class=p>),</span> <span class=n>component_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>slot_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>nodelist</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>fill_node</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" FillNode (django_components.slots.FillNode)" href=#django_components.FillNode>FillNode</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>extra</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#dict>dict</a></span><span class=p>())</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>typing.Generic</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L183 target=_blank>See source code</a></p> <p>This class is the main way for defining and handling slots.</p> <p>It holds the slot content function along with related metadata.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-class>Slot class</a>.</p> <p><strong>Example:</strong></p> <p>Passing slots to components:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Slot</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;name&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;my_slot&quot;</span><span class=p>:</span> <span class=n>slot</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=p>},</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=p>)</span>
</code></pre></div> <p>Accessing slots inside the components:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=n>my_slot</span> <span class=o>=</span> <span class=n>slots</span><span class=p>[</span><span class=s2>&quot;my_slot&quot;</span><span class=p>]</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=s2>&quot;my_slot&quot;</span><span class=p>:</span> <span class=n>my_slot</span><span class=p>,</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=p>}</span>
</code></pre></div> <p>Rendering slots:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Slot</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;name&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span><span class=p>)</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>({</span><span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=s2>&quot;John&quot;</span><span class=p>})</span> <span class=c1># Output: Hello, John!</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_name
class-attribute
instance-attribute
(django_components.Slot.component_name)" href=#django_components.Slot.component_name>component_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" content_func
class-attribute
instance-attribute
(django_components.Slot.content_func)" href=#django_components.Slot.content_func>content_func</a></code></b> (<code><a class="autorefs autorefs-internal" title=" SlotFunc (django_components.slots.SlotFunc)" href=#django_components.SlotFunc>SlotFunc</a>[<span title=django_components.slots.TSlotData>TSlotData</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" contents
instance-attribute
(django_components.Slot.contents)" href=#django_components.Slot.contents>contents</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" do_not_call_in_templates
property
(django_components.Slot.do_not_call_in_templates)" href=#django_components.Slot.do_not_call_in_templates>do_not_call_in_templates</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" extra
class-attribute
instance-attribute
(django_components.Slot.extra)" href=#django_components.Slot.extra>extra</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" fill_node
class-attribute
instance-attribute
(django_components.Slot.fill_node)" href=#django_components.Slot.fill_node>fill_node</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-internal" title=" FillNode (django_components.slots.FillNode)" href=#django_components.FillNode>FillNode</a>, <a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" nodelist
class-attribute
instance-attribute
(django_components.Slot.nodelist)" href=#django_components.Slot.nodelist>nodelist</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<span title=django.template.base.NodeList>NodeList</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" slot_name
class-attribute
instance-attribute
(django_components.Slot.slot_name)" href=#django_components.Slot.slot_name>slot_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.component_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Slot.component_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L252 target=_blank>See source code</a></p> <p>Name of the component that originally received this slot fill.</p> <p>See <a href=../../concepts/fundamentals/slots#slot-metadata>Slot metadata</a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.content_func class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">content_func</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Slot.content_func class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>content_func</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotFunc (django_components.slots.SlotFunc)" href=#django_components.SlotFunc>SlotFunc</a></span><span class=p>[</span><span class=n><span title=django_components.slots.TSlotData>TSlotData</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.cast href=https://docs.python.org/3.12/library/typing.html#typing.cast>cast</a></span><span class=p>(</span><span class=s1>&#39;SlotFunc[TSlotData]&#39;</span><span class=p>,</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L242 target=_blank>See source code</a></p> <p>The actual slot function.</p> <p>Do NOT call this function directly, instead call the <code>Slot</code> instance as a function.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#rendering-slots>Rendering slot functions</a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.contents class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">contents</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Slot.contents class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L231 target=_blank>See source code</a></p> <p>The original value that was passed to the <code>Slot</code> constructor.</p> <ul> <li>If Slot was created from <a href=../template_tags#fill><code>{% fill %}</code></a> tag, <code>Slot.contents</code> will contain the body (string) of that <code>{% fill %}</code> tag.</li> <li>If Slot was created from string as <code>Slot("...")</code>, <code>Slot.contents</code> will contain that string.</li> <li>If Slot was created from a function, <code>Slot.contents</code> will contain that function.</li> </ul> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-contents>Slot contents</a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.do_not_call_in_templates class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">do_not_call_in_templates</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.Slot.do_not_call_in_templates class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>do_not_call_in_templates</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L347 target=_blank>See source code</a></p> <p>Django special property to prevent calling the instance as a function inside Django templates.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.extra class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">extra</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Slot.extra class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>extra</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=dataclasses.field href=https://docs.python.org/3.12/library/dataclasses.html#dataclasses.field>field</a></span><span class=p>(</span><span class=n><span title=dataclasses.field(default_factory)>default_factory</span></span><span class=o>=</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#dict>dict</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L299 target=_blank>See source code</a></p> <p>Dictionary that can be used to store arbitrary metadata about the slot.</p> <p>See <a href=../../concepts/fundamentals/slots#slot-metadata>Slot metadata</a>.</p> <p>See <a href=../../concepts/advanced/extensions#pass-slot-metadata>Pass slot metadata</a> for usage for extensions.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># Either at slot creation</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>&quot;Hello, world!&quot;</span><span class=p>,</span> <span class=n>extra</span><span class=o>=</span><span class=p>{</span><span class=s2>&quot;foo&quot;</span><span class=p>:</span> <span class=s2>&quot;bar&quot;</span><span class=p>})</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=c1># Or later</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=n>slot</span><span class=o>.</span><span class=n>extra</span><span class=p>[</span><span class=s2>&quot;baz&quot;</span><span class=p>]</span> <span class=o>=</span> <span class=s2>&quot;qux&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.fill_node class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">fill_node</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Slot.fill_node class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>fill_node</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" FillNode (django_components.slots.FillNode)" href=#django_components.FillNode>FillNode</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentNode (django_components.component.ComponentNode)" href=#django_components.ComponentNode>ComponentNode</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L271 target=_blank>See source code</a></p> <p>If the slot was created from a <a href=../template_tags#fill><code>{% fill %}</code></a> tag, this will be the <a href=../api/#django_components.FillNode><code>FillNode</code></a> instance.</p> <p>If the slot was a default slot created from a <a href=../template_tags#component><code>{% component %}</code></a> tag, this will be the <a href=../api/#django_components.ComponentNode><code>ComponentNode</code></a> instance.</p> <p>Otherwise, this will be <code>None</code>.</p> <p>Extensions can use this info to handle slots differently based on their source.</p> <p>See <a href=../../concepts/fundamentals/slots#slot-metadata>Slot metadata</a>.</p> <p><strong>Example:</strong></p> <p>You can use this to find the <a href=../api/#django_components.Component><code>Component</code></a> in whose template the <a href=../template_tags#fill><code>{% fill %}</code></a> tag was defined:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>footer_slot</span> <span class=o>=</span> <span class=n>slots</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>&quot;footer&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>if</span> <span class=n>footer_slot</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span> <span class=ow>and</span> <span class=n>footer_slot</span><span class=o>.</span><span class=n>fill_node</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>owner_component</span> <span class=o>=</span> <span class=n>footer_slot</span><span class=o>.</span><span class=n>fill_node</span><span class=o>.</span><span class=n>template_component</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=c1># ...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.nodelist class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">nodelist</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Slot.nodelist class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>nodelist</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L264 target=_blank>See source code</a></p> <p>If the slot was defined with <a href=../template_tags#fill><code>{% fill %}</code></a> tag, this will be the Nodelist of the fill's content.</p> <p>See <a href=../../concepts/fundamentals/slots#slot-metadata>Slot metadata</a>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.Slot.slot_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">slot_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.Slot.slot_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>slot_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L258 target=_blank>See source code</a></p> <p>Slot name to which this Slot was initially assigned.</p> <p>See <a href=../../concepts/fundamentals/slots#slot-metadata>Slot metadata</a>.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.SlotContent class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">SlotContent</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.SlotContent class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>SlotContent</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotInput
module-attribute
(django_components.slots.SlotInput)" href=#django_components.SlotInput>SlotInput</a></span><span class=p>[</span><span class=n><span title=django_components.slots.TSlotData>TSlotData</span></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L432 target=_blank>See source code</a></p> <p>DEPRECATED: Use <a href=../api#django_components.SlotInput><code>SlotInput</code></a> instead. Will be removed in v1.</p> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.SlotContext class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">SlotContext</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-dataclass"><code>dataclass</code></small> </span> <a href=#django_components.SlotContext class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>SlotContext</span><span class=p>(</span><span class=n>data</span><span class=p>:</span> <span class=n><span title=django_components.slots.TSlotData>TSlotData</span></span><span class=p>,</span> <span class=n>fallback</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotFallback (django_components.slots.SlotFallback)" href=#django_components.SlotFallback>SlotFallback</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>typing.Generic</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L77 target=_blank>See source code</a></p> <p>Metadata available inside slot functions.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-class>Slot functions</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>SlotContext</span><span class=p>,</span> <span class=n>SlotResult</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>def</span><span class=w> </span><span class=nf>my_slot</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SlotResult</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;name&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span>
</code></pre></div> <p>You can pass a type parameter to the <code>SlotContext</code> to specify the type of the data passed to the slot:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>class</span><span class=w> </span><span class=nc>MySlotData</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>def</span><span class=w> </span><span class=nf>my_slot</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>[</span><span class=n>MySlotData</span><span class=p>]):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;name&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span>
</code></pre></div> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" context
class-attribute
instance-attribute
(django_components.SlotContext.context)" href=#django_components.SlotContext.context>context</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" data
instance-attribute
(django_components.SlotContext.data)" href=#django_components.SlotContext.data>data</a></code></b> (<code><span title=django_components.slots.TSlotData>TSlotData</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" fallback
class-attribute
instance-attribute
(django_components.SlotContext.fallback)" href=#django_components.SlotContext.fallback>fallback</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-internal" title=" SlotFallback (django_components.slots.SlotFallback)" href=#django_components.SlotFallback>SlotFallback</a>]]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotContext.context class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">context</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotContext.context class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L132 target=_blank>See source code</a></p> <p>Django template <a href=https://docs.djangoproject.com/en/5.1/ref/templates/api/#django.template.Context><code>Context</code></a> available inside the <a href=../template_tags#fill><code>{% fill %}</code></a> tag.</p> <p>May be <code>None</code> if you call the slot fill directly, without using <a href=../template_tags#slot><code>{% slot %}</code></a> tags.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotContext.data class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">data</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotContext.data class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>data</span><span class=p>:</span> <span class=n><span title=django_components.slots.TSlotData>TSlotData</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L104 target=_blank>See source code</a></p> <p>Data passed to the slot.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>def</span><span class=w> </span><span class=nf>my_slot</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;name&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotContext.fallback class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">fallback</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotContext.fallback class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>fallback</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotFallback (django_components.slots.SlotFallback)" href=#django_components.SlotFallback>SlotFallback</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L117 target=_blank>See source code</a></p> <p>Slot's fallback content. Lazily-rendered - coerce this value to string to force it to render.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-fallback>Slot fallback</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>def</span><span class=w> </span><span class=nf>my_slot</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>fallback</span><span class=si>}</span><span class=s2>!&quot;</span>
</code></pre></div> <p>May be <code>None</code> if you call the slot fill directly, without using <a href=../template_tags#slot><code>{% slot %}</code></a> tags.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.SlotFallback class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">SlotFallback</span> <a href=#django_components.SlotFallback class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>SlotFallback</span><span class=p>(</span><span class=n>slot</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotNode (django_components.slots.SlotNode)" href=#django_components.SlotNode>SlotNode</a></span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>object</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L442 target=_blank>See source code</a></p> <p>The content between the <code>{% slot %}..{% endslot %}</code> tags is the <em>fallback</em> content that will be rendered if no fill is given for the slot.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;name&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> Hello, my name is </span><span class=cp>{{</span> <span class=nv>name</span> <span class=cp>}}</span><span class=x> &lt;!-- Fallback content --&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>Because the fallback is defined as a piece of the template (<a href=https://github.com/django/django/blob/ddb85294159185c5bd5cae34c9ef735ff8409bfe/django/template/base.py#L1017><code>NodeList</code></a>), we want to lazily render it only when needed.</p> <p><code>SlotFallback</code> type allows to pass around the slot fallback as a variable.</p> <p>To force the fallback to render, coerce it to string to trigger the <code>__str__()</code> method.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=k>def</span><span class=w> </span><span class=nf>slot_function</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>):</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>fallback</span><span class=si>}</span><span class=s2>!&quot;</span>
</code></pre></div> <div class="doc doc-children"> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.SlotFunc class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">SlotFunc</span> <a href=#django_components.SlotFunc class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>typing.Protocol</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L141 target=_blank>See source code</a></p> <p>When rendering components with <a href=../api#django_components.Component.render><code>Component.render()</code></a> or <a href=../api#django_components.Component.render_to_response><code>Component.render_to_response()</code></a>, the slots can be given either as strings or as functions.</p> <p>If a slot is given as a function, it will have the signature of <code>SlotFunc</code>.</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-functions>Slot functions</a>.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>ctx</code></b> (<code><a class="autorefs autorefs-internal" title=" SlotContext
dataclass
(django_components.slots.SlotContext)" href=#django_components.SlotContext>SlotContext</a></code>) <div class=doc-md-description> <p>Single named tuple that holds the slot data and metadata.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a> | <a class="autorefs autorefs-external" title=django.utils.safestring.SafeString href=https://docs.djangoproject.com/en/5.2/_objects/ref/utils/#django.utils.safestring.SafeString>SafeString</a></code> <div class=doc-md-description> <p>The rendered slot content.</p> </div> </li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>SlotContext</span><span class=p>,</span> <span class=n>SlotResult</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>def</span><span class=w> </span><span class=nf>header</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SlotResult</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>if</span> <span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>&quot;name&quot;</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;name&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>fallback</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=n>html</span> <span class=o>=</span> <span class=n>MyTable</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=n>header</span><span class=p>,</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=p>},</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a><span class=p>)</span>
</code></pre></div> <div class="doc doc-children"> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.SlotInput class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">SlotInput</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.SlotInput class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>SlotInput</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" SlotResult
module-attribute
(django_components.slots.SlotResult)" href=#django_components.SlotResult>SlotResult</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotFunc (django_components.slots.SlotFunc)" href=#django_components.SlotFunc>SlotFunc</a></span><span class=p>[</span><span class=n><span title=django_components.slots.TSlotData>TSlotData</span></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-internal" title=" Slot
dataclass
(django_components.slots.Slot)" href=#django_components.Slot>Slot</a></span><span class=p>[</span><span class=n><span title=django_components.slots.TSlotData>TSlotData</span></span><span class=p>]]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L380 target=_blank>See source code</a></p> <p>Type representing all forms in which slot content can be passed to a component.</p> <p>When rendering a component with <a href=../api#django_components.Component.render><code>Component.render()</code></a> or <a href=../api#django_components.Component.render_to_response><code>Component.render_to_response()</code></a>, the slots may be given a strings, functions, or <a href=../api#django_components.Slot><code>Slot</code></a> instances. This type describes that union.</p> <p>Use this type when typing the slots in your component.</p> <p><code>SlotInput</code> accepts an optional type parameter to specify the data dictionary that will be passed to the slot content function.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=kn>from</span><span class=w> </span><span class=nn>typing_extensions</span><span class=w> </span><span class=kn>import</span> <span class=n>TypedDict</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=k>class</span><span class=w> </span><span class=nc>TableFooterSlotData</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>page_number</span><span class=p>:</span> <span class=nb>int</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>header</span><span class=p>:</span> <span class=n>SlotInput</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span><span class=p>[</span><span class=n>TableFooterSlotData</span><span class=p>]</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&lt;div&gt;{</span><span class=si>% s</span><span class=s2>lot &#39;footer&#39; %}&lt;/div&gt;&quot;</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a><span class=n>html</span> <span class=o>=</span> <span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a> <span class=c1># As a string</span>
<a id=__codelineno-0-18 name=__codelineno-0-18 href=#__codelineno-0-18></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=s2>&quot;Hello, World!&quot;</span><span class=p>,</span>
<a id=__codelineno-0-19 name=__codelineno-0-19 href=#__codelineno-0-19></a>
<a id=__codelineno-0-20 name=__codelineno-0-20 href=#__codelineno-0-20></a> <span class=c1># Safe string</span>
<a id=__codelineno-0-21 name=__codelineno-0-21 href=#__codelineno-0-21></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;&lt;i&gt;&lt;am&gt;&lt;safe&gt;&quot;</span><span class=p>),</span>
<a id=__codelineno-0-22 name=__codelineno-0-22 href=#__codelineno-0-22></a>
<a id=__codelineno-0-23 name=__codelineno-0-23 href=#__codelineno-0-23></a> <span class=c1># Function</span>
<a id=__codelineno-0-24 name=__codelineno-0-24 href=#__codelineno-0-24></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=sa>f</span><span class=s2>&quot;Page: </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;page_number&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span><span class=p>,</span>
<a id=__codelineno-0-25 name=__codelineno-0-25 href=#__codelineno-0-25></a>
<a id=__codelineno-0-26 name=__codelineno-0-26 href=#__codelineno-0-26></a> <span class=c1># Slot instance</span>
<a id=__codelineno-0-27 name=__codelineno-0-27 href=#__codelineno-0-27></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=sa>f</span><span class=s2>&quot;Page: </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s1>&#39;page_number&#39;</span><span class=p>]</span><span class=si>}</span><span class=s2>!&quot;</span><span class=p>),</span>
<a id=__codelineno-0-28 name=__codelineno-0-28 href=#__codelineno-0-28></a>
<a id=__codelineno-0-29 name=__codelineno-0-29 href=#__codelineno-0-29></a> <span class=c1># None (Same as no slot)</span>
<a id=__codelineno-0-30 name=__codelineno-0-30 href=#__codelineno-0-30></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-31 name=__codelineno-0-31 href=#__codelineno-0-31></a> <span class=p>},</span>
<a id=__codelineno-0-32 name=__codelineno-0-32 href=#__codelineno-0-32></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.SlotNode class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">SlotNode</span> <a href=#django_components.SlotNode class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>SlotNode</span><span class=p>(</span><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>],</span> <span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>nodelist</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>django_components.node.BaseNode</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L515 target=_blank>See source code</a></p> <p><a href=../template_tags#slot><code>{% slot %}</code></a> tag marks a place inside a component where content can be inserted from outside.</p> <p><a href=../../concepts/fundamentals/slots>Learn more</a> about using slots.</p> <p>This is similar to slots as seen in <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot>Web components</a>, <a href=https://vuejs.org/guide/components/slots.html>Vue</a> or <a href=https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children>React's <code>children</code></a>.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Registered name of the component to render</li> <li><code>default</code>: Optional flag. If there is a default slot, you can pass the component slot content without using the <a href=../template_tags#fill><code>{% fill %}</code></a> tag. See <a href=../../concepts/fundamentals/slots#default-slot>Default slot</a></li> <li><code>required</code>: Optional flag. Will raise an error if a slot is required but not given.</li> <li><code>**kwargs</code>: Any extra kwargs will be passed as the slot data.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;child&quot;</span><span class=p>)</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=cp>%}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> This is shown if not overriden!
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>&lt;</span><span class=nt>aside</span><span class=p>&gt;</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;sidebar&quot;</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=p>&lt;/</span><span class=nt>aside</span><span class=p>&gt;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;parent&quot;</span><span class=p>)</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;child&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;content&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> 🗞️📰
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;sidebar&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> 🍷🧉🍾
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-1-14 name=__codelineno-1-14 href=#__codelineno-1-14></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-15 name=__codelineno-1-15 href=#__codelineno-1-15></a> <span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <h5 id=django_components.SlotNode--slot-data>Slot data<a class=headerlink href=#django_components.SlotNode--slot-data title="Permanent link">¤</a></h5> <p>Any extra kwargs will be considered as slot data, and will be accessible in the <a href=../template_tags#fill><code>{% fill %}</code></a> tag via fill's <code>data</code> kwarg:</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;child&quot;</span><span class=p>)</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=c>{# Passing data to the slot #}</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>user</span><span class=o>=</span><span class=nv>user</span> <span class=cp>%}</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> This is shown if not overriden!
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;parent&quot;</span><span class=p>)</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=c>{# Parent can access the slot data #}</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;child&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;content&quot;</span> <span class=nv>data</span><span class=o>=</span><span class=s2>&quot;data&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;wrapper-class&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=cp>{{</span> <span class=nv>data.user</span> <span class=cp>}}</span>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-3-11 name=__codelineno-3-11 href=#__codelineno-3-11></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-3-12 name=__codelineno-3-12 href=#__codelineno-3-12></a> <span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <h5 id=django_components.SlotNode--slot-fallback>Slot fallback<a class=headerlink href=#django_components.SlotNode--slot-fallback title="Permanent link">¤</a></h5> <p>The content between the <code>{% slot %}..{% endslot %}</code> tags is the fallback content that will be rendered if no fill is given for the slot.</p> <p>This fallback content can then be accessed from within the <a href=../template_tags#fill><code>{% fill %}</code></a> tag using the fill's <code>fallback</code> kwarg. This is useful if you need to wrap / prepend / append the original slot's content.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;child&quot;</span><span class=p>)</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a> This is fallback content!
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a> <span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;parent&quot;</span><span class=p>)</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a> <span class=c>{# Parent can access the slot&#39;s fallback content #}</span>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;child&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>&quot;content&quot;</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>&quot;fallback&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a> <span class=cp>{{</span> <span class=nv>fallback</span> <span class=cp>}}</span>
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a> <span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" parse
classmethod
(django_components.SlotNode.parse)" href=#django_components.SlotNode.parse>parse</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" register
classmethod
(django_components.SlotNode.register)" href=#django_components.SlotNode.register>register</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" render (django_components.SlotNode.render)" href=#django_components.SlotNode.render>render</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" unregister
classmethod
(django_components.SlotNode.unregister)" href=#django_components.SlotNode.unregister>unregister</a></code></b> <div class=doc-md-description> </div> </li> </ul> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" active_flags
property
(django_components.SlotNode.active_flags)" href=#django_components.SlotNode.active_flags>active_flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" allowed_flags
class-attribute
instance-attribute
(django_components.SlotNode.allowed_flags)" href=#django_components.SlotNode.allowed_flags>allowed_flags</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" contents
instance-attribute
(django_components.SlotNode.contents)" href=#django_components.SlotNode.contents>contents</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" end_tag
class-attribute
instance-attribute
(django_components.SlotNode.end_tag)" href=#django_components.SlotNode.end_tag>end_tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" flags
instance-attribute
(django_components.SlotNode.flags)" href=#django_components.SlotNode.flags>flags</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>, <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" node_id
instance-attribute
(django_components.SlotNode.node_id)" href=#django_components.SlotNode.node_id>node_id</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" nodelist
instance-attribute
(django_components.SlotNode.nodelist)" href=#django_components.SlotNode.nodelist>nodelist</a></code></b> (<code><span title=django.template.base.NodeList>NodeList</span></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" params
instance-attribute
(django_components.SlotNode.params)" href=#django_components.SlotNode.params>params</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<span title=django_components.util.template_tag.TagAttr>TagAttr</span>]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tag
class-attribute
instance-attribute
(django_components.SlotNode.tag)" href=#django_components.SlotNode.tag>tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_component
instance-attribute
(django_components.SlotNode.template_component)" href=#django_components.SlotNode.template_component>template_component</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a>]]</code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" template_name
instance-attribute
(django_components.SlotNode.template_name)" href=#django_components.SlotNode.template_name>template_name</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.active_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">active_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.SlotNode.active_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>active_flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L506 target=_blank>See source code</a></p> <p>Flags that were set for this specific instance as a list of strings.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>Will have the following flags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.allowed_flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">allowed_flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.allowed_flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>(</span><span class=n><span title=django_components.slots.SLOT_DEFAULT_FLAG>SLOT_DEFAULT_FLAG</span></span><span class=p>,</span> <span class=n><span title=django_components.slots.SLOT_REQUIRED_FLAG>SLOT_REQUIRED_FLAG</span></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.contents class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">contents</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.contents class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>contents</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(contents)>contents</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L498 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L435 target=_blank>See source code</a></p> <p>The contents of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>contents</code> will be <code>"&lt;div&gt; ... &lt;/div&gt;"</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.end_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">end_tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.end_tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>end_tag</span> <span class=o>=</span> <span class=s1>&#39;endslot&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.flags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">flags</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.flags class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(flags)>flags</span></span> <span class=ow>or</span> <span class=p>{</span><span class=n><span title=flag>flag</span></span><span class=p>:</span> <span class=n>Falsefor</span> <span class=n><span title=flag>flag</span></span> <span class=ow>in</span> <span class=p>(</span><span class=n><span title=django_components.node.BaseNode(self).allowed_flags>allowed_flags</span></span> <span class=ow>or</span> <span class=p>[])}</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L495 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L376 target=_blank>See source code</a></p> <p>Dictionary of all <a href=../api#django_components.BaseNode.allowed_flags><code>allowed_flags</code></a> that were set on the tag.</p> <p>Flags that were set are <code>True</code>, and the rest are <code>False</code>.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>SlotNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;slot&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=s2>&quot;endslot&quot;</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>allowed_flags</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>,</span> <span class=s2>&quot;required&quot;</span><span class=p>]</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 2 flags, <code>default</code> and <code>required</code>, but only <code>default</code> was set.</p> <p>The <code>flags</code> dictionary will be:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=s2>&quot;default&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=s2>&quot;required&quot;</span><span class=p>:</span> <span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=p>}</span>
</code></pre></div> <p>You can check if a flag is set by doing:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>if</span> <span class=n>node</span><span class=o>.</span><span class=n>flags</span><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>]:</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=o>...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.node_id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">node_id</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.node_id class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(node_id)>node_id</span></span> <span class=ow>or</span> <span class=n><span title=django_components.util.misc.gen_id>gen_id</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L497 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L452 target=_blank>See source code</a></p> <p>The unique ID of the node.</p> <p>Extensions can use this ID to store additional information.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.nodelist class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">nodelist</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.nodelist class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>nodelist</span><span class=p>:</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(nodelist)>nodelist</span></span> <span class=ow>or</span> <span class=n><span title=django.template.base.NodeList>NodeList</span></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L496 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L415 target=_blank>See source code</a></p> <p>The nodelist of the tag.</p> <p>This is the text between the opening and closing tags, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> &lt;div&gt;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> ...</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> &lt;/div&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
</code></pre></div> <p>The <code>nodelist</code> will contain the <code>&lt;div&gt; ... &lt;/div&gt;</code> part.</p> <p>Unlike <a href=../api#django_components.BaseNode.contents><code>contents</code></a>, the <code>nodelist</code> contains the actual Nodes, not just the text.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.params class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">params</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.params class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>params</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.util.template_tag.TagAttr>TagAttr</span></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(params)>params</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L494 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L357 target=_blank>See source code</a></p> <p>The parameters to the tag in the template.</p> <p>A single param represents an arg or kwarg of the template tag.</p> <p>E.g. the following tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=s1>&#39;val2 two&#39;</span> <span class=cp>%}</span>
</code></pre></div> <p>Has 3 params:</p> <ul> <li>Posiitonal arg <code>"my_comp"</code></li> <li>Keyword arg <code>key=val</code></li> <li>Keyword arg <code>key2='val2 two'</code></li> </ul> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tag</span> <span class=o>=</span> <span class=s1>&#39;slot&#39;</span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.template_component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_component</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.template_component class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_component)>template_component</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L500 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L474 target=_blank>See source code</a></p> <p>If the template that contains this node belongs to a <a href=../api#django_components.Component><code>Component</code></a>, then this will be the <a href=../api#django_components.Component><code>Component</code></a> class.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.SlotNode.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.SlotNode.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=n><span title=django_components.node.BaseNode(template_name)>template_name</span></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L499 target=_blank>See source code</a></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L459 target=_blank>See source code</a></p> <p>The name of the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template><code>Template</code></a> that contains this node.</p> <p>The template name is set by Django's <a href=https://docs.djangoproject.com/en/5.2/topics/templates/#loaders>template loaders</a>.</p> <p>For example, the filesystem template loader will set this to the absolute path of the template file.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a>&quot;/home/user/project/templates/my_template.html&quot;
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.SlotNode.parse class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">parse</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.SlotNode.parse class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>parse</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=" BaseNode (django_components.node.BaseNode)" href=#django_components.BaseNode>BaseNode</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L528 target=_blank>See source code</a></p> <p>This function is what is passed to Django's <code>Library.tag()</code> when <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-tags/#registering-the-tag>registering the tag</a>.</p> <p>In other words, this method is called by Django's template parser when we encounter a tag that matches this node's tag, e.g. <code>{% component %}</code> or <code>{% slot %}</code>.</p> <p>To register the tag, you can use <a href=../api#django_components.BaseNode.register><code>BaseNode.register()</code></a>.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.SlotNode.register class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">register</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.SlotNode.register class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>register</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L562 target=_blank>See source code</a></p> <p>A convenience method for registering the tag with the given library.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyNode</span><span class=p>(</span><span class=n>BaseNode</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>tag</span> <span class=o>=</span> <span class=s2>&quot;mynode&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>MyNode</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=n>library</span><span class=p>)</span>
</code></pre></div> <p>Allows you to then use the node in templates like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>mylibrary</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>mynode</span> <span class=cp>%}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.SlotNode.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <a href=#django_components.SlotNode.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=django.template.Context href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Context>Context</a></span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.utils.safestring.SafeString href=https://docs.djangoproject.com/en/5.2/_objects/ref/utils/#django.utils.safestring.SafeString>SafeString</a></span>
</code></pre></div> <div class="doc doc-contents "> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.SlotNode.unregister class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">unregister</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.SlotNode.unregister class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>unregister</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L583 target=_blank>See source code</a></p> <p>Unregisters the node from the given library.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.SlotRef class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">SlotRef</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.SlotRef class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>SlotRef</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-internal" title=" SlotFallback (django_components.slots.SlotFallback)" href=#django_components.SlotFallback>SlotFallback</a></span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L479 target=_blank>See source code</a></p> <p>DEPRECATED: Use <a href=../api#django_components.SlotFallback><code>SlotFallback</code></a> instead. Will be removed in v1.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.SlotResult class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">SlotResult</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.SlotResult class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>SlotResult</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=django.utils.safestring.SafeString href=https://docs.djangoproject.com/en/5.2/_objects/ref/utils/#django.utils.safestring.SafeString>SafeString</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/slots.py#L57 target=_blank>See source code</a></p> <p>Type representing the result of a slot render function.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>SlotContext</span><span class=p>,</span> <span class=n>SlotResult</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>def</span><span class=w> </span><span class=nf>my_slot_fn</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SlotResult</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>return</span> <span class=s2>&quot;Hello, world!&quot;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=n>my_slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=n>my_slot_fn</span><span class=p>)</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=n>html</span> <span class=o>=</span> <span class=n>my_slot</span><span class=p>()</span> <span class=c1># Output: Hello, world!</span>
</code></pre></div> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-functions>Slot functions</a>.</p> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.TagFormatterABC class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">TagFormatterABC</span> <a href=#django_components.TagFormatterABC class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>abc.ABC</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/tag_formatter.py#L53 target=_blank>See source code</a></p> <p>Abstract base class for defining custom tag formatters.</p> <p>Tag formatters define how the component tags are used in the template.</p> <p>Read more about <a href=../../concepts/advanced/tag_formatter>Tag formatter</a>.</p> <p>For example, with the default tag formatter (<a href=../tag_formatters#django_components.tag_formatter.ComponentFormatter><code>ComponentFormatter</code></a>), components are written as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;comp_name&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>While with the shorthand tag formatter (<a href=../tag_formatters#django_components.tag_formatter.ShorthandComponentFormatter><code>ShorthandComponentFormatter</code></a>), components are written as: <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>comp_name</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>endcomp_name</span> <span class=cp>%}</span>
</code></pre></div></p> <p><strong>Example:</strong></p> <p>Implementation for <code>ShorthandComponentFormatter</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>djagno_components</span><span class=w> </span><span class=kn>import</span> <span class=n>TagFormatterABC</span><span class=p>,</span> <span class=n>TagResult</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=k>class</span><span class=w> </span><span class=nc>ShorthandComponentFormatter</span><span class=p>(</span><span class=n>TagFormatterABC</span><span class=p>):</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=k>def</span><span class=w> </span><span class=nf>start_tag</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>return</span> <span class=n>name</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>def</span><span class=w> </span><span class=nf>end_tag</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;end</span><span class=si>{</span><span class=n>name</span><span class=si>}</span><span class=s2>&quot;</span>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=k>def</span><span class=w> </span><span class=nf>parse</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>tokens</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=nb>str</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n>TagResult</span><span class=p>:</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a> <span class=n>tokens</span> <span class=o>=</span> <span class=p>[</span><span class=o>*</span><span class=n>tokens</span><span class=p>]</span>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a> <span class=n>name</span> <span class=o>=</span> <span class=n>tokens</span><span class=o>.</span><span class=n>pop</span><span class=p>(</span><span class=mi>0</span><span class=p>)</span>
<a id=__codelineno-2-13 name=__codelineno-2-13 href=#__codelineno-2-13></a> <span class=k>return</span> <span class=n>TagResult</span><span class=p>(</span><span class=n>name</span><span class=p>,</span> <span class=n>tokens</span><span class=p>)</span>
</code></pre></div> <p><span class=doc-section-title>Methods:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" end_tag
abstractmethod
(django_components.TagFormatterABC.end_tag)" href=#django_components.TagFormatterABC.end_tag>end_tag</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" parse
abstractmethod
(django_components.TagFormatterABC.parse)" href=#django_components.TagFormatterABC.parse>parse</a></code></b> <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" start_tag
abstractmethod
(django_components.TagFormatterABC.start_tag)" href=#django_components.TagFormatterABC.start_tag>start_tag</a></code></b> <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-function"> <h3 id=django_components.TagFormatterABC.end_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">end_tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-abstractmethod"><code>abstractmethod</code></small> </span> <a href=#django_components.TagFormatterABC.end_tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>end_tag</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/tag_formatter.py#L113 target=_blank>See source code</a></p> <p>Formats the end tag of a block component.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>Component's registered name. Required.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>str</code></b> ( <code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code> ) <div class=doc-md-description> <p>The formatted end tag.</p> </div> </li> </ul> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.TagFormatterABC.parse class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">parse</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-abstractmethod"><code>abstractmethod</code></small> </span> <a href=#django_components.TagFormatterABC.parse class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>parse</span><span class=p>(</span><span class=n>tokens</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=" TagResult (django_components.tag_formatter.TagResult)" href=#django_components.TagResult>TagResult</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/tag_formatter.py#L127 target=_blank>See source code</a></p> <p>Given the tokens (words) passed to a component start tag, this function extracts the component name from the tokens list, and returns <a href=../api#django_components.TagResult><code>TagResult</code></a>, which is a tuple of <code>(component_name, remaining_tokens)</code>.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>tokens</code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> <p>List of tokens passed to the component tag.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>TagResult</code></b> ( <code><a class="autorefs autorefs-internal" title=" TagResult (django_components.tag_formatter.TagResult)" href=#django_components.TagResult>TagResult</a></code> ) <div class=doc-md-description> <p>Parsed component name and remaining tokens.</p> </div> </li> </ul> <p><strong>Example:</strong></p> <p>Assuming we used a component in a template like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=nv>val2</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>This function receives a list of tokens:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>[</span><span class=s1>&#39;component&#39;</span><span class=p>,</span> <span class=s1>&#39;&quot;my_comp&quot;&#39;</span><span class=p>,</span> <span class=s1>&#39;key=val&#39;</span><span class=p>,</span> <span class=s1>&#39;key2=val2&#39;</span><span class=p>]</span>
</code></pre></div> <ul> <li><code>component</code> is the tag name, which we drop.</li> <li><code>"my_comp"</code> is the component name, but we must remove the extra quotes.</li> <li>The remaining tokens we pass unmodified, as that's the input to the component.</li> </ul> <p>So in the end, we return:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>TagResult</span><span class=p>(</span><span class=s1>&#39;my_comp&#39;</span><span class=p>,</span> <span class=p>[</span><span class=s1>&#39;key=val&#39;</span><span class=p>,</span> <span class=s1>&#39;key2=val2&#39;</span><span class=p>])</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.TagFormatterABC.start_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">start_tag</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-abstractmethod"><code>abstractmethod</code></small> </span> <a href=#django_components.TagFormatterABC.start_tag class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>start_tag</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/tag_formatter.py#L99 target=_blank>See source code</a></p> <p>Formats the start tag of a component.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>Component's registered name. Required.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>str</code></b> ( <code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code> ) <div class=doc-md-description> <p>The formatted start tag.</p> </div> </li> </ul> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.TagResult class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">TagResult</span> <a href=#django_components.TagResult class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents first"> <p class="doc doc-class-bases">Bases: <code>tuple</code></p> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/tag_formatter.py#L19 target=_blank>See source code</a></p> <p>The return value from <a href=../api#django_components.TagFormatterABC.parse><code>TagFormatter.parse()</code></a>.</p> <p>Read more about <a href=../../concepts/advanced/tag_formatter>Tag formatter</a>.</p> <p><span class=doc-section-title>Attributes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" component_name
instance-attribute
(django_components.TagResult.component_name)" href=#django_components.TagResult.component_name>component_name</a></code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> </div> </li> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=" tokens
instance-attribute
(django_components.TagResult.tokens)" href=#django_components.TagResult.tokens>tokens</a></code></b> (<code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>) <div class=doc-md-description> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.TagResult.component_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">component_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.TagResult.component_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/tag_formatter.py#L26 target=_blank>See source code</a></p> <p>Component name extracted from the template tag</p> <p>For example, if we had tag</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=nv>val2</span> <span class=cp>%}</span>
</code></pre></div> <p>Then <code>component_name</code> would be <code>my_comp</code>.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.TagResult.tokens class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">tokens</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.TagResult.tokens class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>tokens</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents "> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/tag_formatter.py#L39 target=_blank>See source code</a></p> <p>Remaining tokens (words) that were passed to the tag, with component name removed</p> <p>For example, if we had tag</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=nv>val</span> <span class=nv>key2</span><span class=o>=</span><span class=nv>val2</span> <span class=cp>%}</span>
</code></pre></div> <p>Then <code>tokens</code> would be <code>['key=val', 'key2=val2']</code>.</p> </div> </div> </div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.all_components class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">all_components</span> <a href=#django_components.all_components class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>all_components</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L163 target=_blank>See source code</a></p> <p>Get a list of all created <a href=../api#django_components.Component><code>Component</code></a> classes.</p> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.all_registries class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">all_registries</span> <a href=#django_components.all_registries class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>all_registries</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L144 target=_blank>See source code</a></p> <p>Get a list of all created <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a> instances.</p> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.autodiscover class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">autodiscover</span> <a href=#django_components.autodiscover class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>autodiscover</span><span class=p>(</span><span class=n>map_module</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/autodiscovery.py#L14 target=_blank>See source code</a></p> <p>Search for all python files in <a href=../settings#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> and <a href=../settings#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> and import them.</p> <p>See <a href=../../concepts/fundamentals/autodiscovery>Autodiscovery</a>.</p> <p>NOTE: Subdirectories and files starting with an underscore <code>_</code> (except for <code>__init__.py</code> are ignored.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>map_module</code></b> (<code><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a>[[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>], <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>Map the module paths with <code>map_module</code> function. This serves as an escape hatch for when you need to use this function in tests.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code> <div class=doc-md-description> <p>List[str]: A list of module paths of imported files.</p> </div> </li> </ul> <p>To get the same list of modules that <code>autodiscover()</code> would return, but without importing them, use <a href=../api#django_components.get_component_files><code>get_component_files()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>get_component_files</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>modules</span> <span class=o>=</span> <span class=n>get_component_files</span><span class=p>(</span><span class=s2>&quot;.py&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.cached_template class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">cached_template</span> <a href=#django_components.cached_template class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>cached_template</span><span class=p>(</span><span class=n>template_string</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>template_cls</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=django.template.Template href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Template>Template</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>origin</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.Origin>Origin</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>engine</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.template.Template href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Template>Template</a></span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/template.py#L22 target=_blank>See source code</a></p> <p>DEPRECATED. Template caching will be removed in v1.</p> <p>Create a Template instance that will be cached as per the <a href=../settings#django_components.app_settings.ComponentsSettings.template_cache_size><code>COMPONENTS.template_cache_size</code></a> setting.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>template_string</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>Template as a string, same as the first argument to Django's <a href=https://docs.djangoproject.com/en/5.2/topics/templates/#template><code>Template</code></a>. Required.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>template_cls</code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-external" title=django.template.Template href=https://docs.djangoproject.com/en/5.2/_objects/ref/templates/api/#django.template.Template>Template</a>]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>Specify the Template class that should be instantiated. Defaults to Django's <a href=https://docs.djangoproject.com/en/5.2/topics/templates/#template><code>Template</code></a> class.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>origin</code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<span title=django.template.Origin>Origin</span>]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>Sets <a href=https://docs.djangoproject.com/en/5.2/howto/custom-template-backend/#origin-api-and-3rd-party-integration><code>Template.Origin</code></a>.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>Sets <code>Template.name</code></p> </div> </li> <li class="doc-section-item field-body"> <b><code>engine</code></b> (<code><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a>[<a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a>]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>Sets <code>Template.engine</code></p> </div> </li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>cached_template</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>template</span> <span class=o>=</span> <span class=n>cached_template</span><span class=p>(</span><span class=s2>&quot;Variable: {{ variable }}&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=c1># You can optionally specify Template class, and other Template inputs:</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=k>class</span><span class=w> </span><span class=nc>MyTemplate</span><span class=p>(</span><span class=n>Template</span><span class=p>):</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=k>pass</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=n>template</span> <span class=o>=</span> <span class=n>cached_template</span><span class=p>(</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=s2>&quot;Variable: {{ variable }}&quot;</span><span class=p>,</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>template_cls</span><span class=o>=</span><span class=n>MyTemplate</span><span class=p>,</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=n>name</span><span class=o>=...</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=n>origin</span><span class=o>=...</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=n>engine</span><span class=o>=...</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.format_attributes class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">format_attributes</span> <a href=#django_components.format_attributes class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>format_attributes</span><span class=p>(</span><span class=n>attributes</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Mapping href=https://docs.python.org/3.12/library/typing.html#typing.Mapping>Mapping</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/attributes.py#L92 target=_blank>See source code</a></p> <p>Format a dict of attributes into an HTML attributes string.</p> <p>Read more about <a href=../../concepts/fundamentals/html_attributes>HTML attributes</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>format_attributes</span><span class=p>({</span><span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class&quot;</span><span class=p>,</span> <span class=s2>&quot;data-id&quot;</span><span class=p>:</span> <span class=s2>&quot;123&quot;</span><span class=p>})</span>
</code></pre></div> <p>will return</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=s1>&#39;class=&quot;my-class&quot; data-id=&quot;123&quot;&#39;</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.get_component_by_class_id class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">get_component_by_class_id</span> <a href=#django_components.get_component_by_class_id class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_component_by_class_id</span><span class=p>(</span><span class=n>comp_cls_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component.py#L196 target=_blank>See source code</a></p> <p>Get a component class by its unique ID.</p> <p>Each component class is associated with a unique hash that's derived from its module import path.</p> <p>E.g. <code>path.to.my.secret.MyComponent</code> -&gt; <code>MyComponent_ab01f32</code></p> <p>This hash is available under <a href=../api#django_components.Component.class_id><code>class_id</code></a> on the component class.</p> <p>Raises <code>KeyError</code> if the component class is not found.</p> <p>NOTE: This is mainly intended for extensions.</p> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.get_component_dirs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">get_component_dirs</span> <a href=#django_components.get_component_dirs class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_component_dirs</span><span class=p>(</span><span class=n>include_apps</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=pathlib.Path href=https://docs.python.org/3.12/library/pathlib.html#pathlib.Path>Path</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/util/loader.py#L12 target=_blank>See source code</a></p> <p>Get directories that may contain component files.</p> <p>This is the heart of all features that deal with filesystem and file lookup. Autodiscovery, Django template resolution, static file resolution - They all use this.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>include_apps</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></code>, default: <code>True</code> ) <div class=doc-md-description> <p>Include directories from installed Django apps. Defaults to <code>True</code>.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" title=pathlib.Path href=https://docs.python.org/3.12/library/pathlib.html#pathlib.Path>Path</a>]</code> <div class=doc-md-description> <p>List[Path]: A list of directories that may contain component files.</p> </div> </li> </ul> <p><code>get_component_dirs()</code> searches for dirs set in <a href=../settings#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> settings. If none set, defaults to searching for a <code>"components"</code> app.</p> <p>In addition to that, also all installed Django apps are checked whether they contain directories as set in <a href=../settings#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (e.g. <code>[app]/components</code>).</p> <p><strong>Notes:</strong></p> <ul> <li> <p>Paths that do not point to directories are ignored.</p> </li> <li> <p><code>BASE_DIR</code> setting is required.</p> </li> <li> <p>The paths in <a href=../settings#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> must be absolute paths.</p> </li> </ul> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.get_component_files class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">get_component_files</span> <a href=#django_components.get_component_files class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_component_files</span><span class=p>(</span><span class=n>suffix</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentFileEntry (django_components.util.loader.ComponentFileEntry)" href=#django_components.ComponentFileEntry>ComponentFileEntry</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/util/loader.py#L119 target=_blank>See source code</a></p> <p>Search for files within the component directories (as defined in <a href=../api#django_components.get_component_dirs><code>get_component_dirs()</code></a>).</p> <p>Requires <code>BASE_DIR</code> setting to be set.</p> <p>Subdirectories and files starting with an underscore <code>_</code> (except <code>__init__.py</code>) are ignored.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>suffix</code></b> (<code><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>The suffix to search for. E.g. <code>.py</code>, <code>.js</code>, <code>.css</code>. Defaults to <code>None</code>, which will search for all files.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-internal" title=" ComponentFileEntry (django_components.util.loader.ComponentFileEntry)" href=#django_components.ComponentFileEntry>ComponentFileEntry</a>]</code> <div class=doc-md-description> <p>List[ComponentFileEntry] A list of entries that contain both the filesystem path and the python import path (dot path).</p> </div> </li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>get_component_files</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>modules</span> <span class=o>=</span> <span class=n>get_component_files</span><span class=p>(</span><span class=s2>&quot;.py&quot;</span><span class=p>)</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.get_component_url class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">get_component_url</span> <a href=#django_components.get_component_url class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>get_component_url</span><span class=p>(</span><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-internal" title=" Component (django_components.component.Component)" href=#django_components.Component>Component</a></span><span class=p>],</span> <span class=n>query</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>fragment</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/extensions/view.py#L37 target=_blank>See source code</a></p> <p>Get the URL for a <a href=../api#django_components.Component><code>Component</code></a>.</p> <p>Raises <code>RuntimeError</code> if the component is not public.</p> <p>Read more about <a href=../../concepts/fundamentals/component_views_urls>Component views and URLs</a>.</p> <p><code>get_component_url()</code> optionally accepts <code>query</code> and <code>fragment</code> arguments.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>get_component_url</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>public</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=c1># Get the URL for the component</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=n>url</span> <span class=o>=</span> <span class=n>get_component_url</span><span class=p>(</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=n>MyComponent</span><span class=p>,</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>query</span><span class=o>=</span><span class=p>{</span><span class=s2>&quot;foo&quot;</span><span class=p>:</span> <span class=s2>&quot;bar&quot;</span><span class=p>},</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>fragment</span><span class=o>=</span><span class=s2>&quot;baz&quot;</span><span class=p>,</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=p>)</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a><span class=c1># /components/ext/view/components/c1ab2c3?foo=bar#baz</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.import_libraries class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">import_libraries</span> <a href=#django_components.import_libraries class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>import_libraries</span><span class=p>(</span><span class=n>map_module</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/autodiscovery.py#L50 target=_blank>See source code</a></p> <p>Import modules set in <a href=../settings#django_components.app_settings.ComponentsSettings.libraries><code>COMPONENTS.libraries</code></a> setting.</p> <p>See <a href=../../concepts/fundamentals/autodiscovery>Autodiscovery</a>.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>map_module</code></b> (<code><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a>[[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>], <a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code>, default: <code>None</code> ) <div class=doc-md-description> <p>Map the module paths with <code>map_module</code> function. This serves as an escape hatch for when you need to use this function in tests.</p> </div> </li> </ul> <p><span class=doc-section-title>Returns:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a>[<a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a>]</code> <div class=doc-md-description> <p>List[str]: A list of module paths of imported files.</p> </div> </li> </ul> <p><strong>Examples:</strong></p> <p>Normal usage - load libraries after Django has loaded <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>import_libraries</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=k>def</span><span class=w> </span><span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>import_libraries</span><span class=p>()</span>
</code></pre></div></p> <p>Potential usage in tests <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>import_libraries</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=n>import_libraries</span><span class=p>(</span><span class=k>lambda</span> <span class=n>path</span><span class=p>:</span> <span class=n>path</span><span class=o>.</span><span class=n>replace</span><span class=p>(</span><span class=s2>&quot;tests.&quot;</span><span class=p>,</span> <span class=s2>&quot;myapp.&quot;</span><span class=p>))</span>
</code></pre></div></p> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.merge_attributes class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">merge_attributes</span> <a href=#django_components.merge_attributes class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>merge_attributes</span><span class=p>(</span><span class=o>*</span><span class=n>attrs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/attributes.py#L130 target=_blank>See source code</a></p> <p>Merge a list of dictionaries into a single dictionary.</p> <p>The dictionaries are treated as HTML attributes and are merged accordingly:</p> <ul> <li>If a same key is present in multiple dictionaries, the values are joined with a space character.</li> <li>The <code>class</code> and <code>style</code> keys are handled specially, similar to <a href=https://vuejs.org/api/render-function#mergeprops>how Vue does it</a>.</li> </ul> <p>Read more about <a href=../../concepts/fundamentals/html_attributes>HTML attributes</a>.</p> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>merge_attributes</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=p>{</span><span class=s2>&quot;my-attr&quot;</span><span class=p>:</span> <span class=s2>&quot;my-value&quot;</span><span class=p>,</span> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class&quot;</span><span class=p>},</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=p>{</span><span class=s2>&quot;my-attr&quot;</span><span class=p>:</span> <span class=s2>&quot;extra-value&quot;</span><span class=p>,</span> <span class=s2>&quot;data-id&quot;</span><span class=p>:</span> <span class=s2>&quot;123&quot;</span><span class=p>},</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=p>)</span>
</code></pre></div> <p>will result in</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=p>{</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=s2>&quot;my-attr&quot;</span><span class=p>:</span> <span class=s2>&quot;my-value extra-value&quot;</span><span class=p>,</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class&quot;</span><span class=p>,</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=s2>&quot;data-id&quot;</span><span class=p>:</span> <span class=s2>&quot;123&quot;</span><span class=p>,</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=p>}</span>
</code></pre></div> <p><strong>The <code>class</code> attribute</strong></p> <p>The <code>class</code> attribute can be given as a string, or a dictionary.</p> <ul> <li>If given as a string, it is used as is.</li> <li>If given as a dictionary, only the keys with a truthy value are used.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=n>merge_attributes</span><span class=p>(</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=p>{</span><span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class extra-class&quot;</span><span class=p>},</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=p>{</span><span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=p>{</span><span class=s2>&quot;truthy&quot;</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span> <span class=s2>&quot;falsy&quot;</span><span class=p>:</span> <span class=kc>False</span><span class=p>}},</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=p>)</span>
</code></pre></div> <p>will result in</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=p>{</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class extra-class truthy&quot;</span><span class=p>,</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=p>}</span>
</code></pre></div> <p><strong>The <code>style</code> attribute</strong></p> <p>The <code>style</code> attribute can be given as a string, a list, or a dictionary.</p> <ul> <li>If given as a string, it is used as is.</li> <li>If given as a dictionary, it is converted to a style attribute string.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=n>merge_attributes</span><span class=p>(</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <span class=p>{</span><span class=s2>&quot;style&quot;</span><span class=p>:</span> <span class=s2>&quot;color: red; background-color: blue;&quot;</span><span class=p>},</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=p>{</span><span class=s2>&quot;style&quot;</span><span class=p>:</span> <span class=p>{</span><span class=s2>&quot;background-color&quot;</span><span class=p>:</span> <span class=s2>&quot;green&quot;</span><span class=p>,</span> <span class=s2>&quot;color&quot;</span><span class=p>:</span> <span class=kc>False</span><span class=p>}},</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=p>)</span>
</code></pre></div> <p>will result in</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=p>{</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <span class=s2>&quot;style&quot;</span><span class=p>:</span> <span class=s2>&quot;color: red; background-color: blue; background-color: green;&quot;</span><span class=p>,</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=p>}</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.register class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">register</span> <a href=#django_components.register class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>register</span><span class=p>(</span><span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[</span><span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><span title=django_components.component_registry.TComponent>TComponent</span></span><span class=p>]],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Type href=https://docs.python.org/3.12/library/typing.html#typing.Type>Type</a></span><span class=p>[</span><span class=n><span title=django_components.component_registry.TComponent>TComponent</span></span><span class=p>]]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L614 target=_blank>See source code</a></p> <p>Class decorator for registering a <a href=./#django_components.Component>component</a> to a <a href=./#django_components.ComponentRegistry>component registry</a>.</p> <p>See <a href=../../concepts/advanced/component_registry/ >Registering components</a>.</p> <p><span class=doc-section-title>Parameters:</span></p> <ul> <li class="doc-section-item field-body"> <b><code>name</code></b> (<code><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></code>) <div class=doc-md-description> <p>Registered name. This is the name by which the component will be accessed from within a template when using the <a href=../template_tags/#component><code>{% component %}</code></a> tag. Required.</p> </div> </li> <li class="doc-section-item field-body"> <b><code>registry</code></b> (<code><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></code>, default: <code>None</code> ) <div class=doc-md-description> <p>Specify the <a href=./#django_components.ComponentRegistry>registry</a> to which to register this component. If omitted, component is registered to the default registry.</p> </div> </li> </ul> <p><span class=doc-section-title>Raises:</span></p> <ul> <li class="doc-section-item field-body"> <code><a class="autorefs autorefs-internal" title=" AlreadyRegistered (django_components.component_registry.AlreadyRegistered)" href=../exceptions/#django_components.AlreadyRegistered>AlreadyRegistered</a></code> <div class=doc-md-description> <p>If there is already a component registered under the same name.</p> </div> </li> </ul> <p><strong>Examples</strong>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_component&quot;</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=o>...</span>
</code></pre></div> <p>Specifing <a href=./#django_components.ComponentRegistry><code>ComponentRegistry</code></a> the component should be registered to by setting the <code>registry</code> kwarg:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Library</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>ComponentRegistry</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=n>my_lib</span> <span class=o>=</span> <span class=n>Library</span><span class=p>()</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=n>my_reg</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>(</span><span class=n>library</span><span class=o>=</span><span class=n>my_lib</span><span class=p>)</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_component&quot;</span><span class=p>,</span> <span class=n>registry</span><span class=o>=</span><span class=n>my_reg</span><span class=p>)</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=o>...</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-attribute"> <h2 id=django_components.registry class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">registry</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.registry class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>registry</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-internal" title=" ComponentRegistry (django_components.component_registry.ComponentRegistry)" href=#django_components.ComponentRegistry>ComponentRegistry</a></span><span class=p>()</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/component_registry.py#L581 target=_blank>See source code</a></p> <p>The default and global <a href=./#django_components.ComponentRegistry>component registry</a>. Use this instance to directly register or remove components:</p> <p>See <a href=../../concepts/advanced/component_registry/ >Registering components</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># Register components</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>,</span> <span class=n>ButtonComponent</span><span class=p>)</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>registry</span><span class=o>.</span><span class=n>register</span><span class=p>(</span><span class=s2>&quot;card&quot;</span><span class=p>,</span> <span class=n>CardComponent</span><span class=p>)</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=c1># Get single</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=n>registry</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=c1># Get all</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=n>registry</span><span class=o>.</span><span class=n>all</span><span class=p>()</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=c1># Check if component is registered</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=n>registry</span><span class=o>.</span><span class=n>has</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a><span class=c1># Unregister single</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a><span class=n>registry</span><span class=o>.</span><span class=n>unregister</span><span class=p>(</span><span class=s2>&quot;button&quot;</span><span class=p>)</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a><span class=c1># Unregister all</span>
<a id=__codelineno-0-18 name=__codelineno-0-18 href=#__codelineno-0-18></a><span class=n>registry</span><span class=o>.</span><span class=n>clear</span><span class=p>()</span>
</code></pre></div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.render_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">render_dependencies</span> <a href=#django_components.render_dependencies class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render_dependencies</span><span class=p>(</span><span class=n>content</span><span class=p>:</span> <span class=n><span title=django_components.dependencies.TContent>TContent</span></span><span class=p>,</span> <span class=n>strategy</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=" DependenciesStrategy
module-attribute
(django_components.dependencies.DependenciesStrategy)" href=#django_components.DependenciesStrategy>DependenciesStrategy</a></span> <span class=o>=</span> <span class=s1>&#39;document&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django_components.dependencies.TContent>TContent</span></span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/dependencies.py#L363 target=_blank>See source code</a></p> <p>Given a string that contains parts that were rendered by components, this function inserts all used JS and CSS.</p> <p>By default, the string is parsed as an HTML and: - CSS is inserted at the end of <code>&lt;head&gt;</code> (if present) - JS is inserted at the end of <code>&lt;body&gt;</code> (if present)</p> <p>If you used <code>{% component_js_dependencies %}</code> or <code>{% component_css_dependencies %}</code>, then the JS and CSS will be inserted only at these locations.</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>def</span><span class=w> </span><span class=nf>my_view</span><span class=p>(</span><span class=n>request</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>template</span> <span class=o>=</span> <span class=n>Template</span><span class=p>(</span><span class=s1>&#39;&#39;&#39;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=s1> {</span><span class=si>% lo</span><span class=s1>ad components %}</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=s1> &lt;!doctype html&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=s1> &lt;html&gt;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=s1> &lt;head&gt;&lt;/head&gt;</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=s1> &lt;body&gt;</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=s1> &lt;h1&gt;{{ table_name }}&lt;/h1&gt;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=s1> {</span><span class=si>% c</span><span class=s1>omponent &quot;table&quot; name=table_name / %}</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=s1> &lt;/body&gt;</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=s1> &lt;/html&gt;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=s1> &#39;&#39;&#39;</span><span class=p>)</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=n>html</span> <span class=o>=</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=n>Context</span><span class=p>({</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=s2>&quot;table_name&quot;</span><span class=p>:</span> <span class=n>request</span><span class=o>.</span><span class=n>GET</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>],</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a> <span class=p>})</span>
<a id=__codelineno-0-18 name=__codelineno-0-18 href=#__codelineno-0-18></a> <span class=p>)</span>
<a id=__codelineno-0-19 name=__codelineno-0-19 href=#__codelineno-0-19></a>
<a id=__codelineno-0-20 name=__codelineno-0-20 href=#__codelineno-0-20></a> <span class=c1># This inserts components&#39; JS and CSS</span>
<a id=__codelineno-0-21 name=__codelineno-0-21 href=#__codelineno-0-21></a> <span class=n>processed_html</span> <span class=o>=</span> <span class=n>render_dependencies</span><span class=p>(</span><span class=n>html</span><span class=p>)</span>
<a id=__codelineno-0-22 name=__codelineno-0-22 href=#__codelineno-0-22></a>
<a id=__codelineno-0-23 name=__codelineno-0-23 href=#__codelineno-0-23></a> <span class=k>return</span> <span class=n>HttpResponse</span><span class=p>(</span><span class=n>processed_html</span><span class=p>)</span>
</code></pre></div></p> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.template_tag class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">template_tag</span> <a href=#django_components.template_tag class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>template_tag</span><span class=p>(</span><span class=n>library</span><span class=p>:</span> <span class=n><span title=django.template.Library>Library</span></span><span class=p>,</span> <span class=n>tag</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>end_tag</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=n>allowed_flags</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[</span><span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>]</span>
</code></pre></div> <div class="doc doc-contents first"> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/node.py#L589 target=_blank>See source code</a></p> <p>A simplified version of creating a template tag based on <a href=../api#django_components.BaseNode><code>BaseNode</code></a>.</p> <p>Instead of defining the whole class, you can just define the <a href=../api#django_components.BaseNode.render><code>render()</code></a> method.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Context</span><span class=p>,</span> <span class=n>Library</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>BaseNode</span><span class=p>,</span> <span class=n>template_tag</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=n>library</span> <span class=o>=</span> <span class=n>Library</span><span class=p>()</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=nd>@template_tag</span><span class=p>(</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>library</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>tag</span><span class=o>=</span><span class=s2>&quot;mytag&quot;</span><span class=p>,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=n>end_tag</span><span class=o>=</span><span class=s2>&quot;endmytag&quot;</span><span class=p>,</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>allowed_flags</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;required&quot;</span><span class=p>],</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=p>)</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=k>def</span><span class=w> </span><span class=nf>mytag</span><span class=p>(</span><span class=n>node</span><span class=p>:</span> <span class=n>BaseNode</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;Hello, </span><span class=si>{</span><span class=n>name</span><span class=si>}</span><span class=s2>!&quot;</span>
</code></pre></div> <p>This will allow the template tag <code>{% mytag %}</code> to be used like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>mytag</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;John&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=cp>{%</span> <span class=k>mytag</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;John&quot;</span> <span class=nv>required</span> <span class=cp>%}</span><span class=x> ... </span><span class=cp>{%</span> <span class=k>endmytag</span> <span class=cp>%}</span>
</code></pre></div> <p>The given function will be wrapped in a class that inherits from <a href=../api#django_components.BaseNode><code>BaseNode</code></a>.</p> <p>And this class will be registered with the given library.</p> <p>The function MUST accept at least two positional arguments: <code>node</code> and <code>context</code></p> <ul> <li><code>node</code> is the <a href=../api#django_components.BaseNode><code>BaseNode</code></a> instance.</li> <li><code>context</code> is the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context><code>Context</code></a> of the template.</li> </ul> <p>Any extra parameters defined on this function will be part of the tag's input parameters.</p> <p>For more info, see <a href=../api#django_components.BaseNode.render><code>BaseNode.render()</code></a>.</p> </div> </div> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../../concepts/advanced/component_libraries/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Component libraries"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Component libraries </div> </div> </a> <a href=../commands/ class="md-footer__link md-footer__link--next" aria-label="Next: CLI commands"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> CLI commands </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/django-components/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 444.7a20.4 20.4 0 1 1 0-40.7 20.4 20.4 0 1 1 0 40.7M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.6-183.4a20.4 20.4 0 1 1 0 40.8 20.4 20.4 0 1 1 0-40.8"/></svg> </a> <a href=https://discord.gg/NaQ8QPyHtD target=_blank rel=noopener title=discord.gg class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 576 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M492.5 69.8c-.2-.3-.4-.6-.8-.7-38.1-17.5-78.4-30-119.7-37.1-.4-.1-.8 0-1.1.1s-.6.4-.8.8c-5.5 9.9-10.5 20.2-14.9 30.6-44.6-6.8-89.9-6.8-134.4 0-4.5-10.5-9.5-20.7-15.1-30.6-.2-.3-.5-.6-.8-.8s-.7-.2-1.1-.2C162.5 39 122.2 51.5 84.1 69c-.3.1-.6.4-.8.7C7.1 183.5-13.8 294.6-3.6 404.2c0 .3.1.5.2.8s.3.4.5.6c44.4 32.9 94 58 146.8 74.2.4.1.8.1 1.1 0s.7-.4.9-.7c11.3-15.4 21.4-31.8 30-48.8.1-.2.2-.5.2-.8s0-.5-.1-.8-.2-.5-.4-.6-.4-.3-.7-.4c-15.8-6.1-31.2-13.4-45.9-21.9-.3-.2-.5-.4-.7-.6s-.3-.6-.3-.9 0-.6.2-.9.3-.5.6-.7c3.1-2.3 6.2-4.7 9.1-7.1.3-.2.6-.4.9-.4s.7 0 1 .1c96.2 43.9 200.4 43.9 295.5 0 .3-.1.7-.2 1-.2s.7.2.9.4c2.9 2.4 6 4.9 9.1 7.2.2.2.4.4.6.7s.2.6.2.9-.1.6-.3.9-.4.5-.6.6c-14.7 8.6-30 15.9-45.9 21.8-.2.1-.5.2-.7.4s-.3.4-.4.7-.1.5-.1.8.1.5.2.8c8.8 17 18.8 33.3 30 48.8.2.3.6.6.9.7s.8.1 1.1 0c52.9-16.2 102.6-41.3 147.1-74.2.2-.2.4-.4.5-.6s.2-.5.2-.8c12.3-126.8-20.5-236.9-86.9-334.5zm-302 267.7c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.4 59.2-52.8 59.2m195.4 0c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.2 59.2-52.8 59.2"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.973d3a69.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.92b07e13.min.js></script> <script src=../../assets/_markdown_exec_pyodide.js></script> <script src=../../js/timeago.min.js></script> <script src=../../js/timeago_mkdocs_material.js></script> </body> </html>