mirror of
https://github.com/django-components/django-components.git
synced 2025-09-22 21:52:26 +00:00
585 lines
No EOL
245 KiB
HTML
585 lines
No EOL
245 KiB
HTML
<!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/concepts/fundamentals/slots/ rel=canonical><link href=../rendering_components/ rel=prev><link href=../template_tag_syntax/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.19"><title>Slots - 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="Slots - 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/concepts/fundamentals/slots.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/concepts/fundamentals/slots/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Slots - 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/concepts/fundamentals/slots.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=#what-are-slots 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> Slots </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 md-tabs__item--active"> <a href=../single_file_components/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../../reference/api/ 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--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_3 checked> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex> <!-- 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=true> <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--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_3_1 checked> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex> <!-- 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=true> <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=../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=../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=../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=../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=../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=../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=../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 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> Slots <!-- 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> Slots <!-- 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=#what-are-slots class=md-nav__link> <span class=md-ellipsis> What are slots? </span> </a> </li> <li class=md-nav__item> <a href=#slot-anatomy class=md-nav__link> <span class=md-ellipsis> Slot anatomy </span> </a> </li> <li class=md-nav__item> <a href=#slots-overview class=md-nav__link> <span class=md-ellipsis> Slots overview </span> </a> <nav class=md-nav aria-label="Slots overview"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#slot-definition class=md-nav__link> <span class=md-ellipsis> Slot definition </span> </a> </li> <li class=md-nav__item> <a href=#slot-filling class=md-nav__link> <span class=md-ellipsis> Slot filling </span> </a> </li> <li class=md-nav__item> <a href=#default-slot class=md-nav__link> <span class=md-ellipsis> Default slot </span> </a> </li> <li class=md-nav__item> <a href=#required-slot class=md-nav__link> <span class=md-ellipsis> Required slot </span> </a> </li> <li class=md-nav__item> <a href=#access-fills class=md-nav__link> <span class=md-ellipsis> Access fills </span> </a> </li> <li class=md-nav__item> <a href=#dynamic-fills class=md-nav__link> <span class=md-ellipsis> Dynamic fills </span> </a> </li> <li class=md-nav__item> <a href=#slot-data class=md-nav__link> <span class=md-ellipsis> Slot data </span> </a> </li> <li class=md-nav__item> <a href=#slot-fallback class=md-nav__link> <span class=md-ellipsis> Slot fallback </span> </a> </li> <li class=md-nav__item> <a href=#slot-functions class=md-nav__link> <span class=md-ellipsis> Slot functions </span> </a> </li> <li class=md-nav__item> <a href=#filling-slots-with-functions class=md-nav__link> <span class=md-ellipsis> Filling slots with functions </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#slot-class class=md-nav__link> <span class=md-ellipsis> Slot class </span> </a> <nav class=md-nav aria-label="Slot class"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#rendering-slots class=md-nav__link> <span class=md-ellipsis> Rendering slots </span> </a> </li> <li class=md-nav__item> <a href=#slot-context class=md-nav__link> <span class=md-ellipsis> Slot context </span> </a> </li> <li class=md-nav__item> <a href=#slot-metadata class=md-nav__link> <span class=md-ellipsis> Slot metadata </span> </a> </li> <li class=md-nav__item> <a href=#slot-contents class=md-nav__link> <span class=md-ellipsis> Slot contents </span> </a> </li> <li class=md-nav__item> <a href=#escaping-slots-content class=md-nav__link> <span class=md-ellipsis> Escaping slots content </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#examples class=md-nav__link> <span class=md-ellipsis> Examples </span> </a> <nav class=md-nav aria-label=Examples> <ul class=md-nav__list> <li class=md-nav__item> <a href=#pass-through-all-the-slots class=md-nav__link> <span class=md-ellipsis> Pass through all the slots </span> </a> </li> <li class=md-nav__item> <a href=#required-and-default-slots class=md-nav__link> <span class=md-ellipsis> Required and default slots </span> </a> </li> <li class=md-nav__item> <a href=#dynamic-slots-in-table-component class=md-nav__link> <span class=md-ellipsis> Dynamic slots in table component </span> </a> </li> <li class=md-nav__item> <a href=#spread-operator class=md-nav__link> <span class=md-ellipsis> Spread operator </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#legacy-conditional-slots class=md-nav__link> <span class=md-ellipsis> Legacy conditional slots </span> </a> <nav class=md-nav aria-label="Legacy conditional slots"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-is_filled-of-slot-names-with-special-characters class=md-nav__link> <span class=md-ellipsis> Accessing is_filled of slot names with special characters </span> </a> </li> </ul> </nav> </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=../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=../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=../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=../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=../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=../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=../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--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 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> <!-- 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=../../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=../../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=../../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=../../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=../../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=../../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=../../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=../../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=../../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=../../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=../../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=../../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--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_4> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <!-- 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=false> <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> <a href=../../../reference/api/ class=md-nav__link> <!-- 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> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=../../../reference/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=#what-are-slots class=md-nav__link> <span class=md-ellipsis> What are slots? </span> </a> </li> <li class=md-nav__item> <a href=#slot-anatomy class=md-nav__link> <span class=md-ellipsis> Slot anatomy </span> </a> </li> <li class=md-nav__item> <a href=#slots-overview class=md-nav__link> <span class=md-ellipsis> Slots overview </span> </a> <nav class=md-nav aria-label="Slots overview"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#slot-definition class=md-nav__link> <span class=md-ellipsis> Slot definition </span> </a> </li> <li class=md-nav__item> <a href=#slot-filling class=md-nav__link> <span class=md-ellipsis> Slot filling </span> </a> </li> <li class=md-nav__item> <a href=#default-slot class=md-nav__link> <span class=md-ellipsis> Default slot </span> </a> </li> <li class=md-nav__item> <a href=#required-slot class=md-nav__link> <span class=md-ellipsis> Required slot </span> </a> </li> <li class=md-nav__item> <a href=#access-fills class=md-nav__link> <span class=md-ellipsis> Access fills </span> </a> </li> <li class=md-nav__item> <a href=#dynamic-fills class=md-nav__link> <span class=md-ellipsis> Dynamic fills </span> </a> </li> <li class=md-nav__item> <a href=#slot-data class=md-nav__link> <span class=md-ellipsis> Slot data </span> </a> </li> <li class=md-nav__item> <a href=#slot-fallback class=md-nav__link> <span class=md-ellipsis> Slot fallback </span> </a> </li> <li class=md-nav__item> <a href=#slot-functions class=md-nav__link> <span class=md-ellipsis> Slot functions </span> </a> </li> <li class=md-nav__item> <a href=#filling-slots-with-functions class=md-nav__link> <span class=md-ellipsis> Filling slots with functions </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#slot-class class=md-nav__link> <span class=md-ellipsis> Slot class </span> </a> <nav class=md-nav aria-label="Slot class"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#rendering-slots class=md-nav__link> <span class=md-ellipsis> Rendering slots </span> </a> </li> <li class=md-nav__item> <a href=#slot-context class=md-nav__link> <span class=md-ellipsis> Slot context </span> </a> </li> <li class=md-nav__item> <a href=#slot-metadata class=md-nav__link> <span class=md-ellipsis> Slot metadata </span> </a> </li> <li class=md-nav__item> <a href=#slot-contents class=md-nav__link> <span class=md-ellipsis> Slot contents </span> </a> </li> <li class=md-nav__item> <a href=#escaping-slots-content class=md-nav__link> <span class=md-ellipsis> Escaping slots content </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#examples class=md-nav__link> <span class=md-ellipsis> Examples </span> </a> <nav class=md-nav aria-label=Examples> <ul class=md-nav__list> <li class=md-nav__item> <a href=#pass-through-all-the-slots class=md-nav__link> <span class=md-ellipsis> Pass through all the slots </span> </a> </li> <li class=md-nav__item> <a href=#required-and-default-slots class=md-nav__link> <span class=md-ellipsis> Required and default slots </span> </a> </li> <li class=md-nav__item> <a href=#dynamic-slots-in-table-component class=md-nav__link> <span class=md-ellipsis> Dynamic slots in table component </span> </a> </li> <li class=md-nav__item> <a href=#spread-operator class=md-nav__link> <span class=md-ellipsis> Spread operator </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#legacy-conditional-slots class=md-nav__link> <span class=md-ellipsis> Legacy conditional slots </span> </a> <nav class=md-nav aria-label="Legacy conditional slots"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-is_filled-of-slot-names-with-special-characters class=md-nav__link> <span class=md-ellipsis> Accessing is_filled of slot names with special characters </span> </a> </li> </ul> </nav> </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/concepts/fundamentals/slots.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/concepts/fundamentals/slots.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> <h1>Slots</h1> <p>django-components has the most extensive slot system of all the popular Python templating engines.</p> <p>The slot system is based on <a href=https://vuejs.org/guide/components/slots.html>Vue</a>, and works across both Django templates and Python code.</p> <h2 id=what-are-slots>What are slots?<a class=headerlink href=#what-are-slots title="Permanent link">¤</a></h2> <p>Components support something called 'slots'.</p> <p>When you write a component, you define its template. The template will always be the same each time you render the component.</p> <p>However, sometimes you may want to customize the component slightly to change the content of the component. This is where slots come in.</p> <p>Slots allow you to insert parts of HTML into the component. This makes components more reusable and composable.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=x><div class="calendar-component"></span>
|
|
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> <div class="header"></span>
|
|
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=c>{# This is where the component will insert the content #}</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>"header"</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> </div></span>
|
|
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=x></div></span>
|
|
</code></pre></div> <h2 id=slot-anatomy>Slot anatomy<a class=headerlink href=#slot-anatomy title="Permanent link">¤</a></h2> <p>Slots consists of two parts:</p> <ol> <li><a href=../../../reference/template_tags#slot><code>{% slot %}</code></a> tag - Inside your component you decide where you want to insert the content.</li> <li><a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag - In the parent template (outside the component) you decide what content to insert into the slot. It "fills" the slot with the specified content.</li> </ol> <p>Let's look at an example:</p> <p>First, we define the component template. This component contains two slots, <code>header</code> and <code>body</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=cm><!-- calendar.html --></span>
|
|
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
|
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
|
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"header"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> Calendar header
|
|
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <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=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
|
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"body"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> Today's date is <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span>
|
|
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
</code></pre></div> <p>Next, when using the component, we can insert our own content into the slots. It looks like this:</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>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"body"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> Can you believe it's already
|
|
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
|
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <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=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Since the <code>'header'</code> fill is unspecified, it's <a href=#default-slot>default value</a> is used.</p> <p>When rendered, notice that:</p> <ul> <li>The body is filled with the content we specified,</li> <li>The header is still the default value we defined in the component template.</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=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
|
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
|
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> Calendar header
|
|
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
|
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span>2020-06-06<span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
|
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
</code></pre></div> <h2 id=slots-overview>Slots overview<a class=headerlink href=#slots-overview title="Permanent link">¤</a></h2> <h3 id=slot-definition>Slot definition<a class=headerlink href=#slot-definition title="Permanent link">¤</a></h3> <p>Slots are defined with the <a href=../../../reference/template_tags#slot><code>{% slot %}</code></a> tag:</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>slot</span> <span class=s2>"name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=x> Default content</span>
|
|
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Single component can have multiple slots:</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>slot</span> <span class=s2>"name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=x> Default content</span>
|
|
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</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=cp>{%</span> <span class=k>slot</span> <span class=s2>"other_name"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>And you can even define the same slot in multiple places:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=x><div></span>
|
|
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a><span class=x> First content</span>
|
|
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a><span class=x></div></span>
|
|
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a><span class=x><div></span>
|
|
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a><span class=x> Second content</span>
|
|
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a><span class=x> </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a><span class=x></div></span>
|
|
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>If you define the same slot in multiple places, you must mark each slot individually when setting <code>default</code> or <code>required</code> flags, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
|
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
|
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>Image here<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
|
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>Image here<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
</code></pre></div> </div> <h3 id=slot-filling>Slot filling<a class=headerlink href=#slot-filling title="Permanent link">¤</a></h3> <p>Fill can be defined with the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag:</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>"calendar"</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>"name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=x> Filled content</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=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"other_name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a><span class=x> Filled content</span>
|
|
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Or in Python with the <a href=../../../reference/api#django_components.Component.render><code>slots</code></a> argument:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=s2>"name"</span><span class=p>:</span> <span class=s2>"Filled content"</span><span class=p>,</span>
|
|
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=s2>"other_name"</span><span class=p>:</span> <span class=s2>"Filled content"</span><span class=p>,</span>
|
|
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> <span class=p>},</span>
|
|
<a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a><span class=p>)</span>
|
|
</code></pre></div> <h3 id=default-slot>Default slot<a class=headerlink href=#default-slot title="Permanent link">¤</a></h3> <p>You can make the syntax shorter by marking the slot as <a href=../../../reference/template_tags#slot><code>default</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a><span class=x> Default content</span>
|
|
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>This allows you to fill the slot directly in the <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag, omitting the <code>{% fill %}</code> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a><span class=x> Filled content</span>
|
|
<a id=__codelineno-11-3 name=__codelineno-11-3 href=#__codelineno-11-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>To target the default slot in Python, you can use the <code>"default"</code> slot name:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>"default"</span><span class=p>:</span> <span class=s2>"Filled content"</span><span class=p>},</span>
|
|
<a id=__codelineno-12-3 name=__codelineno-12-3 href=#__codelineno-12-3></a><span class=p>)</span>
|
|
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Accessing default slot in Python</p> <p>Since the default slot is stored under the slot name <code>default</code>, you can access the default slot in Python under the <code>"default"</code> key:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-13-1 name=__codelineno-13-1 href=#__codelineno-13-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-13-2 name=__codelineno-13-2 href=#__codelineno-13-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-13-3 name=__codelineno-13-3 href=#__codelineno-13-3></a> <span class=n>default_slot</span> <span class=o>=</span> <span class=n>slots</span><span class=p>[</span><span class=s2>"default"</span><span class=p>]</span>
|
|
<a id=__codelineno-13-4 name=__codelineno-13-4 href=#__codelineno-13-4></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-13-5 name=__codelineno-13-5 href=#__codelineno-13-5></a> <span class=s2>"default_slot"</span><span class=p>:</span> <span class=n>default_slot</span><span class=p>,</span>
|
|
<a id=__codelineno-13-6 name=__codelineno-13-6 href=#__codelineno-13-6></a> <span class=p>}</span>
|
|
</code></pre></div> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Only one <a href=../../../reference/template_tags#slot><code>{% slot %}</code></a> can be marked as <code>default</code>. But you can have multiple slots with the same name all marked as <code>default</code>.</p> <p>If you define multiple <strong>different</strong> slots as <code>default</code>, this will raise an error.</p> <p>❌ Don't do this</p> <div class=highlight><pre><span></span><code><a id=__codelineno-14-1 name=__codelineno-14-1 href=#__codelineno-14-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-14-2 name=__codelineno-14-2 href=#__codelineno-14-2></a><span class=x> Default content</span>
|
|
<a id=__codelineno-14-3 name=__codelineno-14-3 href=#__codelineno-14-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-14-4 name=__codelineno-14-4 href=#__codelineno-14-4></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"other_name"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-14-5 name=__codelineno-14-5 href=#__codelineno-14-5></a><span class=x> Default content</span>
|
|
<a id=__codelineno-14-6 name=__codelineno-14-6 href=#__codelineno-14-6></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>✅ Do this instead</p> <div class=highlight><pre><span></span><code><a id=__codelineno-15-1 name=__codelineno-15-1 href=#__codelineno-15-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-15-2 name=__codelineno-15-2 href=#__codelineno-15-2></a><span class=x> Default content</span>
|
|
<a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-15-4 name=__codelineno-15-4 href=#__codelineno-15-4></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-15-5 name=__codelineno-15-5 href=#__codelineno-15-5></a><span class=x> Default content</span>
|
|
<a id=__codelineno-15-6 name=__codelineno-15-6 href=#__codelineno-15-6></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
</code></pre></div> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Do NOT combine default fills with explicit named <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tags.</p> <p>The following component template will raise an error when rendered:</p> <p>❌ Don't do this</p> <div class=highlight><pre><span></span><code><a id=__codelineno-16-1 name=__codelineno-16-1 href=#__codelineno-16-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-16-2 name=__codelineno-16-2 href=#__codelineno-16-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header"</span> <span class=cp>%}</span><span class=x>Totally new header!</span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a><span class=x> Can you believe it's already <span></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=x></span>??</span>
|
|
<a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>✅ Do this instead</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-17-2 name=__codelineno-17-2 href=#__codelineno-17-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header"</span> <span class=cp>%}</span><span class=x>Totally new header!</span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"default"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=x> Can you believe it's already <span></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=x></span>??</span>
|
|
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-17-6 name=__codelineno-17-6 href=#__codelineno-17-6></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>You cannot double-fill a slot.</p> <p>That is, if both <code>{% fill "default" %}</code> and <code>{% fill "header" %}</code> point to the same slot, this will raise an error when rendered.</p> </div> <h3 id=required-slot>Required slot<a class=headerlink href=#required-slot title="Permanent link">¤</a></h3> <p>You can make the slot required by adding the <a href=../../../reference/template_tags#slot><code>required</code></a> keyword:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=nv>required</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-18-2 name=__codelineno-18-2 href=#__codelineno-18-2></a><span class=x> Default content</span>
|
|
<a id=__codelineno-18-3 name=__codelineno-18-3 href=#__codelineno-18-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>This will raise an error if the slot is not filled.</p> <h3 id=access-fills>Access fills<a class=headerlink href=#access-fills title="Permanent link">¤</a></h3> <p>You can access the fills with the <a href=../../../reference/template_vars#slots><code>{{ component_vars.slots.<name> }}</code></a> template variable:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-19-1 name=__codelineno-19-1 href=#__codelineno-19-1></a><span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.slots.my_slot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-19-2 name=__codelineno-19-2 href=#__codelineno-19-2></a><span class=x> <div></span>
|
|
<a id=__codelineno-19-3 name=__codelineno-19-3 href=#__codelineno-19-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"my_slot"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-19-4 name=__codelineno-19-4 href=#__codelineno-19-4></a><span class=x> Filled content</span>
|
|
<a id=__codelineno-19-5 name=__codelineno-19-5 href=#__codelineno-19-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-19-6 name=__codelineno-19-6 href=#__codelineno-19-6></a><span class=x> </div></span>
|
|
<a id=__codelineno-19-7 name=__codelineno-19-7 href=#__codelineno-19-7></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>And in Python with the <a href=../../../reference/api#django_components.Component.slots><code>Component.slots</code></a> property:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-20-1 name=__codelineno-20-1 href=#__codelineno-20-1></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-20-2 name=__codelineno-20-2 href=#__codelineno-20-2></a> <span class=c1># `get_template_data` receives the `slots` argument directly</span>
|
|
<a id=__codelineno-20-3 name=__codelineno-20-3 href=#__codelineno-20-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-20-4 name=__codelineno-20-4 href=#__codelineno-20-4></a> <span class=k>if</span> <span class=s2>"my_slot"</span> <span class=ow>in</span> <span class=n>slots</span><span class=p>:</span>
|
|
<a id=__codelineno-20-5 name=__codelineno-20-5 href=#__codelineno-20-5></a> <span class=n>content</span> <span class=o>=</span> <span class=s2>"Filled content"</span>
|
|
<a id=__codelineno-20-6 name=__codelineno-20-6 href=#__codelineno-20-6></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-20-7 name=__codelineno-20-7 href=#__codelineno-20-7></a> <span class=n>content</span> <span class=o>=</span> <span class=s2>"Default content"</span>
|
|
<a id=__codelineno-20-8 name=__codelineno-20-8 href=#__codelineno-20-8></a>
|
|
<a id=__codelineno-20-9 name=__codelineno-20-9 href=#__codelineno-20-9></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-20-10 name=__codelineno-20-10 href=#__codelineno-20-10></a> <span class=s2>"my_slot"</span><span class=p>:</span> <span class=n>content</span><span class=p>,</span>
|
|
<a id=__codelineno-20-11 name=__codelineno-20-11 href=#__codelineno-20-11></a> <span class=p>}</span>
|
|
<a id=__codelineno-20-12 name=__codelineno-20-12 href=#__codelineno-20-12></a>
|
|
<a id=__codelineno-20-13 name=__codelineno-20-13 href=#__codelineno-20-13></a> <span class=c1># In other methods you can still access the slots with `Component.slots`</span>
|
|
<a id=__codelineno-20-14 name=__codelineno-20-14 href=#__codelineno-20-14></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>template</span><span class=p>):</span>
|
|
<a id=__codelineno-20-15 name=__codelineno-20-15 href=#__codelineno-20-15></a> <span class=k>if</span> <span class=s2>"my_slot"</span> <span class=ow>in</span> <span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=p>:</span>
|
|
<a id=__codelineno-20-16 name=__codelineno-20-16 href=#__codelineno-20-16></a> <span class=c1># Do something</span>
|
|
</code></pre></div> <h3 id=dynamic-fills>Dynamic fills<a class=headerlink href=#dynamic-fills title="Permanent link">¤</a></h3> <p>The slot and fill names can be set as variables. This way you can fill slots dynamically:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-21-1 name=__codelineno-21-1 href=#__codelineno-21-1></a><span class=cp>{%</span> <span class=k>with</span> <span class=s2>"body"</span> <span class=k>as</span> <span class=nv>slot_name</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-21-2 name=__codelineno-21-2 href=#__codelineno-21-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-21-3 name=__codelineno-21-3 href=#__codelineno-21-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>slot_name</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-21-4 name=__codelineno-21-4 href=#__codelineno-21-4></a><span class=x> Filled content</span>
|
|
<a id=__codelineno-21-5 name=__codelineno-21-5 href=#__codelineno-21-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-21-6 name=__codelineno-21-6 href=#__codelineno-21-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-21-7 name=__codelineno-21-7 href=#__codelineno-21-7></a><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>You can even use <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#std-templatetag-if><code>{% if %}</code></a> and <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#std-templatetag-for><code>{% for %}</code></a> tags inside the <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag to fill slots with more control:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-2 name=__codelineno-22-2 href=#__codelineno-22-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>if</span> <span class=nv>condition</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-3 name=__codelineno-22-3 href=#__codelineno-22-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-4 name=__codelineno-22-4 href=#__codelineno-22-4></a><span class=x> Filled content</span>
|
|
<a id=__codelineno-22-5 name=__codelineno-22-5 href=#__codelineno-22-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-6 name=__codelineno-22-6 href=#__codelineno-22-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-7 name=__codelineno-22-7 href=#__codelineno-22-7></a>
|
|
<a id=__codelineno-22-8 name=__codelineno-22-8 href=#__codelineno-22-8></a><span class=x> </span><span class=cp>{%</span> <span class=k>for</span> <span class=nv>item</span> <span class=k>in</span> <span class=nv>items</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-9 name=__codelineno-22-9 href=#__codelineno-22-9></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>item.name</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-10 name=__codelineno-22-10 href=#__codelineno-22-10></a><span class=x> Item: </span><span class=cp>{{</span> <span class=nv>item.value</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-22-11 name=__codelineno-22-11 href=#__codelineno-22-11></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-12 name=__codelineno-22-12 href=#__codelineno-22-12></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-22-13 name=__codelineno-22-13 href=#__codelineno-22-13></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>You can also use <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#std-templatetag-with><code>{% with %}</code></a> or even custom tags to generate the fills dynamically:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-23-1 name=__codelineno-23-1 href=#__codelineno-23-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-23-2 name=__codelineno-23-2 href=#__codelineno-23-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>with</span> <span class=nv>item.name</span> <span class=k>as</span> <span class=nv>name</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-23-3 name=__codelineno-23-3 href=#__codelineno-23-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>name</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-23-4 name=__codelineno-23-4 href=#__codelineno-23-4></a><span class=x> Item: </span><span class=cp>{{</span> <span class=nv>item.value</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-23-5 name=__codelineno-23-5 href=#__codelineno-23-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-23-6 name=__codelineno-23-6 href=#__codelineno-23-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-23-7 name=__codelineno-23-7 href=#__codelineno-23-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>If you dynamically generate <code>{% fill %}</code> tags, be careful to render text only inside the <code>{% fill %}</code> tags.</p> <p>Any text rendered outside <code>{% fill %}</code> tags will be considered a default fill and will raise an error if combined with explicit fills. (See <a href=#default-slot>Default slot</a>)</p> </div> <h3 id=slot-data>Slot data<a class=headerlink href=#slot-data title="Permanent link">¤</a></h3> <p>Sometimes the slots need to access data from the component. Imagine an HTML table component which has a slot to configure how to render the rows. Each row has a different data, so you need to pass the data to the slot.</p> <p>Similarly to <a href=https://vuejs.org/guide/components/slots#scoped-slots>Vue's scoped slots</a>, you can pass data to the slot, and then access it in the fill.</p> <p>This consists of two steps:</p> <ol> <li>Passing data to <a href=../../../reference/template_tags#slot><code>{% slot %}</code></a> tag</li> <li>Accessing data in <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag</li> </ol> <p>The data is passed to the slot as extra keyword arguments. Below we set two extra arguments: <code>first_name</code> and <code>job</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-24-1 name=__codelineno-24-1 href=#__codelineno-24-1></a><span class=c>{# Pass data to the slot #}</span>
|
|
<a id=__codelineno-24-2 name=__codelineno-24-2 href=#__codelineno-24-2></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=nv>first_name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-24-3 name=__codelineno-24-3 href=#__codelineno-24-3></a><span class=x> </span><span class=c>{# Fallback implementation #}</span>
|
|
<a id=__codelineno-24-4 name=__codelineno-24-4 href=#__codelineno-24-4></a><span class=x> Name: </span><span class=cp>{{</span> <span class=nv>first_name</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-24-5 name=__codelineno-24-5 href=#__codelineno-24-5></a><span class=x> Job: </span><span class=cp>{{</span> <span class=nv>job</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-24-6 name=__codelineno-24-6 href=#__codelineno-24-6></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p><code>name</code> kwarg is already used for slot name, so you cannot pass it as slot data.</p> </div> <p>To access the slot's data in the fill, use the <a href=../../../reference/template_tags#fill><code>data</code></a> keyword. This sets the name of the variable that holds the data in the fill:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-25-1 name=__codelineno-25-1 href=#__codelineno-25-1></a><span class=c>{# Access data in the fill #}</span>
|
|
<a id=__codelineno-25-2 name=__codelineno-25-2 href=#__codelineno-25-2></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"profile"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-25-3 name=__codelineno-25-3 href=#__codelineno-25-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"name"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"d"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-25-4 name=__codelineno-25-4 href=#__codelineno-25-4></a><span class=x> Hello, my name is <h1></span><span class=cp>{{</span> <span class=nv>d.first_name</span> <span class=cp>}}</span><span class=x></h1></span>
|
|
<a id=__codelineno-25-5 name=__codelineno-25-5 href=#__codelineno-25-5></a><span class=x> and I'm a <h2></span><span class=cp>{{</span> <span class=nv>d.job</span> <span class=cp>}}</span><span class=x></h2></span>
|
|
<a id=__codelineno-25-6 name=__codelineno-25-6 href=#__codelineno-25-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-25-7 name=__codelineno-25-7 href=#__codelineno-25-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>To access the slot data in Python, use the <code>data</code> attribute in <a href=#slot-functions>slot functions</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-26-1 name=__codelineno-26-1 href=#__codelineno-26-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>
|
|
<a id=__codelineno-26-2 name=__codelineno-26-2 href=#__codelineno-26-2></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"""</span>
|
|
<a id=__codelineno-26-3 name=__codelineno-26-3 href=#__codelineno-26-3></a><span class=s2> Hello, my name is <h1></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=s2>"first_name"</span><span class=p>]</span><span class=si>}</span><span class=s2></h1></span>
|
|
<a id=__codelineno-26-4 name=__codelineno-26-4 href=#__codelineno-26-4></a><span class=s2> and I'm a <h2></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=s2>"job"</span><span class=p>]</span><span class=si>}</span><span class=s2></h2></span>
|
|
<a id=__codelineno-26-5 name=__codelineno-26-5 href=#__codelineno-26-5></a><span class=s2> """</span>
|
|
<a id=__codelineno-26-6 name=__codelineno-26-6 href=#__codelineno-26-6></a>
|
|
<a id=__codelineno-26-7 name=__codelineno-26-7 href=#__codelineno-26-7></a><span class=n>Profile</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-26-8 name=__codelineno-26-8 href=#__codelineno-26-8></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-26-9 name=__codelineno-26-9 href=#__codelineno-26-9></a> <span class=s2>"name"</span><span class=p>:</span> <span class=n>my_slot</span><span class=p>,</span>
|
|
<a id=__codelineno-26-10 name=__codelineno-26-10 href=#__codelineno-26-10></a> <span class=p>},</span>
|
|
<a id=__codelineno-26-11 name=__codelineno-26-11 href=#__codelineno-26-11></a><span class=p>)</span>
|
|
</code></pre></div> <p>Slot data can be set also when rendering a slot in Python:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></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>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span><span class=p>)</span>
|
|
<a id=__codelineno-27-2 name=__codelineno-27-2 href=#__codelineno-27-2></a>
|
|
<a id=__codelineno-27-3 name=__codelineno-27-3 href=#__codelineno-27-3></a><span class=c1># Render the slot</span>
|
|
<a id=__codelineno-27-4 name=__codelineno-27-4 href=#__codelineno-27-4></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>({</span><span class=s2>"name"</span><span class=p>:</span> <span class=s2>"John"</span><span class=p>})</span>
|
|
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>To access slot data on a <a href=#default-slot>default slot</a>, you have to explictly define the <code>{% fill %}</code> tags with name <code>"default"</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-28-1 name=__codelineno-28-1 href=#__codelineno-28-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-28-2 name=__codelineno-28-2 href=#__codelineno-28-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"default"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_data"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-28-3 name=__codelineno-28-3 href=#__codelineno-28-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_data.input</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-28-4 name=__codelineno-28-4 href=#__codelineno-28-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-28-5 name=__codelineno-28-5 href=#__codelineno-28-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>You cannot set the <code>data</code> attribute and <a href=#slot-fallback><code>fallback</code> attribute</a> to the same name. This raises an error:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-29-1 name=__codelineno-29-1 href=#__codelineno-29-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-29-2 name=__codelineno-29-2 href=#__codelineno-29-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"content"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_var"</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>"slot_var"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-29-3 name=__codelineno-29-3 href=#__codelineno-29-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_var.input</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-29-4 name=__codelineno-29-4 href=#__codelineno-29-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-29-5 name=__codelineno-29-5 href=#__codelineno-29-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> </div> <h3 id=slot-fallback>Slot fallback<a class=headerlink href=#slot-fallback title="Permanent link">¤</a></h3> <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-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"name"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-30-2 name=__codelineno-30-2 href=#__codelineno-30-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> <!-- Fallback content --></span>
|
|
<a id=__codelineno-30-3 name=__codelineno-30-3 href=#__codelineno-30-3></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Sometimes you may want to keep the fallback content, but only wrap it in some other content.</p> <p>To do so, you can access the fallback content via the <a href=../../../reference/template_tags#fill><code>fallback</code></a> kwarg. This sets the name of the variable that holds the fallback content in the fill:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-31-1 name=__codelineno-31-1 href=#__codelineno-31-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"profile"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-31-2 name=__codelineno-31-2 href=#__codelineno-31-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"name"</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>"fb"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-31-3 name=__codelineno-31-3 href=#__codelineno-31-3></a><span class=x> Original content:</span>
|
|
<a id=__codelineno-31-4 name=__codelineno-31-4 href=#__codelineno-31-4></a><span class=x> <div></span>
|
|
<a id=__codelineno-31-5 name=__codelineno-31-5 href=#__codelineno-31-5></a><span class=x> </span><span class=cp>{{</span> <span class=nv>fb</span> <span class=cp>}}</span><span class=x> <!-- fb = 'Hello, my name...' --></span>
|
|
<a id=__codelineno-31-6 name=__codelineno-31-6 href=#__codelineno-31-6></a><span class=x> </div></span>
|
|
<a id=__codelineno-31-7 name=__codelineno-31-7 href=#__codelineno-31-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-31-8 name=__codelineno-31-8 href=#__codelineno-31-8></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>To access the fallback content in Python, use the <a href=../../../reference/api#django_components.SlotContext.fallback><code>fallback</code></a> attribute in <a href=#slot-functions>slot functions</a>.</p> <p>The fallback value is rendered lazily. Coerce the fallback to a string to render it.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-32-1 name=__codelineno-32-1 href=#__codelineno-32-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>
|
|
<a id=__codelineno-32-2 name=__codelineno-32-2 href=#__codelineno-32-2></a> <span class=c1># Coerce the fallback to a string</span>
|
|
<a id=__codelineno-32-3 name=__codelineno-32-3 href=#__codelineno-32-3></a> <span class=n>fallback</span> <span class=o>=</span> <span class=nb>str</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>fallback</span><span class=p>)</span>
|
|
<a id=__codelineno-32-4 name=__codelineno-32-4 href=#__codelineno-32-4></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"Original content: "</span> <span class=o>+</span> <span class=n>fallback</span>
|
|
<a id=__codelineno-32-5 name=__codelineno-32-5 href=#__codelineno-32-5></a>
|
|
<a id=__codelineno-32-6 name=__codelineno-32-6 href=#__codelineno-32-6></a><span class=n>Profile</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-32-7 name=__codelineno-32-7 href=#__codelineno-32-7></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-32-8 name=__codelineno-32-8 href=#__codelineno-32-8></a> <span class=s2>"name"</span><span class=p>:</span> <span class=n>my_slot</span><span class=p>,</span>
|
|
<a id=__codelineno-32-9 name=__codelineno-32-9 href=#__codelineno-32-9></a> <span class=p>},</span>
|
|
<a id=__codelineno-32-10 name=__codelineno-32-10 href=#__codelineno-32-10></a><span class=p>)</span>
|
|
</code></pre></div> <p>Fallback can be set also when rendering a slot in Python:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-33-1 name=__codelineno-33-1 href=#__codelineno-33-1></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>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span><span class=p>)</span>
|
|
<a id=__codelineno-33-2 name=__codelineno-33-2 href=#__codelineno-33-2></a>
|
|
<a id=__codelineno-33-3 name=__codelineno-33-3 href=#__codelineno-33-3></a><span class=c1># Render the slot</span>
|
|
<a id=__codelineno-33-4 name=__codelineno-33-4 href=#__codelineno-33-4></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>({</span><span class=s2>"name"</span><span class=p>:</span> <span class=s2>"John"</span><span class=p>},</span> <span class=n>fallback</span><span class=o>=</span><span class=s2>"Hello, world!"</span><span class=p>)</span>
|
|
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>To access slot fallback on a <a href=#default-slot>default slot</a>, you have to explictly define the <code>{% fill %}</code> tags with name <code>"default"</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-34-1 name=__codelineno-34-1 href=#__codelineno-34-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-34-2 name=__codelineno-34-2 href=#__codelineno-34-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"default"</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>"fallback"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-34-3 name=__codelineno-34-3 href=#__codelineno-34-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>fallback</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-34-4 name=__codelineno-34-4 href=#__codelineno-34-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-34-5 name=__codelineno-34-5 href=#__codelineno-34-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> </div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>You cannot set the <a href=#slot-data><code>data</code></a> attribute and <code>fallback</code> attribute to the same name. This raises an error:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-35-1 name=__codelineno-35-1 href=#__codelineno-35-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-35-2 name=__codelineno-35-2 href=#__codelineno-35-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"content"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_var"</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>"slot_var"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-35-3 name=__codelineno-35-3 href=#__codelineno-35-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_var.input</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-35-4 name=__codelineno-35-4 href=#__codelineno-35-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-35-5 name=__codelineno-35-5 href=#__codelineno-35-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> </div> <h3 id=slot-functions>Slot functions<a class=headerlink href=#slot-functions title="Permanent link">¤</a></h3> <p>In Python code, slot fills can be defined as strings, functions, or <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instances that wrap the two. Slot functions have access to slot <a href=../../../reference/api#django_components.SlotContext.data><code>data</code></a>, <a href=../../../reference/api#django_components.SlotContext.fallback><code>fallback</code></a>, and <a href=../../../reference/api#django_components.SlotContext.context><code>context</code></a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-36-1 name=__codelineno-36-1 href=#__codelineno-36-1></a><span class=k>def</span><span class=w> </span><span class=nf>row_slot</span><span class=p>(</span><span class=n>ctx</span><span class=p>):</span>
|
|
<a id=__codelineno-36-2 name=__codelineno-36-2 href=#__codelineno-36-2></a> <span class=k>if</span> <span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s2>"disabled"</span><span class=p>]:</span>
|
|
<a id=__codelineno-36-3 name=__codelineno-36-3 href=#__codelineno-36-3></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>fallback</span>
|
|
<a id=__codelineno-36-4 name=__codelineno-36-4 href=#__codelineno-36-4></a>
|
|
<a id=__codelineno-36-5 name=__codelineno-36-5 href=#__codelineno-36-5></a> <span class=n>item</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>"item"</span><span class=p>]</span>
|
|
<a id=__codelineno-36-6 name=__codelineno-36-6 href=#__codelineno-36-6></a> <span class=k>if</span> <span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>[</span><span class=s2>"type"</span><span class=p>]</span> <span class=o>==</span> <span class=s2>"table"</span><span class=p>:</span>
|
|
<a id=__codelineno-36-7 name=__codelineno-36-7 href=#__codelineno-36-7></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"<tr><td></span><span class=si>{</span><span class=n>item</span><span class=si>}</span><span class=s2></td></tr>"</span>
|
|
<a id=__codelineno-36-8 name=__codelineno-36-8 href=#__codelineno-36-8></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-36-9 name=__codelineno-36-9 href=#__codelineno-36-9></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"<li></span><span class=si>{</span><span class=n>item</span><span class=si>}</span><span class=s2></li>"</span>
|
|
<a id=__codelineno-36-10 name=__codelineno-36-10 href=#__codelineno-36-10></a>
|
|
<a id=__codelineno-36-11 name=__codelineno-36-11 href=#__codelineno-36-11></a><span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-36-12 name=__codelineno-36-12 href=#__codelineno-36-12></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-36-13 name=__codelineno-36-13 href=#__codelineno-36-13></a> <span class=s2>"prepend"</span><span class=p>:</span> <span class=s2>"Ice cream selection:"</span><span class=p>,</span>
|
|
<a id=__codelineno-36-14 name=__codelineno-36-14 href=#__codelineno-36-14></a> <span class=s2>"append"</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=s2>"© 2025"</span><span class=p>),</span>
|
|
<a id=__codelineno-36-15 name=__codelineno-36-15 href=#__codelineno-36-15></a> <span class=s2>"row"</span><span class=p>:</span> <span class=n>row_slot</span><span class=p>,</span>
|
|
<a id=__codelineno-36-16 name=__codelineno-36-16 href=#__codelineno-36-16></a> <span class=s2>"column_title"</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>"<th></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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2></th>"</span><span class=p>),</span>
|
|
<a id=__codelineno-36-17 name=__codelineno-36-17 href=#__codelineno-36-17></a> <span class=p>},</span>
|
|
<a id=__codelineno-36-18 name=__codelineno-36-18 href=#__codelineno-36-18></a><span class=p>)</span>
|
|
</code></pre></div> <p>Inside the component, these will all be normalized to <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instances:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-37-1 name=__codelineno-37-1 href=#__codelineno-37-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-37-2 name=__codelineno-37-2 href=#__codelineno-37-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-37-3 name=__codelineno-37-3 href=#__codelineno-37-3></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=s2>"prepend"</span><span class=p>],</span> <span class=n>Slot</span><span class=p>)</span>
|
|
<a id=__codelineno-37-4 name=__codelineno-37-4 href=#__codelineno-37-4></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=s2>"row"</span><span class=p>],</span> <span class=n>Slot</span><span class=p>)</span>
|
|
<a id=__codelineno-37-5 name=__codelineno-37-5 href=#__codelineno-37-5></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=s2>"header"</span><span class=p>],</span> <span class=n>Slot</span><span class=p>)</span>
|
|
<a id=__codelineno-37-6 name=__codelineno-37-6 href=#__codelineno-37-6></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=s2>"footer"</span><span class=p>],</span> <span class=n>Slot</span><span class=p>)</span>
|
|
</code></pre></div> <p>You can render <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instances by simply calling them with data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-38-1 name=__codelineno-38-1 href=#__codelineno-38-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-38-2 name=__codelineno-38-2 href=#__codelineno-38-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-38-3 name=__codelineno-38-3 href=#__codelineno-38-3></a> <span class=n>prepend_slot</span> <span class=o>=</span> <span class=n>slots</span><span class=p>[</span><span class=s2>"prepend"</span><span class=p>]</span>
|
|
<a id=__codelineno-38-4 name=__codelineno-38-4 href=#__codelineno-38-4></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-38-5 name=__codelineno-38-5 href=#__codelineno-38-5></a> <span class=s2>"prepend"</span><span class=p>:</span> <span class=n>prepend_slot</span><span class=p>({</span><span class=s2>"item"</span><span class=p>:</span> <span class=s2>"ice cream"</span><span class=p>}),</span>
|
|
<a id=__codelineno-38-6 name=__codelineno-38-6 href=#__codelineno-38-6></a> <span class=p>}</span>
|
|
</code></pre></div> <h3 id=filling-slots-with-functions>Filling slots with functions<a class=headerlink href=#filling-slots-with-functions title="Permanent link">¤</a></h3> <p>You can "fill" slots by passing a string or <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instance directly to the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-39-1 name=__codelineno-39-1 href=#__codelineno-39-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-39-2 name=__codelineno-39-2 href=#__codelineno-39-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-39-3 name=__codelineno-39-3 href=#__codelineno-39-3></a> <span class=k>def</span><span class=w> </span><span class=nf>my_fill</span><span class=p>(</span><span class=n>ctx</span><span class=p>):</span>
|
|
<a id=__codelineno-39-4 name=__codelineno-39-4 href=#__codelineno-39-4></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span>
|
|
<a id=__codelineno-39-5 name=__codelineno-39-5 href=#__codelineno-39-5></a>
|
|
<a id=__codelineno-39-6 name=__codelineno-39-6 href=#__codelineno-39-6></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-39-7 name=__codelineno-39-7 href=#__codelineno-39-7></a> <span class=s2>"my_fill"</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=n>my_fill</span><span class=p>),</span>
|
|
<a id=__codelineno-39-8 name=__codelineno-39-8 href=#__codelineno-39-8></a> <span class=p>}</span>
|
|
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-40-1 name=__codelineno-40-1 href=#__codelineno-40-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-40-2 name=__codelineno-40-2 href=#__codelineno-40-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"name"</span> <span class=nv>body</span><span class=o>=</span><span class=nv>my_fill</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-40-3 name=__codelineno-40-3 href=#__codelineno-40-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>Django automatically executes functions when it comes across them in templates.</p> <p>Because of this you MUST wrap the function in <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instance to prevent it from being called.</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> <h2 id=slot-class>Slot class<a class=headerlink href=#slot-class title="Permanent link">¤</a></h2> <p>The <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> class is a wrapper around a function that can be used to fill a slot.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-41-1 name=__codelineno-41-1 href=#__codelineno-41-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-41-2 name=__codelineno-41-2 href=#__codelineno-41-2></a>
|
|
<a id=__codelineno-41-3 name=__codelineno-41-3 href=#__codelineno-41-3></a><span class=k>def</span><span class=w> </span><span class=nf>footer</span><span class=p>(</span><span class=n>ctx</span><span class=p>):</span>
|
|
<a id=__codelineno-41-4 name=__codelineno-41-4 href=#__codelineno-41-4></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span>
|
|
<a id=__codelineno-41-5 name=__codelineno-41-5 href=#__codelineno-41-5></a>
|
|
<a id=__codelineno-41-6 name=__codelineno-41-6 href=#__codelineno-41-6></a><span class=n>Table</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-41-7 name=__codelineno-41-7 href=#__codelineno-41-7></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-41-8 name=__codelineno-41-8 href=#__codelineno-41-8></a> <span class=s2>"footer"</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=n>footer</span><span class=p>),</span>
|
|
<a id=__codelineno-41-9 name=__codelineno-41-9 href=#__codelineno-41-9></a> <span class=p>},</span>
|
|
<a id=__codelineno-41-10 name=__codelineno-41-10 href=#__codelineno-41-10></a><span class=p>)</span>
|
|
</code></pre></div> <p>Slot class can be instantiated with a function or a string:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-42-1 name=__codelineno-42-1 href=#__codelineno-42-1></a><span class=n>slot1</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>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span><span class=p>)</span>
|
|
<a id=__codelineno-42-2 name=__codelineno-42-2 href=#__codelineno-42-2></a><span class=n>slot2</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=s2>"Hello, world!"</span><span class=p>)</span>
|
|
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Passing a <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instance to the <code>Slot</code> constructor results in an error:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-43-1 name=__codelineno-43-1 href=#__codelineno-43-1></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=s2>"Hello"</span><span class=p>)</span>
|
|
<a id=__codelineno-43-2 name=__codelineno-43-2 href=#__codelineno-43-2></a>
|
|
<a id=__codelineno-43-3 name=__codelineno-43-3 href=#__codelineno-43-3></a><span class=c1># Raises an error</span>
|
|
<a id=__codelineno-43-4 name=__codelineno-43-4 href=#__codelineno-43-4></a><span class=n>slot2</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=n>slot</span><span class=p>)</span>
|
|
</code></pre></div> </div> <h3 id=rendering-slots>Rendering slots<a class=headerlink href=#rendering-slots title="Permanent link">¤</a></h3> <p><strong>Python</strong></p> <p>You can render a <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instance by simply calling it with data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-44-1 name=__codelineno-44-1 href=#__codelineno-44-1></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>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span><span class=p>)</span>
|
|
<a id=__codelineno-44-2 name=__codelineno-44-2 href=#__codelineno-44-2></a>
|
|
<a id=__codelineno-44-3 name=__codelineno-44-3 href=#__codelineno-44-3></a><span class=c1># Render the slot with data</span>
|
|
<a id=__codelineno-44-4 name=__codelineno-44-4 href=#__codelineno-44-4></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>({</span><span class=s2>"name"</span><span class=p>:</span> <span class=s2>"John"</span><span class=p>})</span>
|
|
</code></pre></div> <p>Optionally you can pass the <a href=#slot-fallback>fallback</a> value to the slot. Fallback should be a string.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-45-1 name=__codelineno-45-1 href=#__codelineno-45-1></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>({</span><span class=s2>"name"</span><span class=p>:</span> <span class=s2>"John"</span><span class=p>},</span> <span class=n>fallback</span><span class=o>=</span><span class=s2>"Hello, world!"</span><span class=p>)</span>
|
|
</code></pre></div> <p><strong>Template</strong></p> <p>Alternatively, you can pass the <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instance to the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-46-1 name=__codelineno-46-1 href=#__codelineno-46-1></a><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"name"</span> <span class=nv>body</span><span class=o>=</span><span class=nv>slot</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <h3 id=slot-context>Slot context<a class=headerlink href=#slot-context title="Permanent link">¤</a></h3> <p>If a slot function is rendered by the <a href=../../../reference/template_tags#slot><code>{% slot %}</code></a> tag, you can access the current <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context>Context</a> using the <code>context</code> attribute.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-47-1 name=__codelineno-47-1 href=#__codelineno-47-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-47-2 name=__codelineno-47-2 href=#__codelineno-47-2></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
|
<a id=__codelineno-47-3 name=__codelineno-47-3 href=#__codelineno-47-3></a><span class=s2> {% with "abc" as my_var %}</span>
|
|
<a id=__codelineno-47-4 name=__codelineno-47-4 href=#__codelineno-47-4></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot "name" %}</span>
|
|
<a id=__codelineno-47-5 name=__codelineno-47-5 href=#__codelineno-47-5></a><span class=s2> Hello!</span>
|
|
<a id=__codelineno-47-6 name=__codelineno-47-6 href=#__codelineno-47-6></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndslot %}</span>
|
|
<a id=__codelineno-47-7 name=__codelineno-47-7 href=#__codelineno-47-7></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndwith %}</span>
|
|
<a id=__codelineno-47-8 name=__codelineno-47-8 href=#__codelineno-47-8></a><span class=s2> """</span>
|
|
<a id=__codelineno-47-9 name=__codelineno-47-9 href=#__codelineno-47-9></a>
|
|
<a id=__codelineno-47-10 name=__codelineno-47-10 href=#__codelineno-47-10></a><span class=k>def</span><span class=w> </span><span class=nf>slot_func</span><span class=p>(</span><span class=n>ctx</span><span class=p>):</span>
|
|
<a id=__codelineno-47-11 name=__codelineno-47-11 href=#__codelineno-47-11></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"Hello, </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>context</span><span class=p>[</span><span class=s1>'my_var'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span>
|
|
<a id=__codelineno-47-12 name=__codelineno-47-12 href=#__codelineno-47-12></a>
|
|
<a id=__codelineno-47-13 name=__codelineno-47-13 href=#__codelineno-47-13></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=n>slot_func</span><span class=p>)</span>
|
|
<a id=__codelineno-47-14 name=__codelineno-47-14 href=#__codelineno-47-14></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>()</span>
|
|
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>While available, try to avoid using the <code>context</code> attribute in slot functions.</p> <p>Instead, prefer using the <code>data</code> and <code>fallback</code> attributes.</p> <p><!-- TODO_v2: Check if still applicable --> Access to <code>context</code> may be removed in future versions (v2, v3).</p> </div> <h3 id=slot-metadata>Slot metadata<a class=headerlink href=#slot-metadata title="Permanent link">¤</a></h3> <p>When accessing slots from within <a href=../../../reference/api#django_components.Component><code>Component</code></a> methods, the <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> instances are populated with extra metadata:</p> <ul> <li><a href=../../../reference/api#django_components.Slot.component_name><code>component_name</code></a></li> <li><a href=../../../reference/api#django_components.Slot.slot_name><code>slot_name</code></a></li> <li><a href=../../../reference/api#django_components.Slot.nodelist><code>nodelist</code></a></li> <li><a href=../../../reference/api#django_components.Slot.fill_node><code>fill_node</code></a></li> <li><a href=../../../reference/api#django_components.Slot.extra><code>extra</code></a></li> </ul> <p>These are populated the first time a slot is passed to a component.</p> <p>So if you pass the same slot through multiple nested components, the metadata will still point to the first component that received the slot.</p> <p>You can use these for debugging, such as printing out the slot's component name and slot name.</p> <p><strong>Fill node</strong></p> <p>Components or extensions can use <a href=../../../reference/api#django_components.Slot.fill_node><code>Slot.fill_node</code></a> to handle slots differently based on whether the slot was defined in the template with <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> and <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tags, or in the component's Python code.</p> <p>If the slot was created from a <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, this will be the <a href=../../../reference/api#django_components.FillNode><code>FillNode</code></a> instance.</p> <p>If the slot was a default slot created from a <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag, this will be the <a href=../../../reference/api#django_components.ComponentNode><code>ComponentNode</code></a> instance.</p> <p>You can use this to find the <a href=../../../reference/api#django_components.Component><code>Component</code></a> in whose template the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag was defined:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-48-1 name=__codelineno-48-1 href=#__codelineno-48-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-48-2 name=__codelineno-48-2 href=#__codelineno-48-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-48-3 name=__codelineno-48-3 href=#__codelineno-48-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>"footer"</span><span class=p>)</span>
|
|
<a id=__codelineno-48-4 name=__codelineno-48-4 href=#__codelineno-48-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-48-5 name=__codelineno-48-5 href=#__codelineno-48-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-48-6 name=__codelineno-48-6 href=#__codelineno-48-6></a> <span class=c1># ...</span>
|
|
</code></pre></div> <p><strong>Extra</strong></p> <p>You can also pass any additional data along with the slot by setting it in <a href=../../../reference/api#django_components.Slot.extra><code>Slot.extra</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-49-1 name=__codelineno-49-1 href=#__codelineno-49-1></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span>
|
|
<a id=__codelineno-49-2 name=__codelineno-49-2 href=#__codelineno-49-2></a> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=sa>f</span><span class=s2>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span><span class=p>,</span>
|
|
<a id=__codelineno-49-3 name=__codelineno-49-3 href=#__codelineno-49-3></a> <span class=n>extra</span><span class=o>=</span><span class=p>{</span><span class=s2>"foo"</span><span class=p>:</span> <span class=s2>"bar"</span><span class=p>},</span>
|
|
<a id=__codelineno-49-4 name=__codelineno-49-4 href=#__codelineno-49-4></a><span class=p>)</span>
|
|
</code></pre></div> <p>When you create a slot, you can set any of these fields too:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-50-1 name=__codelineno-50-1 href=#__codelineno-50-1></a><span class=c1># Either at slot creation</span>
|
|
<a id=__codelineno-50-2 name=__codelineno-50-2 href=#__codelineno-50-2></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span>
|
|
<a id=__codelineno-50-3 name=__codelineno-50-3 href=#__codelineno-50-3></a> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=sa>f</span><span class=s2>"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>'name'</span><span class=p>]</span><span class=si>}</span><span class=s2>!"</span><span class=p>,</span>
|
|
<a id=__codelineno-50-4 name=__codelineno-50-4 href=#__codelineno-50-4></a> <span class=c1># Optional</span>
|
|
<a id=__codelineno-50-5 name=__codelineno-50-5 href=#__codelineno-50-5></a> <span class=n>component_name</span><span class=o>=</span><span class=s2>"table"</span><span class=p>,</span>
|
|
<a id=__codelineno-50-6 name=__codelineno-50-6 href=#__codelineno-50-6></a> <span class=n>slot_name</span><span class=o>=</span><span class=s2>"name"</span><span class=p>,</span>
|
|
<a id=__codelineno-50-7 name=__codelineno-50-7 href=#__codelineno-50-7></a> <span class=n>extra</span><span class=o>=</span><span class=p>{},</span>
|
|
<a id=__codelineno-50-8 name=__codelineno-50-8 href=#__codelineno-50-8></a><span class=p>)</span>
|
|
<a id=__codelineno-50-9 name=__codelineno-50-9 href=#__codelineno-50-9></a>
|
|
<a id=__codelineno-50-10 name=__codelineno-50-10 href=#__codelineno-50-10></a><span class=c1># Or later</span>
|
|
<a id=__codelineno-50-11 name=__codelineno-50-11 href=#__codelineno-50-11></a><span class=n>slot</span><span class=o>.</span><span class=n>component_name</span> <span class=o>=</span> <span class=s2>"table"</span>
|
|
<a id=__codelineno-50-12 name=__codelineno-50-12 href=#__codelineno-50-12></a><span class=n>slot</span><span class=o>.</span><span class=n>slot_name</span> <span class=o>=</span> <span class=s2>"name"</span>
|
|
<a id=__codelineno-50-13 name=__codelineno-50-13 href=#__codelineno-50-13></a><span class=n>slot</span><span class=o>.</span><span class=n>extra</span><span class=p>[</span><span class=s2>"foo"</span><span class=p>]</span> <span class=o>=</span> <span class=s2>"bar"</span>
|
|
</code></pre></div> <p>Read more in <a href=../../advanced/extensions#pass-slot-metadata>Pass slot metadata</a>.</p> <h3 id=slot-contents>Slot contents<a class=headerlink href=#slot-contents title="Permanent link">¤</a></h3> <p>Whether you create a slot from a function, a string, or from the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tags, the <a href=../../../reference/api#django_components.Slot><code>Slot</code></a> class normalizes its contents to a function.</p> <p>Use <a href=../../../reference/api#django_components.Slot.contents><code>Slot.contents</code></a> to access the original value that was passed to the Slot constructor.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-51-1 name=__codelineno-51-1 href=#__codelineno-51-1></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=s2>"Hello!"</span><span class=p>)</span>
|
|
<a id=__codelineno-51-2 name=__codelineno-51-2 href=#__codelineno-51-2></a><span class=nb>print</span><span class=p>(</span><span class=n>slot</span><span class=o>.</span><span class=n>contents</span><span class=p>)</span> <span class=c1># "Hello!"</span>
|
|
</code></pre></div> <p>If the slot was created from a string or from the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tags, the contents will be accessible also as a Nodelist under <a href=../../../reference/api#django_components.Slot.nodelist><code>Slot.nodelist</code></a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-52-1 name=__codelineno-52-1 href=#__codelineno-52-1></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=s2>"Hello!"</span><span class=p>)</span>
|
|
<a id=__codelineno-52-2 name=__codelineno-52-2 href=#__codelineno-52-2></a><span class=nb>print</span><span class=p>(</span><span class=n>slot</span><span class=o>.</span><span class=n>nodelist</span><span class=p>)</span> <span class=c1># <django.template.Nodelist: ['Hello!']></span>
|
|
</code></pre></div> <h3 id=escaping-slots-content>Escaping slots content<a class=headerlink href=#escaping-slots-content title="Permanent link">¤</a></h3> <p>Slots content are automatically escaped by default to prevent XSS attacks.</p> <p>In other words, it's as if you would be using Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#std-templatefilter-escape><code>escape()</code></a> on the slot contents / result:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-53-1 name=__codelineno-53-1 href=#__codelineno-53-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.utils.html</span><span class=w> </span><span class=kn>import</span> <span class=n>escape</span>
|
|
<a id=__codelineno-53-2 name=__codelineno-53-2 href=#__codelineno-53-2></a>
|
|
<a id=__codelineno-53-3 name=__codelineno-53-3 href=#__codelineno-53-3></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-53-4 name=__codelineno-53-4 href=#__codelineno-53-4></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
|
<a id=__codelineno-53-5 name=__codelineno-53-5 href=#__codelineno-53-5></a><span class=s2> <div></span>
|
|
<a id=__codelineno-53-6 name=__codelineno-53-6 href=#__codelineno-53-6></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot "date" default date=date / %}</span>
|
|
<a id=__codelineno-53-7 name=__codelineno-53-7 href=#__codelineno-53-7></a><span class=s2> </div></span>
|
|
<a id=__codelineno-53-8 name=__codelineno-53-8 href=#__codelineno-53-8></a><span class=s2> """</span>
|
|
<a id=__codelineno-53-9 name=__codelineno-53-9 href=#__codelineno-53-9></a>
|
|
<a id=__codelineno-53-10 name=__codelineno-53-10 href=#__codelineno-53-10></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-53-11 name=__codelineno-53-11 href=#__codelineno-53-11></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-53-12 name=__codelineno-53-12 href=#__codelineno-53-12></a> <span class=s2>"date"</span><span class=p>:</span> <span class=n>escape</span><span class=p>(</span><span class=s2>"<b>Hello</b>"</span><span class=p>),</span>
|
|
<a id=__codelineno-53-13 name=__codelineno-53-13 href=#__codelineno-53-13></a> <span class=p>}</span>
|
|
<a id=__codelineno-53-14 name=__codelineno-53-14 href=#__codelineno-53-14></a><span class=p>)</span>
|
|
</code></pre></div> <p>To disable escaping, you can wrap the slot string or slot result in Django's <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.mark_safe><code>mark_safe()</code></a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-54-1 name=__codelineno-54-1 href=#__codelineno-54-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-54-2 name=__codelineno-54-2 href=#__codelineno-54-2></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-54-3 name=__codelineno-54-3 href=#__codelineno-54-3></a> <span class=c1># string</span>
|
|
<a id=__codelineno-54-4 name=__codelineno-54-4 href=#__codelineno-54-4></a> <span class=s2>"date"</span><span class=p>:</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>"<b>Hello</b>"</span><span class=p>),</span>
|
|
<a id=__codelineno-54-5 name=__codelineno-54-5 href=#__codelineno-54-5></a>
|
|
<a id=__codelineno-54-6 name=__codelineno-54-6 href=#__codelineno-54-6></a> <span class=c1># function</span>
|
|
<a id=__codelineno-54-7 name=__codelineno-54-7 href=#__codelineno-54-7></a> <span class=s2>"date"</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>"<b>Hello</b>"</span><span class=p>),</span>
|
|
<a id=__codelineno-54-8 name=__codelineno-54-8 href=#__codelineno-54-8></a> <span class=p>}</span>
|
|
<a id=__codelineno-54-9 name=__codelineno-54-9 href=#__codelineno-54-9></a><span class=p>)</span>
|
|
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>Read more about Django's <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.html.format_html><code>format_html</code></a> and <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.mark_safe><code>mark_safe</code></a>.</p> </div> <h2 id=examples>Examples<a class=headerlink href=#examples title="Permanent link">¤</a></h2> <h3 id=pass-through-all-the-slots>Pass through all the slots<a class=headerlink href=#pass-through-all-the-slots title="Permanent link">¤</a></h3> <p>You can dynamically pass all slots to a child component. This is similar to <a href=https://vue-land.github.io/faq/forwarding-slots#passing-all-slots>passing all slots in Vue</a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-55-1 name=__codelineno-55-1 href=#__codelineno-55-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-55-2 name=__codelineno-55-2 href=#__codelineno-55-2></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>"""</span>
|
|
<a id=__codelineno-55-3 name=__codelineno-55-3 href=#__codelineno-55-3></a> <span class=p><</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-55-4 name=__codelineno-55-4 href=#__codelineno-55-4></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>"child"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-55-5 name=__codelineno-55-5 href=#__codelineno-55-5></a> <span class=cp>{%</span> <span class=k>for</span> <span class=nv>slot_name</span><span class=o>,</span> <span class=nv>slot</span> <span class=k>in</span> <span class=nv>component_vars.slots.items</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-55-6 name=__codelineno-55-6 href=#__codelineno-55-6></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=nv>name</span><span class=o>=</span><span class=nv>slot_name</span> <span class=nv>body</span><span class=o>=</span><span class=nv>slot</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-55-7 name=__codelineno-55-7 href=#__codelineno-55-7></a> <span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-55-8 name=__codelineno-55-8 href=#__codelineno-55-8></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-55-9 name=__codelineno-55-9 href=#__codelineno-55-9></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-55-10 name=__codelineno-55-10 href=#__codelineno-55-10></a> <span class=sd>"""</span>
|
|
</code></pre></div> <h3 id=required-and-default-slots>Required and default slots<a class=headerlink href=#required-and-default-slots title="Permanent link">¤</a></h3> <p>Since each <a href=../../../reference/template_tags#slot><code>{% slot %}</code></a> is tagged with <a href=#required-slot><code>required</code></a> and <a href=#default-slot><code>default</code></a> individually, you can have multiple slots with the same name but different conditions.</p> <p>In this example, we have a component that renders a user avatar - a small circular image with a profile picture or name initials.</p> <p>If the component is given <code>image_src</code> or <code>name_initials</code> variables, the <code>image</code> slot is optional.</p> <p>But if neither of those are provided, you MUST fill the <code>image</code> slot.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-56-1 name=__codelineno-56-1 href=#__codelineno-56-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"avatar"</span><span class=p>></span>
|
|
<a id=__codelineno-56-2 name=__codelineno-56-2 href=#__codelineno-56-2></a> <span class=c>{# Image given, so slot is optional #}</span>
|
|
<a id=__codelineno-56-3 name=__codelineno-56-3 href=#__codelineno-56-3></a> <span class=cp>{%</span> <span class=k>if</span> <span class=nv>image_src</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-4 name=__codelineno-56-4 href=#__codelineno-56-4></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-5 name=__codelineno-56-5 href=#__codelineno-56-5></a> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span> <span class=nv>image_src</span> <span class=cp>}}</span><span class=s>"</span> <span class=p>/></span>
|
|
<a id=__codelineno-56-6 name=__codelineno-56-6 href=#__codelineno-56-6></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-7 name=__codelineno-56-7 href=#__codelineno-56-7></a>
|
|
<a id=__codelineno-56-8 name=__codelineno-56-8 href=#__codelineno-56-8></a> <span class=c>{# Image not given, but we can make image from initials, so slot is optional #}</span>
|
|
<a id=__codelineno-56-9 name=__codelineno-56-9 href=#__codelineno-56-9></a> <span class=cp>{%</span> <span class=k>elif</span> <span class=nv>name_initials</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-10 name=__codelineno-56-10 href=#__codelineno-56-10></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-11 name=__codelineno-56-11 href=#__codelineno-56-11></a> <span class=p><</span><span class=nt>div</span> <span class=na>style</span><span class=o>=</span><span class=s>"</span>
|
|
<a id=__codelineno-56-12 name=__codelineno-56-12 href=#__codelineno-56-12></a><span class=s> border-radius: 25px;</span>
|
|
<a id=__codelineno-56-13 name=__codelineno-56-13 href=#__codelineno-56-13></a><span class=s> width: 50px;</span>
|
|
<a id=__codelineno-56-14 name=__codelineno-56-14 href=#__codelineno-56-14></a><span class=s> height: 50px;</span>
|
|
<a id=__codelineno-56-15 name=__codelineno-56-15 href=#__codelineno-56-15></a><span class=s> background: blue;</span>
|
|
<a id=__codelineno-56-16 name=__codelineno-56-16 href=#__codelineno-56-16></a><span class=s> "</span><span class=p>></span>
|
|
<a id=__codelineno-56-17 name=__codelineno-56-17 href=#__codelineno-56-17></a> <span class=cp>{{</span> <span class=nv>name_initials</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-56-18 name=__codelineno-56-18 href=#__codelineno-56-18></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-56-19 name=__codelineno-56-19 href=#__codelineno-56-19></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-20 name=__codelineno-56-20 href=#__codelineno-56-20></a>
|
|
<a id=__codelineno-56-21 name=__codelineno-56-21 href=#__codelineno-56-21></a> <span class=c>{# Neither image nor initials given, so slot is required #}</span>
|
|
<a id=__codelineno-56-22 name=__codelineno-56-22 href=#__codelineno-56-22></a> <span class=cp>{%</span> <span class=k>else</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-23 name=__codelineno-56-23 href=#__codelineno-56-23></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-24 name=__codelineno-56-24 href=#__codelineno-56-24></a> <span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-25 name=__codelineno-56-25 href=#__codelineno-56-25></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
</code></pre></div> <h3 id=dynamic-slots-in-table-component>Dynamic slots in table component<a class=headerlink href=#dynamic-slots-in-table-component title="Permanent link">¤</a></h3> <p>Sometimes you may want to generate slots based on the given input. One example of this is <a href=https://vuetifyjs.com/en/api/v-data-table/ >Vuetify's table component</a>, which creates a header and an item slots for each user-defined column.</p> <p>So if you pass columns named <code>name</code> and <code>age</code> to the table component:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-57-1 name=__codelineno-57-1 href=#__codelineno-57-1></a><span class=p>[</span>
|
|
<a id=__codelineno-57-2 name=__codelineno-57-2 href=#__codelineno-57-2></a> <span class=p>{</span><span class=s2>"key"</span><span class=p>:</span> <span class=s2>"name"</span><span class=p>,</span> <span class=s2>"title"</span><span class=p>:</span> <span class=s2>"Name"</span><span class=p>},</span>
|
|
<a id=__codelineno-57-3 name=__codelineno-57-3 href=#__codelineno-57-3></a> <span class=p>{</span><span class=s2>"key"</span><span class=p>:</span> <span class=s2>"age"</span><span class=p>,</span> <span class=s2>"title"</span><span class=p>:</span> <span class=s2>"Age"</span><span class=p>},</span>
|
|
<a id=__codelineno-57-4 name=__codelineno-57-4 href=#__codelineno-57-4></a><span class=p>]</span>
|
|
</code></pre></div> <p>Then the component will accept fills named <code>header-name</code> and <code>header-age</code> (among others):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-58-1 name=__codelineno-58-1 href=#__codelineno-58-1></a><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header-name"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"data"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-58-2 name=__codelineno-58-2 href=#__codelineno-58-2></a><span class=x> <b></span><span class=cp>{{</span> <span class=nv>data.value</span> <span class=cp>}}</span><span class=x></b></span>
|
|
<a id=__codelineno-58-3 name=__codelineno-58-3 href=#__codelineno-58-3></a><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-58-4 name=__codelineno-58-4 href=#__codelineno-58-4></a>
|
|
<a id=__codelineno-58-5 name=__codelineno-58-5 href=#__codelineno-58-5></a><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header-age"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"data"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-58-6 name=__codelineno-58-6 href=#__codelineno-58-6></a><span class=x> <b></span><span class=cp>{{</span> <span class=nv>data.value</span> <span class=cp>}}</span><span class=x></b></span>
|
|
<a id=__codelineno-58-7 name=__codelineno-58-7 href=#__codelineno-58-7></a><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>In django-components you can achieve the same, simply by using a variable or a <a href=../template_tag_syntax#template-tags-inside-literal-strings>template expression</a> instead of a string literal:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-59-1 name=__codelineno-59-1 href=#__codelineno-59-1></a><span class=x><table></span>
|
|
<a id=__codelineno-59-2 name=__codelineno-59-2 href=#__codelineno-59-2></a><span class=x> <tr></span>
|
|
<a id=__codelineno-59-3 name=__codelineno-59-3 href=#__codelineno-59-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>for</span> <span class=nv>header</span> <span class=k>in</span> <span class=nv>headers</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-59-4 name=__codelineno-59-4 href=#__codelineno-59-4></a><span class=x> <th></span>
|
|
<a id=__codelineno-59-5 name=__codelineno-59-5 href=#__codelineno-59-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"header-{{ header.key }}"</span> <span class=nv>value</span><span class=o>=</span><span class=nv>header.title</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-59-6 name=__codelineno-59-6 href=#__codelineno-59-6></a><span class=x> </span><span class=cp>{{</span> <span class=nv>header.title</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-59-7 name=__codelineno-59-7 href=#__codelineno-59-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-59-8 name=__codelineno-59-8 href=#__codelineno-59-8></a><span class=x> </th></span>
|
|
<a id=__codelineno-59-9 name=__codelineno-59-9 href=#__codelineno-59-9></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-59-10 name=__codelineno-59-10 href=#__codelineno-59-10></a><span class=x> </tr></span>
|
|
<a id=__codelineno-59-11 name=__codelineno-59-11 href=#__codelineno-59-11></a><span class=x></table></span>
|
|
</code></pre></div> <p>When using the component, you can either set the fill explicitly:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-60-1 name=__codelineno-60-1 href=#__codelineno-60-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=nv>items</span><span class=o>=</span><span class=nv>items</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-60-2 name=__codelineno-60-2 href=#__codelineno-60-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header-name"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"data"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-60-3 name=__codelineno-60-3 href=#__codelineno-60-3></a><span class=x> <b></span><span class=cp>{{</span> <span class=nv>data.value</span> <span class=cp>}}</span><span class=x></b></span>
|
|
<a id=__codelineno-60-4 name=__codelineno-60-4 href=#__codelineno-60-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-60-5 name=__codelineno-60-5 href=#__codelineno-60-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Or also use a variable:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-61-1 name=__codelineno-61-1 href=#__codelineno-61-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=nv>items</span><span class=o>=</span><span class=nv>items</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-61-2 name=__codelineno-61-2 href=#__codelineno-61-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header-{{ active_header_name }}"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"data"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-61-3 name=__codelineno-61-3 href=#__codelineno-61-3></a><span class=x> <b></span><span class=cp>{{</span> <span class=nv>data.value</span> <span class=cp>}}</span><span class=x></b></span>
|
|
<a id=__codelineno-61-4 name=__codelineno-61-4 href=#__codelineno-61-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-61-5 name=__codelineno-61-5 href=#__codelineno-61-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>It's better to use literal slot names whenever possible for clarity. The dynamic slot names should be reserved for advanced use only.</p> </div> <h3 id=spread-operator>Spread operator<a class=headerlink href=#spread-operator title="Permanent link">¤</a></h3> <p>Lastly, you can also pass the slot name through the <a href=../template_tag_syntax#spread-operator>spread operator</a>.</p> <p>When you define a slot name, it's actually a shortcut for a <code>name</code> keyword argument.</p> <p>So this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-62-1 name=__codelineno-62-1 href=#__codelineno-62-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"content"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>is the same as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-63-1 name=__codelineno-63-1 href=#__codelineno-63-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"content"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>So it's possible to define a <code>name</code> key on a dictionary, and then spread that onto the slot tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-64-1 name=__codelineno-64-1 href=#__codelineno-64-1></a><span class=c>{# slot_props = {"name": "content"} #}</span>
|
|
<a id=__codelineno-64-2 name=__codelineno-64-2 href=#__codelineno-64-2></a><span class=cp>{%</span> <span class=k>slot</span> <span class=p>..</span><span class=nv>.slot_props</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Full example:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-65-1 name=__codelineno-65-1 href=#__codelineno-65-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-65-2 name=__codelineno-65-2 href=#__codelineno-65-2></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>"""</span>
|
|
<a id=__codelineno-65-3 name=__codelineno-65-3 href=#__codelineno-65-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=p>..</span><span class=nv>.slot_props</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-65-4 name=__codelineno-65-4 href=#__codelineno-65-4></a> <span class=sd>"""</span>
|
|
<a id=__codelineno-65-5 name=__codelineno-65-5 href=#__codelineno-65-5></a>
|
|
<a id=__codelineno-65-6 name=__codelineno-65-6 href=#__codelineno-65-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-65-7 name=__codelineno-65-7 href=#__codelineno-65-7></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-65-8 name=__codelineno-65-8 href=#__codelineno-65-8></a> <span class=s2>"slot_props"</span><span class=p>:</span> <span class=p>{</span><span class=s2>"name"</span><span class=p>:</span> <span class=s2>"content"</span><span class=p>,</span> <span class=s2>"extra_field"</span><span class=p>:</span> <span class=mi>123</span><span class=p>},</span>
|
|
<a id=__codelineno-65-9 name=__codelineno-65-9 href=#__codelineno-65-9></a> <span class=p>}</span>
|
|
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>This applies for both <a href=../../../reference/template_tags#slot><code>{% slot %}</code></a> and <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tags.</p> </div> <!-- TODO_V1: Remove this section --> <h2 id=legacy-conditional-slots>Legacy conditional slots<a class=headerlink href=#legacy-conditional-slots title="Permanent link">¤</a></h2> <blockquote> <p>Since version 0.70, you could check if a slot was filled with</p> <p><code>{{ component_vars.is_filled.<name> }}</code></p> <p>Since version 0.140, this has been deprecated and superseded with</p> <p><a href=../../../reference/template_vars#slots><code>{% component_vars.slots.<name> %}</code></a></p> <p>The <code>component_vars.is_filled</code> variable is still available, but will be removed in v1.0.</p> <p>NOTE: <code>component_vars.slots</code> no longer escapes special characters in slot names.</p> </blockquote> <p>You can use <code>{{ component_vars.is_filled.<name> }}</code> together with Django's <code>{% if / elif / else / endif %}</code> tags to define a block whose contents will be rendered only if the component slot with the corresponding 'name' is filled.</p> <p>This is what our example looks like with <code>component_vars.is_filled</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-66-1 name=__codelineno-66-1 href=#__codelineno-66-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"frontmatter-component"</span><span class=p>></span>
|
|
<a id=__codelineno-66-2 name=__codelineno-66-2 href=#__codelineno-66-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"title"</span><span class=p>></span>
|
|
<a id=__codelineno-66-3 name=__codelineno-66-3 href=#__codelineno-66-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"title"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-4 name=__codelineno-66-4 href=#__codelineno-66-4></a> Title
|
|
<a id=__codelineno-66-5 name=__codelineno-66-5 href=#__codelineno-66-5></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-6 name=__codelineno-66-6 href=#__codelineno-66-6></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-66-7 name=__codelineno-66-7 href=#__codelineno-66-7></a> <span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.is_filled.subtitle</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-8 name=__codelineno-66-8 href=#__codelineno-66-8></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"subtitle"</span><span class=p>></span>
|
|
<a id=__codelineno-66-9 name=__codelineno-66-9 href=#__codelineno-66-9></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"subtitle"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-10 name=__codelineno-66-10 href=#__codelineno-66-10></a> <span class=c>{# Optional subtitle #}</span>
|
|
<a id=__codelineno-66-11 name=__codelineno-66-11 href=#__codelineno-66-11></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-12 name=__codelineno-66-12 href=#__codelineno-66-12></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-66-13 name=__codelineno-66-13 href=#__codelineno-66-13></a> <span class=cp>{%</span> <span class=k>elif</span> <span class=nv>component_vars.is_filled.title</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-14 name=__codelineno-66-14 href=#__codelineno-66-14></a> ...
|
|
<a id=__codelineno-66-15 name=__codelineno-66-15 href=#__codelineno-66-15></a> <span class=cp>{%</span> <span class=k>elif</span> <span class=nv>component_vars.is_filled</span><span class=p>.</span><span class=o><</span><span class=nv>name</span><span class=o>></span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-16 name=__codelineno-66-16 href=#__codelineno-66-16></a> ...
|
|
<a id=__codelineno-66-17 name=__codelineno-66-17 href=#__codelineno-66-17></a> <span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-66-18 name=__codelineno-66-18 href=#__codelineno-66-18></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
</code></pre></div> <h3 id=accessing-is_filled-of-slot-names-with-special-characters>Accessing <code>is_filled</code> of slot names with special characters<a class=headerlink href=#accessing-is_filled-of-slot-names-with-special-characters title="Permanent link">¤</a></h3> <p>To be able to access a slot name via <code>component_vars.is_filled</code>, the slot name needs to be composed of only alphanumeric characters and underscores (e.g. <code>this__isvalid_123</code>).</p> <p>However, you can still define slots with other special characters. In such case, the slot name in <code>component_vars.is_filled</code> is modified to replace all invalid characters into <code>_</code>.</p> <p>So a slot named <code>"my super-slot :)"</code> will be available as <code>component_vars.is_filled.my_super_slot___</code>.</p> <p>Same applies when you are accessing <code>is_filled</code> from within the Python, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-67-1 name=__codelineno-67-1 href=#__codelineno-67-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-67-2 name=__codelineno-67-2 href=#__codelineno-67-2></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>template</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-67-3 name=__codelineno-67-3 href=#__codelineno-67-3></a> <span class=c1># ✅ Works</span>
|
|
<a id=__codelineno-67-4 name=__codelineno-67-4 href=#__codelineno-67-4></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>is_filled</span><span class=p>[</span><span class=s2>"my_super_slot___"</span><span class=p>]:</span>
|
|
<a id=__codelineno-67-5 name=__codelineno-67-5 href=#__codelineno-67-5></a> <span class=c1># Do something</span>
|
|
<a id=__codelineno-67-6 name=__codelineno-67-6 href=#__codelineno-67-6></a>
|
|
<a id=__codelineno-67-7 name=__codelineno-67-7 href=#__codelineno-67-7></a> <span class=c1># ❌ Does not work</span>
|
|
<a id=__codelineno-67-8 name=__codelineno-67-8 href=#__codelineno-67-8></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>is_filled</span><span class=p>[</span><span class=s2>"my super-slot :)"</span><span class=p>]:</span>
|
|
<a id=__codelineno-67-9 name=__codelineno-67-9 href=#__codelineno-67-9></a> <span class=c1># Do something</span>
|
|
</code></pre></div> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago" title="June 4, 2025 17:30:03 UTC"><span class=timeago datetime=2025-06-04T17:30:03+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="June 4, 2025 17:30:03 UTC">2025-06-04</span> </span> <span class=md-source-file__fact> <span class=md-icon title=Contributors> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg> </span> <nav> <a href=mailto:juraj.oravec.josefson@gmail.com>Juro Oravec</a> </nav> </span> </aside> </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=../rendering_components/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Rendering components"> <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> Rendering components </div> </div> </a> <a href=../template_tag_syntax/ class="md-footer__link md-footer__link--next" aria-label="Next: Template tag syntax"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Template tag syntax </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> |