mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-09-19 12:19:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
django-components/dev/concepts/fundamentals/secondary_js_css_files/index.html

327 lines
No EOL
176 KiB
HTML
Raw Blame History

<!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/secondary_js_css_files/ rel=canonical><link href=../html_js_css_variables/ rel=prev><link href=../component_defaults/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.19"><title>Secondary JS / CSS files - 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="Secondary JS / CSS files - 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/secondary_js_css_files.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/secondary_js_css_files/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Secondary JS / CSS files - 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/secondary_js_css_files.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=#overview 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> Secondary JS / CSS files </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 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> Secondary JS / CSS files <!-- 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> Secondary JS / CSS files <!-- 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=#overview class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=#media-class class=md-nav__link> <span class=md-ellipsis> Media class </span> </a> <nav class=md-nav aria-label="Media class"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#css-media-types class=md-nav__link> <span class=md-ellipsis> CSS media types </span> </a> </li> <li class=md-nav__item> <a href=#media-inheritance class=md-nav__link> <span class=md-ellipsis> Media inheritance </span> </a> </li> <li class=md-nav__item> <a href=#accessing-media-files class=md-nav__link> <span class=md-ellipsis> Accessing Media files </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#file-paths class=md-nav__link> <span class=md-ellipsis> File paths </span> </a> <nav class=md-nav aria-label="File paths"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#relative-to-component class=md-nav__link> <span class=md-ellipsis> Relative to component </span> </a> </li> <li class=md-nav__item> <a href=#globs class=md-nav__link> <span class=md-ellipsis> Globs </span> </a> </li> <li class=md-nav__item> <a href=#supported-types class=md-nav__link> <span class=md-ellipsis> Supported types </span> </a> </li> <li class=md-nav__item> <a href=#paths-as-objects class=md-nav__link> <span class=md-ellipsis> Paths as objects </span> </a> </li> <li class=md-nav__item> <a href=#rendering-paths class=md-nav__link> <span class=md-ellipsis> Rendering paths </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=../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> <a href=../slots/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Slots <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../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=#overview class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=#media-class class=md-nav__link> <span class=md-ellipsis> Media class </span> </a> <nav class=md-nav aria-label="Media class"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#css-media-types class=md-nav__link> <span class=md-ellipsis> CSS media types </span> </a> </li> <li class=md-nav__item> <a href=#media-inheritance class=md-nav__link> <span class=md-ellipsis> Media inheritance </span> </a> </li> <li class=md-nav__item> <a href=#accessing-media-files class=md-nav__link> <span class=md-ellipsis> Accessing Media files </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#file-paths class=md-nav__link> <span class=md-ellipsis> File paths </span> </a> <nav class=md-nav aria-label="File paths"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#relative-to-component class=md-nav__link> <span class=md-ellipsis> Relative to component </span> </a> </li> <li class=md-nav__item> <a href=#globs class=md-nav__link> <span class=md-ellipsis> Globs </span> </a> </li> <li class=md-nav__item> <a href=#supported-types class=md-nav__link> <span class=md-ellipsis> Supported types </span> </a> </li> <li class=md-nav__item> <a href=#paths-as-objects class=md-nav__link> <span class=md-ellipsis> Paths as objects </span> </a> </li> <li class=md-nav__item> <a href=#rendering-paths class=md-nav__link> <span class=md-ellipsis> Rendering paths </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/secondary_js_css_files.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/secondary_js_css_files.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>Secondary JS / CSS files</h1> <h2 id=overview>Overview<a class=headerlink href=#overview title="Permanent link">¤</a></h2> <p>Each component can define extra or "secondary" CSS / JS files using the nested <a href=../../../reference/api/#django_components.Component.Media><code>Component.Media</code></a> class, by setting <a href=../../../reference/api/#django_components.ComponentMediaInput.js><code>Component.Media.js</code></a> and <a href=../../../reference/api/#django_components.ComponentMediaInput.css><code>Component.Media.css</code></a>.</p> <p>The <a href=../html_js_css_files>main HTML / JS / CSS files</a> are limited to 1 per component. This is not the case for the secondary files, where components can have many of them.</p> <p>There is also no special behavior or post-processing for these secondary files, they are loaded as is.</p> <p>You can use these for third-party libraries, or for shared CSS / JS files.</p> <p>These must be set as paths, URLs, or <a href=#paths-as-objects>custom objects</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=s2>&quot;https://unpkg.com/alpinejs@3.14.7/dist/cdn.min.js&quot;</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=s2>&quot;calendar/script.js&quot;</span><span class=p>,</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=p>]</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>css</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=s2>&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span><span class=p>,</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=s2>&quot;calendar/style.css&quot;</span><span class=p>,</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=p>]</span>
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>django-component's management of files is inspired by <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/ >Django's <code>Media</code> class</a>.</p> <p>To be familiar with how Django handles static files, we recommend reading also:</p> <ul> <li><a href=https://docs.djangoproject.com/en/5.2/howto/static-files/ >How to manage static files (e.g. images, JavaScript, CSS)</a></li> </ul> </div> <h2 id=media-class><code>Media</code> class<a class=headerlink href=#media-class title="Permanent link">¤</a></h2> <!-- TODO: This section deserves to be expanded with more examples,
so it's easier to follow. Right now it assumes that the read
is familiar with Django's Media class, as we describe our Media class
in constrast to it.
Instead we should go over all features / behaviours of the `Media` class.
We should also make `Media` class into a separate extension,
and then have a separate page on "Secondary JS / CSS files".
--> <p>Use the <code>Media</code> class to define secondary JS / CSS files for a component.</p> <p>This <code>Media</code> class behaves similarly to <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/#assets-as-a-static-definition>Django's Media class</a>:</p> <ul> <li><strong>Static paths</strong> - Paths are handled as static file paths, and are resolved to URLs with Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#static><code>{% static %}</code></a> template tag.</li> <li><strong>URLs</strong> - A path that starts with <code>http</code>, <code>https</code>, or <code>/</code> is considered a URL. URLs are NOT resolved with <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#static><code>{% static %}</code></a>.</li> <li><strong>HTML tags</strong> - Both static paths and URLs are rendered to <code>&lt;script&gt;</code> and <code>&lt;link&gt;</code> HTML tags with <code>media_class.render_js()</code> and <code>media_class.render_css()</code>.</li> <li><strong>Bypass formatting</strong> - A <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.SafeString><code>SafeString</code></a>, or a function (with <code>__html__</code> method) is considered an already-formatted HTML tag, skipping both static file resolution and rendering with <code>media_class.render_js()</code> or <code>media_class.render_css()</code>.</li> <li><strong>Inheritance</strong> - You can set <a href=../../../reference/api#django_components.ComponentMediaInput.extend><code>extend</code></a> to configure whether to inherit JS / CSS from parent components. See <a href=#media-inheritance>Media inheritance</a>.</li> </ul> <p>However, there's a few differences from Django's Media class:</p> <ol> <li>Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictonary (See <a href=../../../reference/api#django_components.ComponentMediaInput><code>ComponentMediaInput</code></a>).</li> <li>Individual JS / CSS files can be any of <code>str</code>, <code>bytes</code>, <code>Path</code>, <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.SafeString><code>SafeString</code></a>, or a function (See <a href=../../../reference/api#django_components.ComponentMediaInputPath><code>ComponentMediaInputPath</code></a>).</li> <li>Individual JS / CSS files can be glob patterns, e.g. <code>*.js</code> or <code>styles/**/*.css</code>.</li> <li>If you set <a href=../../../reference/api/#django_components.ComponentMediaInput.extend><code>Media.extend</code></a> to a list, it should be a list of <a href=../../../reference/api/#django_components.Component><code>Component</code></a> classes.</li> </ol> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>components.layout</span><span class=w> </span><span class=kn>import</span> <span class=n>LayoutComp</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=s2>&quot;path/to/script.js&quot;</span><span class=p>,</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=s2>&quot;path/to/*.js&quot;</span><span class=p>,</span> <span class=c1># Or as a glob</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=s2>&quot;https://unpkg.com/alpinejs@3.14.7/dist/cdn.min.js&quot;</span><span class=p>,</span> <span class=c1># AlpineJS</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=p>]</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=p>[</span>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> <span class=s2>&quot;path/to/style.css&quot;</span><span class=p>,</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=s2>&quot;path/to/*.css&quot;</span><span class=p>,</span> <span class=c1># Or as a glob</span>
<a id=__codelineno-1-14 name=__codelineno-1-14 href=#__codelineno-1-14></a> <span class=s2>&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span><span class=p>,</span> <span class=c1># TailwindCSS</span>
<a id=__codelineno-1-15 name=__codelineno-1-15 href=#__codelineno-1-15></a> <span class=p>],</span>
<a id=__codelineno-1-16 name=__codelineno-1-16 href=#__codelineno-1-16></a> <span class=s2>&quot;print&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;path/to/style2.css&quot;</span><span class=p>],</span>
<a id=__codelineno-1-17 name=__codelineno-1-17 href=#__codelineno-1-17></a> <span class=p>}</span>
<a id=__codelineno-1-18 name=__codelineno-1-18 href=#__codelineno-1-18></a>
<a id=__codelineno-1-19 name=__codelineno-1-19 href=#__codelineno-1-19></a> <span class=c1># Reuse JS / CSS from LayoutComp</span>
<a id=__codelineno-1-20 name=__codelineno-1-20 href=#__codelineno-1-20></a> <span class=n>extend</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-1-21 name=__codelineno-1-21 href=#__codelineno-1-21></a> <span class=n>LayoutComp</span><span class=p>,</span>
<a id=__codelineno-1-22 name=__codelineno-1-22 href=#__codelineno-1-22></a> <span class=p>]</span>
</code></pre></div> <h3 id=css-media-types>CSS media types<a class=headerlink href=#css-media-types title="Permanent link">¤</a></h3> <p>You can define which stylesheets will be associated with which <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#targeting_media_types>CSS media types</a>. You do so by defining CSS files as a dictionary.</p> <p>See the corresponding <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/#css>Django Documentation</a>.</p> <p>Again, you can set either a single file or a list of files per media type:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=s2>&quot;path/to/style1.css&quot;</span><span class=p>,</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=s2>&quot;print&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;path/to/style2.css&quot;</span><span class=p>,</span> <span class=s2>&quot;path/to/style3.css&quot;</span><span class=p>],</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=p>}</span>
</code></pre></div> <p>Which will render the following HTML:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=p>&lt;</span><span class=nt>link</span> <span class=na>href</span><span class=o>=</span><span class=s>&quot;/static/path/to/style1.css&quot;</span> <span class=na>media</span><span class=o>=</span><span class=s>&quot;all&quot;</span> <span class=na>rel</span><span class=o>=</span><span class=s>&quot;stylesheet&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=p>&lt;</span><span class=nt>link</span> <span class=na>href</span><span class=o>=</span><span class=s>&quot;/static/path/to/style2.css&quot;</span> <span class=na>media</span><span class=o>=</span><span class=s>&quot;print&quot;</span> <span class=na>rel</span><span class=o>=</span><span class=s>&quot;stylesheet&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=p>&lt;</span><span class=nt>link</span> <span class=na>href</span><span class=o>=</span><span class=s>&quot;/static/path/to/style3.css&quot;</span> <span class=na>media</span><span class=o>=</span><span class=s>&quot;print&quot;</span> <span class=na>rel</span><span class=o>=</span><span class=s>&quot;stylesheet&quot;</span><span class=p>&gt;</span>
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>When you define CSS as a string or a list, the <code>all</code> media type is implied.</p> <p>So these two examples are the same:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;path/to/style1.css&quot;</span>
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;path/to/style1.css&quot;</span><span class=p>],</span>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=p>}</span>
</code></pre></div> </div> <h3 id=media-inheritance>Media inheritance<a class=headerlink href=#media-inheritance title="Permanent link">¤</a></h3> <p>By default, the media files are inherited from the parent component.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=k>class</span><span class=w> </span><span class=nc>ParentComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;parent.js&quot;</span><span class=p>]</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a>
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>ParentComponent</span><span class=p>):</span>
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;script.js&quot;</span><span class=p>]</span>
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a>
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>_js</span><span class=p>)</span> <span class=c1># [&quot;parent.js&quot;, &quot;script.js&quot;]</span>
</code></pre></div> <p>You can set the component NOT to inherit from the parent component by setting the <a href=../../../reference/api/#django_components.ComponentMediaInput.extend><code>extend</code></a> attribute to <code>False</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=k>class</span><span class=w> </span><span class=nc>ParentComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;parent.js&quot;</span><span class=p>]</span>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a>
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>ParentComponent</span><span class=p>):</span>
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <span class=n>extend</span> <span class=o>=</span> <span class=kc>False</span> <span class=c1># Don&#39;t inherit parent media</span>
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;script.js&quot;</span><span class=p>]</span>
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a>
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>_js</span><span class=p>)</span> <span class=c1># [&quot;script.js&quot;]</span>
</code></pre></div> <p>Alternatively, you can specify which components to inherit from. In such case, the media files are inherited ONLY from the specified components, and NOT from the original parent components:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=k>class</span><span class=w> </span><span class=nc>ParentComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;parent.js&quot;</span><span class=p>]</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>ParentComponent</span><span class=p>):</span>
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> <span class=c1># Only inherit from these, ignoring the files from the parent</span>
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=n>extend</span> <span class=o>=</span> <span class=p>[</span><span class=n>OtherComponent1</span><span class=p>,</span> <span class=n>OtherComponent2</span><span class=p>]</span>
<a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a>
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;script.js&quot;</span><span class=p>]</span>
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a>
<a id=__codelineno-8-12 name=__codelineno-8-12 href=#__codelineno-8-12></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>_js</span><span class=p>)</span> <span class=c1># [&quot;script.js&quot;, &quot;other1.js&quot;, &quot;other2.js&quot;]</span>
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>The <code>extend</code> behaves consistently with <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/#extend>Django's Media class</a>, with one exception:</p> <ul> <li>When you set <code>extend</code> to a list, the list is expected to contain Component classes (or other classes that have a nested <code>Media</code> class).</li> </ul> </div> <h3 id=accessing-media-files>Accessing Media files<a class=headerlink href=#accessing-media-files title="Permanent link">¤</a></h3> <p>To access the files that you defined under <a href=../../../reference/api#django_components.Component.Media><code>Component.Media</code></a>, use <a href=../../../reference/api/#django_components.Component.media><code>Component.media</code></a> (lowercase).</p> <p>This is consistent behavior with <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/#assets-as-a-static-definition>Django's Media class</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;path/to/script.js&quot;</span>
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;path/to/style.css&quot;</span>
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a>
<a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a><span class=nb>print</span><span class=p>(</span><span class=n>MyComponent</span><span class=o>.</span><span class=n>media</span><span class=p>)</span>
<a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=c1># Output:</span>
<a id=__codelineno-9-8 name=__codelineno-9-8 href=#__codelineno-9-8></a><span class=c1># &lt;script src=&quot;/static/path/to/script.js&quot;&gt;&lt;/script&gt;</span>
<a id=__codelineno-9-9 name=__codelineno-9-9 href=#__codelineno-9-9></a><span class=c1># &lt;link href=&quot;/static/path/to/style.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot;&gt;</span>
</code></pre></div> <p>When working with component media files, it is important to understand the difference:</p> <ul> <li> <p><code>Component.Media</code></p> <ul> <li>Is the "raw" media definition, or the input, which holds only the component's <strong>own</strong> media definition</li> <li>This class is NOT instantiated, it merely holds the JS / CSS files.</li> </ul> </li> <li> <p><code>Component.media</code></p> <ul> <li>Returns all resolved media files, <strong>including</strong> those inherited from parent components</li> <li>Is an instance of <a href=../../../reference/api/#django_components.Component.media_class><code>Component.media_class</code></a></li> </ul> </li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=k>class</span><span class=w> </span><span class=nc>ParentComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;parent.js&quot;</span><span class=p>]</span>
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a>
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a><span class=k>class</span><span class=w> </span><span class=nc>ChildComponent</span><span class=p>(</span><span class=n>ParentComponent</span><span class=p>):</span>
<a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-10-7 name=__codelineno-10-7 href=#__codelineno-10-7></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;child.js&quot;</span><span class=p>]</span>
<a id=__codelineno-10-8 name=__codelineno-10-8 href=#__codelineno-10-8></a>
<a id=__codelineno-10-9 name=__codelineno-10-9 href=#__codelineno-10-9></a><span class=c1># Access only this component&#39;s media</span>
<a id=__codelineno-10-10 name=__codelineno-10-10 href=#__codelineno-10-10></a><span class=nb>print</span><span class=p>(</span><span class=n>ChildComponent</span><span class=o>.</span><span class=n>Media</span><span class=o>.</span><span class=n>js</span><span class=p>)</span> <span class=c1># [&quot;child.js&quot;]</span>
<a id=__codelineno-10-11 name=__codelineno-10-11 href=#__codelineno-10-11></a>
<a id=__codelineno-10-12 name=__codelineno-10-12 href=#__codelineno-10-12></a><span class=c1># Access all inherited media</span>
<a id=__codelineno-10-13 name=__codelineno-10-13 href=#__codelineno-10-13></a><span class=nb>print</span><span class=p>(</span><span class=n>ChildComponent</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>_js</span><span class=p>)</span> <span class=c1># [&quot;parent.js&quot;, &quot;child.js&quot;]</span>
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>You should <strong>not</strong> manually modify <code>Component.media</code> or <code>Component.Media</code> after the component has been resolved, as this may lead to unexpected behavior.</p> </div> <p>If you want to modify the class that is instantiated for <a href=../../../reference/api/#django_components.Component.media><code>Component.media</code></a>, you can configure <a href=../../../reference/api/#django_components.Component.media_class><code>Component.media_class</code></a> (<a href=#rendering-paths>See example</a>).</p> <h2 id=file-paths>File paths<a class=headerlink href=#file-paths title="Permanent link">¤</a></h2> <p>Unlike the <a href=../html_js_css_files>main HTML / JS / CSS files</a>, the path definition for the secondary files are quite ergonomic.</p> <h3 id=relative-to-component>Relative to component<a class=headerlink href=#relative-to-component title="Permanent link">¤</a></h3> <p>As seen in the <a href=../../../getting_started/your_first_component/ >getting started example</a>, to associate HTML / JS / CSS files with a component, you can set them as <a href=../../../reference/api/#django_components.Component.template_file><code>Component.template_file</code></a>, <a href=../../../reference/api/#django_components.Component.js_file><code>Component.js_file</code></a> and <a href=../../../reference/api/#django_components.Component.css_file><code>Component.css_file</code></a> respectively:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a>
<a id=__codelineno-11-3 name=__codelineno-11-3 href=#__codelineno-11-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-11-4 name=__codelineno-11-4 href=#__codelineno-11-4></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-11-5 name=__codelineno-11-5 href=#__codelineno-11-5></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;template.html&quot;</span>
<a id=__codelineno-11-6 name=__codelineno-11-6 href=#__codelineno-11-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;style.css&quot;</span>
<a id=__codelineno-11-7 name=__codelineno-11-7 href=#__codelineno-11-7></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;script.js&quot;</span>
</code></pre></div> <p>In the example above, we defined the files relative to the directory where the component file is defined.</p> <p>Alternatively, you can specify the file paths relative to the directories set in <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a>.</p> <p>If you specify the paths relative to component's directory, django-componenents does the conversion automatically for you.</p> <p>Thus, assuming that <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> contains path <code>[project root]/components</code>, the example above is the same as writing:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a>
<a id=__codelineno-12-3 name=__codelineno-12-3 href=#__codelineno-12-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-12-4 name=__codelineno-12-4 href=#__codelineno-12-4></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-12-5 name=__codelineno-12-5 href=#__codelineno-12-5></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar/template.html&quot;</span>
<a id=__codelineno-12-6 name=__codelineno-12-6 href=#__codelineno-12-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar/style.css&quot;</span>
<a id=__codelineno-12-7 name=__codelineno-12-7 href=#__codelineno-12-7></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar/script.js&quot;</span>
</code></pre></div> <div class="admonition important"> <p class=admonition-title>Important</p> <p><strong>File path resolution in-depth</strong></p> <p>At component class creation, django-components checks all file paths defined on the component (e.g. <code>Component.template_file</code>).</p> <p>For each file path, it checks if the file path is relative to the component's directory. And such file exists, the component's file path is re-written to be defined relative to a first matching directory in <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> or <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a>.</p> <p><strong>Example:</strong></p> <div class=highlight><span class=filename>[root]/components/mytable/mytable.py</span><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=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;mytable.html&quot;</span>
</code></pre></div> <ol> <li>Component <code>MyTable</code> is defined in file <code>[root]/components/mytable/mytable.py</code>.</li> <li>The component's directory is thus <code>[root]/components/mytable/</code>.</li> <li>Because <code>MyTable.template_file</code> is <code>mytable.html</code>, django-components tries to resolve it as <code>[root]/components/mytable/mytable.html</code>.</li> <li>django-components checks the filesystem. If there's no such file, nothing happens.</li> <li>If there IS such file, django-components tries to rewrite the path.</li> <li>django-components searches <code>COMPONENTS.dirs</code> and <code>COMPONENTS.app_dirs</code> for a first directory that contains <code>[root]/components/mytable/mytable.html</code>.</li> <li>It comes across <code>[root]/components/</code>, which DOES contain the path to <code>mytable.html</code>.</li> <li>Thus, it rewrites <code>template_file</code> from <code>mytable.html</code> to <code>mytable/mytable.html</code>.</li> </ol> <p>NOTE: In case of ambiguity, the preference goes to resolving the files relative to the component's directory.</p> </div> <h3 id=globs>Globs<a class=headerlink href=#globs title="Permanent link">¤</a></h3> <p>Components can have many secondary files. To simplify their declaration, you can use globs.</p> <p>Globs MUST be relative to the component's directory.</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-14-1 name=__codelineno-14-1 href=#__codelineno-14-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-14-2 name=__codelineno-14-2 href=#__codelineno-14-2></a>
<a id=__codelineno-14-3 name=__codelineno-14-3 href=#__codelineno-14-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-14-4 name=__codelineno-14-4 href=#__codelineno-14-4></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-14-5 name=__codelineno-14-5 href=#__codelineno-14-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-14-6 name=__codelineno-14-6 href=#__codelineno-14-6></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-14-7 name=__codelineno-14-7 href=#__codelineno-14-7></a> <span class=s2>&quot;path/to/*.js&quot;</span><span class=p>,</span>
<a id=__codelineno-14-8 name=__codelineno-14-8 href=#__codelineno-14-8></a> <span class=s2>&quot;another/path/*.js&quot;</span><span class=p>,</span>
<a id=__codelineno-14-9 name=__codelineno-14-9 href=#__codelineno-14-9></a> <span class=p>]</span>
<a id=__codelineno-14-10 name=__codelineno-14-10 href=#__codelineno-14-10></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;*.css&quot;</span>
</code></pre></div> <p>How this works is that django-components will detect that the path is a glob, and will try to resolve all files matching the glob pattern relative to the component's directory.</p> <p>After that, the file paths are handled the same way as if you defined them explicitly.</p> <h3 id=supported-types>Supported types<a class=headerlink href=#supported-types title="Permanent link">¤</a></h3> <p>File paths can be any of:</p> <ul> <li><code>str</code></li> <li><code>bytes</code></li> <li><code>PathLike</code> (<code>__fspath__</code> method)</li> <li><code>SafeData</code> (<code>__html__</code> method)</li> <li><code>Callable</code> that returns any of the above, evaluated at class creation (<code>__new__</code>)</li> </ul> <p>To help with typing the union, use <a href=../../../reference/api#django_components.ComponentMediaInputPath><code>ComponentMediaInputPath</code></a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-15-1 name=__codelineno-15-1 href=#__codelineno-15-1></a><span class=kn>from</span><span class=w> </span><span class=nn>pathlib</span><span class=w> </span><span class=kn>import</span> <span class=n>Path</span>
<a id=__codelineno-15-2 name=__codelineno-15-2 href=#__codelineno-15-2></a>
<a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django.utils.safestring</span><span class=w> </span><span class=kn>import</span> <span class=n>mark_safe</span>
<a id=__codelineno-15-4 name=__codelineno-15-4 href=#__codelineno-15-4></a>
<a id=__codelineno-15-5 name=__codelineno-15-5 href=#__codelineno-15-5></a><span class=k>class</span><span class=w> </span><span class=nc>SimpleComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-15-6 name=__codelineno-15-6 href=#__codelineno-15-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-15-7 name=__codelineno-15-7 href=#__codelineno-15-7></a> <span class=n>css</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-15-8 name=__codelineno-15-8 href=#__codelineno-15-8></a> <span class=n>mark_safe</span><span class=p>(</span><span class=s1>&#39;&lt;link href=&quot;/static/calendar/style1.css&quot; rel=&quot;stylesheet&quot; /&gt;&#39;</span><span class=p>),</span>
<a id=__codelineno-15-9 name=__codelineno-15-9 href=#__codelineno-15-9></a> <span class=n>Path</span><span class=p>(</span><span class=s2>&quot;calendar/style1.css&quot;</span><span class=p>),</span>
<a id=__codelineno-15-10 name=__codelineno-15-10 href=#__codelineno-15-10></a> <span class=s2>&quot;calendar/style2.css&quot;</span><span class=p>,</span>
<a id=__codelineno-15-11 name=__codelineno-15-11 href=#__codelineno-15-11></a> <span class=sa>b</span><span class=s2>&quot;calendar/style3.css&quot;</span><span class=p>,</span>
<a id=__codelineno-15-12 name=__codelineno-15-12 href=#__codelineno-15-12></a> <span class=k>lambda</span><span class=p>:</span> <span class=s2>&quot;calendar/style4.css&quot;</span><span class=p>,</span>
<a id=__codelineno-15-13 name=__codelineno-15-13 href=#__codelineno-15-13></a> <span class=p>]</span>
<a id=__codelineno-15-14 name=__codelineno-15-14 href=#__codelineno-15-14></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-15-15 name=__codelineno-15-15 href=#__codelineno-15-15></a> <span class=n>mark_safe</span><span class=p>(</span><span class=s1>&#39;&lt;script src=&quot;/static/calendar/script1.js&quot;&gt;&lt;/script&gt;&#39;</span><span class=p>),</span>
<a id=__codelineno-15-16 name=__codelineno-15-16 href=#__codelineno-15-16></a> <span class=n>Path</span><span class=p>(</span><span class=s2>&quot;calendar/script1.js&quot;</span><span class=p>),</span>
<a id=__codelineno-15-17 name=__codelineno-15-17 href=#__codelineno-15-17></a> <span class=s2>&quot;calendar/script2.js&quot;</span><span class=p>,</span>
<a id=__codelineno-15-18 name=__codelineno-15-18 href=#__codelineno-15-18></a> <span class=sa>b</span><span class=s2>&quot;calendar/script3.js&quot;</span><span class=p>,</span>
<a id=__codelineno-15-19 name=__codelineno-15-19 href=#__codelineno-15-19></a> <span class=k>lambda</span><span class=p>:</span> <span class=s2>&quot;calendar/script4.js&quot;</span><span class=p>,</span>
<a id=__codelineno-15-20 name=__codelineno-15-20 href=#__codelineno-15-20></a> <span class=p>]</span>
</code></pre></div> <h3 id=paths-as-objects>Paths as objects<a class=headerlink href=#paths-as-objects title="Permanent link">¤</a></h3> <p>In the example <a href=#supported-types>above</a>, you can see that when we used Django's <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.mark_safe><code>mark_safe()</code></a> to mark a string as a <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.SafeString><code>SafeString</code></a>, we had to define the URL / path as an HTML <code>&lt;script&gt;</code>/<code>&lt;link&gt;</code> elements.</p> <p>This is an extension of Django's <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media/#paths-as-objects>Paths as objects</a> feature, where "safe" strings are taken as is, and are accessed only at render time.</p> <p>Because of that, the paths defined as "safe" strings are NEVER resolved, neither relative to component's directory, nor relative to <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a>. It is assumed that you will define the full <code>&lt;script&gt;</code>/<code>&lt;link&gt;</code> tag with the correct URL / path.</p> <p>"Safe" strings can be used to lazily resolve a path, or to customize the <code>&lt;script&gt;</code> or <code>&lt;link&gt;</code> tag for individual paths:</p> <p>In the example below, we make use of "safe" strings to add <code>type="module"</code> to the script tag that will fetch <code>calendar/script2.js</code>. In this case, we implemented a "safe" string by defining a <code>__html__</code> method.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-16-1 name=__codelineno-16-1 href=#__codelineno-16-1></a><span class=c1># Path object</span>
<a id=__codelineno-16-2 name=__codelineno-16-2 href=#__codelineno-16-2></a><span class=k>class</span><span class=w> </span><span class=nc>ModuleJsPath</span><span class=p>:</span>
<a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a> <span class=k>def</span><span class=w> </span><span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>static_path</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a> <span class=bp>self</span><span class=o>.</span><span class=n>static_path</span> <span class=o>=</span> <span class=n>static_path</span>
<a id=__codelineno-16-5 name=__codelineno-16-5 href=#__codelineno-16-5></a>
<a id=__codelineno-16-6 name=__codelineno-16-6 href=#__codelineno-16-6></a> <span class=c1># Lazily resolve the path</span>
<a id=__codelineno-16-7 name=__codelineno-16-7 href=#__codelineno-16-7></a> <span class=k>def</span><span class=w> </span><span class=nf>__html__</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-16-8 name=__codelineno-16-8 href=#__codelineno-16-8></a> <span class=n>full_path</span> <span class=o>=</span> <span class=n>static</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>static_path</span><span class=p>)</span>
<a id=__codelineno-16-9 name=__codelineno-16-9 href=#__codelineno-16-9></a> <span class=k>return</span> <span class=n>format_html</span><span class=p>(</span>
<a id=__codelineno-16-10 name=__codelineno-16-10 href=#__codelineno-16-10></a> <span class=sa>f</span><span class=s1>&#39;&lt;script type=&quot;module&quot; src=&quot;</span><span class=si>{</span><span class=n>full_path</span><span class=si>}</span><span class=s1>&quot;&gt;&lt;/script&gt;&#39;</span>
<a id=__codelineno-16-11 name=__codelineno-16-11 href=#__codelineno-16-11></a> <span class=p>)</span>
<a id=__codelineno-16-12 name=__codelineno-16-12 href=#__codelineno-16-12></a>
<a id=__codelineno-16-13 name=__codelineno-16-13 href=#__codelineno-16-13></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-16-14 name=__codelineno-16-14 href=#__codelineno-16-14></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-16-15 name=__codelineno-16-15 href=#__codelineno-16-15></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar/template.html&quot;</span>
<a id=__codelineno-16-16 name=__codelineno-16-16 href=#__codelineno-16-16></a>
<a id=__codelineno-16-17 name=__codelineno-16-17 href=#__codelineno-16-17></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-16-18 name=__codelineno-16-18 href=#__codelineno-16-18></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;calendar/style1.css&quot;</span>
<a id=__codelineno-16-19 name=__codelineno-16-19 href=#__codelineno-16-19></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-16-20 name=__codelineno-16-20 href=#__codelineno-16-20></a> <span class=c1># &lt;script&gt; tag constructed by Media class</span>
<a id=__codelineno-16-21 name=__codelineno-16-21 href=#__codelineno-16-21></a> <span class=s2>&quot;calendar/script1.js&quot;</span><span class=p>,</span>
<a id=__codelineno-16-22 name=__codelineno-16-22 href=#__codelineno-16-22></a> <span class=c1># Custom &lt;script&gt; tag</span>
<a id=__codelineno-16-23 name=__codelineno-16-23 href=#__codelineno-16-23></a> <span class=n>ModuleJsPath</span><span class=p>(</span><span class=s2>&quot;calendar/script2.js&quot;</span><span class=p>),</span>
<a id=__codelineno-16-24 name=__codelineno-16-24 href=#__codelineno-16-24></a> <span class=p>]</span>
</code></pre></div> <h3 id=rendering-paths>Rendering paths<a class=headerlink href=#rendering-paths title="Permanent link">¤</a></h3> <p>As part of the rendering process, the secondary JS / CSS files are resolved and rendered into <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code> HTML tags, so they can be inserted into the render.</p> <p>In the <a href=#paths-as-objects>Paths as objects</a> section, we saw that we can use that to selectively change how the HTML tags are constructed.</p> <p>However, if you need to change how ALL CSS and JS files are rendered for a given component, you can provide your own subclass of <a href=https://docs.djangoproject.com/en/5.2/topics/forms/media>Django's <code>Media</code> class</a> to the <a href=../../../reference/api/#django_components.Component.media_class><code>Component.media_class</code></a> attribute.</p> <p>To change how the tags are constructed, you can override the <a href=https://github.com/django/django/blob/fa7848146738a9fe1d415ee4808664e54739eeb7/django/forms/widgets.py#L102><code>Media.render_js()</code> and <code>Media.render_css()</code> methods</a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.forms.widgets</span><span class=w> </span><span class=kn>import</span> <span class=n>Media</span>
<a id=__codelineno-17-2 name=__codelineno-17-2 href=#__codelineno-17-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a>
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyMedia</span><span class=p>(</span><span class=n>Media</span><span class=p>):</span>
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a> <span class=c1># Same as original Media.render_js, except</span>
<a id=__codelineno-17-6 name=__codelineno-17-6 href=#__codelineno-17-6></a> <span class=c1># the `&lt;script&gt;` tag has also `type=&quot;module&quot;`</span>
<a id=__codelineno-17-7 name=__codelineno-17-7 href=#__codelineno-17-7></a> <span class=k>def</span><span class=w> </span><span class=nf>render_js</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-17-8 name=__codelineno-17-8 href=#__codelineno-17-8></a> <span class=n>tags</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-17-9 name=__codelineno-17-9 href=#__codelineno-17-9></a> <span class=k>for</span> <span class=n>path</span> <span class=ow>in</span> <span class=bp>self</span><span class=o>.</span><span class=n>_js</span><span class=p>:</span>
<a id=__codelineno-17-10 name=__codelineno-17-10 href=#__codelineno-17-10></a> <span class=k>if</span> <span class=nb>hasattr</span><span class=p>(</span><span class=n>path</span><span class=p>,</span> <span class=s2>&quot;__html__&quot;</span><span class=p>):</span>
<a id=__codelineno-17-11 name=__codelineno-17-11 href=#__codelineno-17-11></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>path</span><span class=o>.</span><span class=n>__html__</span><span class=p>()</span>
<a id=__codelineno-17-12 name=__codelineno-17-12 href=#__codelineno-17-12></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-17-13 name=__codelineno-17-13 href=#__codelineno-17-13></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>format_html</span><span class=p>(</span>
<a id=__codelineno-17-14 name=__codelineno-17-14 href=#__codelineno-17-14></a> <span class=s1>&#39;&lt;script type=&quot;module&quot; src=&quot;</span><span class=si>{}</span><span class=s1>&quot;&gt;&lt;/script&gt;&#39;</span><span class=p>,</span>
<a id=__codelineno-17-15 name=__codelineno-17-15 href=#__codelineno-17-15></a> <span class=bp>self</span><span class=o>.</span><span class=n>absolute_path</span><span class=p>(</span><span class=n>path</span><span class=p>)</span>
<a id=__codelineno-17-16 name=__codelineno-17-16 href=#__codelineno-17-16></a> <span class=p>)</span>
<a id=__codelineno-17-17 name=__codelineno-17-17 href=#__codelineno-17-17></a> <span class=k>return</span> <span class=n>tags</span>
<a id=__codelineno-17-18 name=__codelineno-17-18 href=#__codelineno-17-18></a>
<a id=__codelineno-17-19 name=__codelineno-17-19 href=#__codelineno-17-19></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-17-20 name=__codelineno-17-20 href=#__codelineno-17-20></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-17-21 name=__codelineno-17-21 href=#__codelineno-17-21></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar/template.html&quot;</span>
<a id=__codelineno-17-22 name=__codelineno-17-22 href=#__codelineno-17-22></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar/style.css&quot;</span>
<a id=__codelineno-17-23 name=__codelineno-17-23 href=#__codelineno-17-23></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar/script.js&quot;</span>
<a id=__codelineno-17-24 name=__codelineno-17-24 href=#__codelineno-17-24></a>
<a id=__codelineno-17-25 name=__codelineno-17-25 href=#__codelineno-17-25></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-17-26 name=__codelineno-17-26 href=#__codelineno-17-26></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;calendar/style1.css&quot;</span>
<a id=__codelineno-17-27 name=__codelineno-17-27 href=#__codelineno-17-27></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;calendar/script2.js&quot;</span>
<a id=__codelineno-17-28 name=__codelineno-17-28 href=#__codelineno-17-28></a>
<a id=__codelineno-17-29 name=__codelineno-17-29 href=#__codelineno-17-29></a> <span class=c1># Override the behavior of Media class</span>
<a id=__codelineno-17-30 name=__codelineno-17-30 href=#__codelineno-17-30></a> <span class=n>media_class</span> <span class=o>=</span> <span class=n>MyMedia</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="May 11, 2025 12:59:34 UTC"><span class=timeago datetime=2025-05-11T12:59:34+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="May 11, 2025 12:59:34 UTC">2025-05-11</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=../html_js_css_variables/ class="md-footer__link md-footer__link--prev" aria-label="Previous: HTML / JS / CSS variables"> <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> HTML / JS / CSS variables </div> </div> </a> <a href=../component_defaults/ class="md-footer__link md-footer__link--next" aria-label="Next: Component defaults"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Component defaults </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>
Reference in a new issue View git blame Copy permalink