mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-11-17 13:52:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
django-components/dev/examples/tabs/index.html

582 lines
No EOL
236 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/examples/tabs/ rel=canonical><link href=../form_grid/ rel=prev><link href=../../community/people/ rel=next><link rel=icon href=../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.19"><title>Tabs (AlpineJS) - 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="Tabs (AlpineJS) - 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/examples/tabs/README.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/examples/tabs/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Tabs (AlpineJS) - 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/examples/tabs/README.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=#tabs-alpinejs 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> Tabs (AlpineJS) </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 md-tabs__item--active"> <a href=../ class=md-tabs__link> Examples </a> </li> <li class=md-tabs__item> <a href=../../community/people/ class=md-tabs__link> Community </a> </li> <li class=md-tabs__item> <a href=../../releases/ class=md-tabs__link> Release Notes </a> </li> </ul> <ul class="md-tabs__list tabs-hidden" data-tab-group=Documentation> <li class=md-tabs__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <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--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>Concepts <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=false> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Documentation: Concepts </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Fundamentals <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=false> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Single-file components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_files/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML / JS / CSS files <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_variables/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML / JS / CSS variables <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/secondary_js_css_files/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Secondary JS / CSS files <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_defaults/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component defaults <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/render_api/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Render API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/rendering_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/slots/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Slots <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/template_tag_syntax/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Template tag syntax <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_attributes/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML attributes <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_views_urls/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component views and URLs <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/http_request/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTTP Request <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/typing_and_validation/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Typing and validation <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/subclassing_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Subclassing components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/autodiscovery/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Autodiscovery <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Advanced <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/rendering_js_css/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering JS / CSS <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/html_fragments/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML fragments <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/provide_inject/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Prop drilling and provide / inject <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/hooks/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Lifecycle hooks <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_registry/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Registering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_caching/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component caching <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_context_scope/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component context and scope <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/template_tags/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Custom template tags <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/tag_formatters/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Tag formatters <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/extensions/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extensions <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/testing/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Testing <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_libraries/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component libraries <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--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--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_8 checked> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../ 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> <!-- Only render toggle if there's at least one more page --> <label class="md-nav__link " for=__nav_8 id=__nav_8_label tabindex> <span class="md-nav__icon md-icon"></span> </label> </div> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_8_label aria-expanded=true> <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 --> <!-- 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_8_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_8_2 id=__nav_8_2_label tabindex> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Scenarios <!-- 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_8_2_label aria-expanded=false> <label class=md-nav__title for=__nav_8_2> <span class="md-nav__icon md-icon"></span> Scenarios </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_8_2_1> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../form_submission/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Form Submission <!-- 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=3 aria-labelledby=__nav_8_2_1_label aria-expanded=false> <label class=md-nav__title for=__nav_8_2_1> <span class="md-nav__icon md-icon"></span> Form Submission </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_2_2> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../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> <!-- Only render toggle if there's at least one more page --> </div> <!-- Nested navigation --> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_8_2_2_label aria-expanded=false> <label class=md-nav__title for=__nav_8_2_2> <span class="md-nav__icon md-icon"></span> HTML fragments </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_2_3> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../error_fallback/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Error handling <!-- 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=3 aria-labelledby=__nav_8_2_3_label aria-expanded=false> <label class=md-nav__title for=__nav_8_2_3> <span class="md-nav__icon md-icon"></span> Error handling </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_2_4> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../recursion/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Recursion <!-- 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=3 aria-labelledby=__nav_8_2_4_label aria-expanded=false> <label class=md-nav__title for=__nav_8_2_4> <span class="md-nav__icon md-icon"></span> Recursion </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_2_5> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../ab_testing/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> A/B testing <!-- 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=3 aria-labelledby=__nav_8_2_5_label aria-expanded=false> <label class=md-nav__title for=__nav_8_2_5> <span class="md-nav__icon md-icon"></span> A/B testing </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_2_6> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../analytics/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Analytics <!-- 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=3 aria-labelledby=__nav_8_2_6_label aria-expanded=false> <label class=md-nav__title for=__nav_8_2_6> <span class="md-nav__icon md-icon"></span> Analytics </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_8_3 checked> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_8_3 id=__nav_8_3_label tabindex> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Components <!-- 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_8_3_label aria-expanded=true> <label class=md-nav__title for=__nav_8_3> <span class="md-nav__icon md-icon"></span> Components </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_8_3_1> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../form_grid/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> FormGrid <!-- 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=3 aria-labelledby=__nav_8_3_1_label aria-expanded=false> <label class=md-nav__title for=__nav_8_3_1> <span class="md-nav__icon md-icon"></span> FormGrid </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--active 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_8_3_2 checked> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <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> Tabs (AlpineJS) <!-- 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=3 aria-labelledby=__nav_8_3_2_label aria-expanded=true> <label class=md-nav__title for=__nav_8_3_2> <span class="md-nav__icon md-icon"></span> Tabs (AlpineJS) </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </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_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/people/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Django Components People <!-- Navigation link subtitle --> </span> <!-- Navigation 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/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_6> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_9_6 id=__nav_9_6_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_6_label aria-expanded=false> <label class=md-nav__title for=__nav_9_6> <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.142.3/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.142.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.142.2/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.142.2 (2025-10-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.142.1/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.142.1 (2025-10-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.142.0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.142.0 (2025-10-05) <!-- Navigation link subtitle --> </span> <!-- Navigation 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.6/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.6 (2025-09-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.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 (2025-09-10) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-08-15) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-08-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.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 (2025-07-21) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-07-03) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-06-10) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-06-05) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 🚨📢 (2025-06-05) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-04-20) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-04-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.138/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.138 (2025-04-09) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-04-09) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 🚨📢 (2025-04-05) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-03-31) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-03-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.133/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.133 (2025-03-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.132/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.132 (2025-03-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.131/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.131 (2025-03-20) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-02-20) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-02-16) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2025-02-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.127/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.127 (2025-02-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.126/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.126 (2025-01-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.125/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.125 (2025-01-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.124/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.124 (2025-01-07) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2024-12-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.122/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.122 (2024-12-19) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2024-12-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.120/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.120 (2024-12-15) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2024-12-13) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2024-12-10) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2024-12-08) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2024-12-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.115/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.115 (2024-12-02) <!-- Navigation link subtitle --> </span> <!-- Navigation 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 (2024-11-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.113/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.113 (2024-11-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.112/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.112 (2024-11-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.111/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.111 (2024-11-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.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=#api class=md-nav__link> <span class=md-ellipsis> API </span> </a> <nav class=md-nav aria-label=API> <ul class=md-nav__list> <li class=md-nav__item> <a href=#tablist-component class=md-nav__link> <span class=md-ellipsis> Tablist component </span> </a> </li> <li class=md-nav__item> <a href=#tab-component class=md-nav__link> <span class=md-ellipsis> Tab component </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#how-it-works class=md-nav__link> <span class=md-ellipsis> How it works </span> </a> </li> <li class=md-nav__item> <a href=#definition class=md-nav__link> <span class=md-ellipsis> Definition </span> </a> </li> <li class=md-nav__item> <a href=#example class=md-nav__link> <span class=md-ellipsis> Example </span> </a> <nav class=md-nav aria-label=Example> <ul class=md-nav__list> <li class=md-nav__item> <a href=#viewspy class=md-nav__link> <span class=md-ellipsis> views.py </span> </a> </li> <li class=md-nav__item> <a href=#urlspy class=md-nav__link> <span class=md-ellipsis> urls.py </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/examples/tabs/README.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/examples/tabs/README.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 id=tabs-alpinejs>Tabs (AlpineJS)<a class=headerlink href=#tabs-alpinejs title="Permanent link">¤</a></h1> <p><em>(By <a href=https://github.com/JuroOravec>@JuroOravec</a> and <a href=https://github.com/mscheper>@mscheper</a>)</em></p> <p>This example defines a tabs component. Tabs are dynamic - to change the currently opened tab, click on the tab headers.</p> <p>To get started, use the following example to create a simple container with 2 tabs:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;Tablist&quot;</span> <span class=nv>id</span><span class=o>=</span><span class=s2>&quot;my-tablist&quot;</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;My Tabs&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;Tab&quot;</span> <span class=nv>header</span><span class=o>=</span><span class=s2>&quot;Tab 1&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> This is the content of Tab 1</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;Tab&quot;</span> <span class=nv>header</span><span class=o>=</span><span class=s2>&quot;Tab 2&quot;</span> <span class=nv>disabled</span><span class=o>=</span><span class=kp>True</span> <span class=cp>%}</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=x> This is the content of Tab 2</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p><img alt="Tabs example" src=images/tabs.gif></p> <h2 id=api>API<a class=headerlink href=#api title="Permanent link">¤</a></h2> <p>The tab component is composed of two parts: <code>Tablist</code> and <code>Tab</code>. Here's how you can customize them.</p> <h3 id=tablist-component><code>Tablist</code> component<a class=headerlink href=#tablist-component title="Permanent link">¤</a></h3> <p>The <code>Tablist</code> component is the main container for the tabs. It accepts the following arguments:</p> <ul> <li><strong><code>id</code></strong> (optional): A unique ID for the tab list. If not provided, it's generated from the <code>name</code>.</li> <li><strong><code>name</code></strong>: The name of the tab list, used as a WAI-ARIA label for accessibility.</li> <li><strong><code>selected_tab</code></strong> (optional): The <code>id</code> of the tab that should be selected by default.</li> <li><strong><code>container_attrs</code></strong>, <strong><code>tablist_attrs</code></strong>, <strong><code>tab_attrs</code></strong>, <strong><code>tabpanel_attrs</code></strong> (optional): Dictionaries of HTML attributes to be added to the corresponding elements.</li> </ul> <p>Inside the <code>Tablist</code>'s default slot you will define the individual tabs.</p> <h3 id=tab-component><code>Tab</code> component<a class=headerlink href=#tab-component title="Permanent link">¤</a></h3> <p>The <code>Tab</code> component defines an individual tab. It MUST be nested inside a <code>Tablist</code>. It accepts the following arguments:</p> <ul> <li><strong><code>header</code></strong>: The text to be displayed in the tab's header.</li> <li><strong><code>disabled</code></strong> (optional): A boolean that disables the tab if <code>True</code>.</li> <li><strong><code>id</code></strong> (optional): A unique ID for the tab. If not provided, it's generated from the header.</li> </ul> <p>Use the <code>Tab</code>'s default slot to define the content of the tab.</p> <h2 id=how-it-works>How it works<a class=headerlink href=#how-it-works title="Permanent link">¤</a></h2> <p>At the start of rendering, <code>Tablist</code> defines special context that <code>Tab</code>s recognize.</p> <p>When a <code>Tab</code> component is nested and rendered inside a <code>Tablist</code>, it registers itself with the parent <code>Tablist</code> component.</p> <p>After the rendering of <code>Tablist</code>'s body is done, we end up with list of rendered <code>Tabs</code> that were encountered.</p> <p><code>Tablist</code> then uses this information to dynamically render the tab HTML.</p> <h2 id=definition>Definition<a class=headerlink href=#definition title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=sd>Alpine-based tab components: Tablist and Tab.</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=sd>Based on https://github.com/django-components/django-components/discussions/540</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>List</span><span class=p>,</span> <span class=n>NamedTuple</span><span class=p>,</span> <span class=n>Optional</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a><span class=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-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a><span class=kn>from</span><span class=w> </span><span class=nn>django.utils.text</span><span class=w> </span><span class=kn>import</span> <span class=n>slugify</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></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>types</span> <span class=k>as</span> <span class=n>t</span>
<a id=__codelineno-1-14 name=__codelineno-1-14 href=#__codelineno-1-14></a>
<a id=__codelineno-1-15 name=__codelineno-1-15 href=#__codelineno-1-15></a><span class=n>DESCRIPTION</span> <span class=o>=</span> <span class=s2>&quot;Dynamic tabs with AlpineJS.&quot;</span>
<a id=__codelineno-1-16 name=__codelineno-1-16 href=#__codelineno-1-16></a>
<a id=__codelineno-1-17 name=__codelineno-1-17 href=#__codelineno-1-17></a>
<a id=__codelineno-1-18 name=__codelineno-1-18 href=#__codelineno-1-18></a><span class=k>class</span><span class=w> </span><span class=nc>TabDatum</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-19 name=__codelineno-1-19 href=#__codelineno-1-19></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Datum for an individual tab.&quot;&quot;&quot;</span>
<a id=__codelineno-1-20 name=__codelineno-1-20 href=#__codelineno-1-20></a>
<a id=__codelineno-1-21 name=__codelineno-1-21 href=#__codelineno-1-21></a> <span class=n>tab_id</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-22 name=__codelineno-1-22 href=#__codelineno-1-22></a> <span class=n>tabpanel_id</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-23 name=__codelineno-1-23 href=#__codelineno-1-23></a> <span class=n>header</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-24 name=__codelineno-1-24 href=#__codelineno-1-24></a> <span class=n>content</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-25 name=__codelineno-1-25 href=#__codelineno-1-25></a> <span class=n>disabled</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>False</span>
<a id=__codelineno-1-26 name=__codelineno-1-26 href=#__codelineno-1-26></a>
<a id=__codelineno-1-27 name=__codelineno-1-27 href=#__codelineno-1-27></a>
<a id=__codelineno-1-28 name=__codelineno-1-28 href=#__codelineno-1-28></a><span class=k>class</span><span class=w> </span><span class=nc>TabContext</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-29 name=__codelineno-1-29 href=#__codelineno-1-29></a> <span class=nb>id</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-30 name=__codelineno-1-30 href=#__codelineno-1-30></a> <span class=n>tab_data</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=n>TabDatum</span><span class=p>]</span>
<a id=__codelineno-1-31 name=__codelineno-1-31 href=#__codelineno-1-31></a> <span class=n>enabled</span><span class=p>:</span> <span class=nb>bool</span>
<a id=__codelineno-1-32 name=__codelineno-1-32 href=#__codelineno-1-32></a>
<a id=__codelineno-1-33 name=__codelineno-1-33 href=#__codelineno-1-33></a>
<a id=__codelineno-1-34 name=__codelineno-1-34 href=#__codelineno-1-34></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;_tabset&quot;</span><span class=p>)</span>
<a id=__codelineno-1-35 name=__codelineno-1-35 href=#__codelineno-1-35></a><span class=k>class</span><span class=w> </span><span class=nc>_TablistImpl</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-36 name=__codelineno-1-36 href=#__codelineno-1-36></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-37 name=__codelineno-1-37 href=#__codelineno-1-37></a><span class=sd> Delegated Tablist component.</span>
<a id=__codelineno-1-38 name=__codelineno-1-38 href=#__codelineno-1-38></a>
<a id=__codelineno-1-39 name=__codelineno-1-39 href=#__codelineno-1-39></a><span class=sd> Refer to `Tablist` API below.</span>
<a id=__codelineno-1-40 name=__codelineno-1-40 href=#__codelineno-1-40></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-1-41 name=__codelineno-1-41 href=#__codelineno-1-41></a>
<a id=__codelineno-1-42 name=__codelineno-1-42 href=#__codelineno-1-42></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-1-43 name=__codelineno-1-43 href=#__codelineno-1-43></a> <span class=n>js</span> <span class=o>=</span> <span class=p>(</span>
<a id=__codelineno-1-44 name=__codelineno-1-44 href=#__codelineno-1-44></a> <span class=c1># `mark_safe` is used so the script tag is usd as is, so we can add `defer` flag.</span>
<a id=__codelineno-1-45 name=__codelineno-1-45 href=#__codelineno-1-45></a> <span class=c1># `defer` is used so that AlpineJS is actually loaded only after all plugins are registered</span>
<a id=__codelineno-1-46 name=__codelineno-1-46 href=#__codelineno-1-46></a> <span class=n>mark_safe</span><span class=p>(</span><span class=s1>&#39;&lt;script src=&quot;https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js&quot; defer&gt;&lt;/script&gt;&#39;</span><span class=p>),</span>
<a id=__codelineno-1-47 name=__codelineno-1-47 href=#__codelineno-1-47></a> <span class=p>)</span>
<a id=__codelineno-1-48 name=__codelineno-1-48 href=#__codelineno-1-48></a>
<a id=__codelineno-1-49 name=__codelineno-1-49 href=#__codelineno-1-49></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-50 name=__codelineno-1-50 href=#__codelineno-1-50></a> <span class=n>tab_data</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=n>TabDatum</span><span class=p>]</span>
<a id=__codelineno-1-51 name=__codelineno-1-51 href=#__codelineno-1-51></a> <span class=nb>id</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-52 name=__codelineno-1-52 href=#__codelineno-1-52></a> <span class=n>name</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-53 name=__codelineno-1-53 href=#__codelineno-1-53></a> <span class=n>selected_tab</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-54 name=__codelineno-1-54 href=#__codelineno-1-54></a> <span class=n>container_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-55 name=__codelineno-1-55 href=#__codelineno-1-55></a> <span class=n>tablist_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-56 name=__codelineno-1-56 href=#__codelineno-1-56></a> <span class=n>tab_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-57 name=__codelineno-1-57 href=#__codelineno-1-57></a> <span class=n>tabpanel_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-58 name=__codelineno-1-58 href=#__codelineno-1-58></a>
<a id=__codelineno-1-59 name=__codelineno-1-59 href=#__codelineno-1-59></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-60 name=__codelineno-1-60 href=#__codelineno-1-60></a> <span class=n>selected_tab</span> <span class=o>=</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>selected_tab</span> <span class=k>if</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>selected_tab</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span> <span class=k>else</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>tab_data</span><span class=p>[</span><span class=mi>0</span><span class=p>]</span><span class=o>.</span><span class=n>tab_id</span>
<a id=__codelineno-1-61 name=__codelineno-1-61 href=#__codelineno-1-61></a> <span class=n>tab_data</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-1-62 name=__codelineno-1-62 href=#__codelineno-1-62></a> <span class=p>(</span><span class=n>tab</span><span class=p>,</span> <span class=n>tab</span><span class=o>.</span><span class=n>tab_id</span> <span class=o>!=</span> <span class=n>selected_tab</span><span class=p>)</span> <span class=c1># (tab, is_hidden)</span>
<a id=__codelineno-1-63 name=__codelineno-1-63 href=#__codelineno-1-63></a> <span class=k>for</span> <span class=n>tab</span> <span class=ow>in</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>tab_data</span>
<a id=__codelineno-1-64 name=__codelineno-1-64 href=#__codelineno-1-64></a> <span class=p>]</span>
<a id=__codelineno-1-65 name=__codelineno-1-65 href=#__codelineno-1-65></a>
<a id=__codelineno-1-66 name=__codelineno-1-66 href=#__codelineno-1-66></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-1-67 name=__codelineno-1-67 href=#__codelineno-1-67></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-1-68 name=__codelineno-1-68 href=#__codelineno-1-68></a> <span class=s2>&quot;name&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>name</span><span class=p>,</span>
<a id=__codelineno-1-69 name=__codelineno-1-69 href=#__codelineno-1-69></a> <span class=s2>&quot;container_attrs&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>container_attrs</span><span class=p>,</span>
<a id=__codelineno-1-70 name=__codelineno-1-70 href=#__codelineno-1-70></a> <span class=s2>&quot;tablist_attrs&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>tablist_attrs</span><span class=p>,</span>
<a id=__codelineno-1-71 name=__codelineno-1-71 href=#__codelineno-1-71></a> <span class=s2>&quot;tab_attrs&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>tab_attrs</span><span class=p>,</span>
<a id=__codelineno-1-72 name=__codelineno-1-72 href=#__codelineno-1-72></a> <span class=s2>&quot;tabpanel_attrs&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>tabpanel_attrs</span><span class=p>,</span>
<a id=__codelineno-1-73 name=__codelineno-1-73 href=#__codelineno-1-73></a> <span class=s2>&quot;tab_data&quot;</span><span class=p>:</span> <span class=n>tab_data</span><span class=p>,</span>
<a id=__codelineno-1-74 name=__codelineno-1-74 href=#__codelineno-1-74></a> <span class=s2>&quot;selected_tab&quot;</span><span class=p>:</span> <span class=n>selected_tab</span><span class=p>,</span>
<a id=__codelineno-1-75 name=__codelineno-1-75 href=#__codelineno-1-75></a> <span class=p>}</span>
<a id=__codelineno-1-76 name=__codelineno-1-76 href=#__codelineno-1-76></a>
<a id=__codelineno-1-77 name=__codelineno-1-77 href=#__codelineno-1-77></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>t.django_html</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-78 name=__codelineno-1-78 href=#__codelineno-1-78></a> <span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
<a id=__codelineno-1-79 name=__codelineno-1-79 href=#__codelineno-1-79></a> <span class=p>&lt;</span><span class=nt>div</span>
<a id=__codelineno-1-80 name=__codelineno-1-80 href=#__codelineno-1-80></a> <span class=na>x-data</span><span class=o>=</span><span class=s>&quot;{</span>
<a id=__codelineno-1-81 name=__codelineno-1-81 href=#__codelineno-1-81></a><span class=s> selectedTab: &#39;</span><span class=cp>{{</span> <span class=nv>selected_tab</span> <span class=cp>}}</span><span class=s>&#39;,</span>
<a id=__codelineno-1-82 name=__codelineno-1-82 href=#__codelineno-1-82></a><span class=s> }&quot;</span>
<a id=__codelineno-1-83 name=__codelineno-1-83 href=#__codelineno-1-83></a> <span class=cp>{%</span> <span class=k>html_attrs</span>
<a id=__codelineno-1-84 name=__codelineno-1-84 href=#__codelineno-1-84></a> <span class=nv>container_attrs</span>
<a id=__codelineno-1-85 name=__codelineno-1-85 href=#__codelineno-1-85></a> <span class=nv>id</span><span class=o>=</span><span class=nv>id</span>
<a id=__codelineno-1-86 name=__codelineno-1-86 href=#__codelineno-1-86></a> <span class=cp>%}</span>
<a id=__codelineno-1-87 name=__codelineno-1-87 href=#__codelineno-1-87></a> <span class=p>&gt;</span>
<a id=__codelineno-1-88 name=__codelineno-1-88 href=#__codelineno-1-88></a> <span class=p>&lt;</span><span class=nt>div</span>
<a id=__codelineno-1-89 name=__codelineno-1-89 href=#__codelineno-1-89></a> <span class=cp>{%</span> <span class=k>html_attrs</span>
<a id=__codelineno-1-90 name=__codelineno-1-90 href=#__codelineno-1-90></a> <span class=nv>tablist_attrs</span>
<a id=__codelineno-1-91 name=__codelineno-1-91 href=#__codelineno-1-91></a> <span class=nv>role</span><span class=o>=</span><span class=s2>&quot;tablist&quot;</span>
<a id=__codelineno-1-92 name=__codelineno-1-92 href=#__codelineno-1-92></a> <span class=nv>aria-label</span><span class=o>=</span><span class=nv>name</span>
<a id=__codelineno-1-93 name=__codelineno-1-93 href=#__codelineno-1-93></a> <span class=cp>%}</span>
<a id=__codelineno-1-94 name=__codelineno-1-94 href=#__codelineno-1-94></a> <span class=p>&gt;</span>
<a id=__codelineno-1-95 name=__codelineno-1-95 href=#__codelineno-1-95></a> <span class=cp>{%</span> <span class=k>for</span> <span class=nv>tab_datum</span><span class=o>,</span> <span class=nv>is_hidden</span> <span class=k>in</span> <span class=nv>tab_data</span> <span class=cp>%}</span>
<a id=__codelineno-1-96 name=__codelineno-1-96 href=#__codelineno-1-96></a> <span class=p>&lt;</span><span class=nt>button</span>
<a id=__codelineno-1-97 name=__codelineno-1-97 href=#__codelineno-1-97></a> <span class=na>:aria-selected</span><span class=o>=</span><span class=s>&quot;selectedTab === &#39;</span><span class=cp>{{</span> <span class=nv>tab_datum.tab_id</span> <span class=cp>}}</span><span class=s>&#39;&quot;</span>
<a id=__codelineno-1-98 name=__codelineno-1-98 href=#__codelineno-1-98></a> <span class=err>@</span><span class=na>click</span><span class=o>=</span><span class=s>&quot;selectedTab = &#39;</span><span class=cp>{{</span> <span class=nv>tab_datum.tab_id</span> <span class=cp>}}</span><span class=s>&#39;&quot;</span>
<a id=__codelineno-1-99 name=__codelineno-1-99 href=#__codelineno-1-99></a> <span class=cp>{%</span> <span class=k>html_attrs</span>
<a id=__codelineno-1-100 name=__codelineno-1-100 href=#__codelineno-1-100></a> <span class=nv>tab_attrs</span>
<a id=__codelineno-1-101 name=__codelineno-1-101 href=#__codelineno-1-101></a> <span class=nv>id</span><span class=o>=</span><span class=nv>tab_datum.tab_id</span>
<a id=__codelineno-1-102 name=__codelineno-1-102 href=#__codelineno-1-102></a> <span class=nv>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span>
<a id=__codelineno-1-103 name=__codelineno-1-103 href=#__codelineno-1-103></a> <span class=nv>aria-controls</span><span class=o>=</span><span class=nv>tab_datum.tabpanel_id</span>
<a id=__codelineno-1-104 name=__codelineno-1-104 href=#__codelineno-1-104></a> <span class=nv>disabled</span><span class=o>=</span><span class=nv>tab_datum.disabled</span>
<a id=__codelineno-1-105 name=__codelineno-1-105 href=#__codelineno-1-105></a> <span class=cp>%}</span>
<a id=__codelineno-1-106 name=__codelineno-1-106 href=#__codelineno-1-106></a> <span class=p>&gt;</span>
<a id=__codelineno-1-107 name=__codelineno-1-107 href=#__codelineno-1-107></a> <span class=cp>{{</span> <span class=nv>tab_datum.header</span> <span class=cp>}}</span>
<a id=__codelineno-1-108 name=__codelineno-1-108 href=#__codelineno-1-108></a> <span class=p>&lt;/</span><span class=nt>button</span><span class=p>&gt;</span>
<a id=__codelineno-1-109 name=__codelineno-1-109 href=#__codelineno-1-109></a> <span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
<a id=__codelineno-1-110 name=__codelineno-1-110 href=#__codelineno-1-110></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-111 name=__codelineno-1-111 href=#__codelineno-1-111></a> <span class=cp>{%</span> <span class=k>for</span> <span class=nv>tab_datum</span><span class=o>,</span> <span class=nv>is_hidden</span> <span class=k>in</span> <span class=nv>tab_data</span> <span class=cp>%}</span>
<a id=__codelineno-1-112 name=__codelineno-1-112 href=#__codelineno-1-112></a> <span class=p>&lt;</span><span class=nt>article</span>
<a id=__codelineno-1-113 name=__codelineno-1-113 href=#__codelineno-1-113></a> <span class=na>:hidden</span><span class=o>=</span><span class=s>&quot;selectedTab != &#39;</span><span class=cp>{{</span> <span class=nv>tab_datum.tab_id</span> <span class=cp>}}</span><span class=s>&#39;&quot;</span>
<a id=__codelineno-1-114 name=__codelineno-1-114 href=#__codelineno-1-114></a> <span class=cp>{%</span> <span class=k>html_attrs</span>
<a id=__codelineno-1-115 name=__codelineno-1-115 href=#__codelineno-1-115></a> <span class=nv>tabpanel_attrs</span>
<a id=__codelineno-1-116 name=__codelineno-1-116 href=#__codelineno-1-116></a> <span class=nv>hidden</span><span class=o>=</span><span class=nv>is_hidden</span>
<a id=__codelineno-1-117 name=__codelineno-1-117 href=#__codelineno-1-117></a> <span class=nv>role</span><span class=o>=</span><span class=s2>&quot;tabpanel&quot;</span>
<a id=__codelineno-1-118 name=__codelineno-1-118 href=#__codelineno-1-118></a> <span class=nv>id</span><span class=o>=</span><span class=nv>tab_datum.tabpanel_id</span>
<a id=__codelineno-1-119 name=__codelineno-1-119 href=#__codelineno-1-119></a> <span class=nv>aria-labelledby</span><span class=o>=</span><span class=nv>tab_datum.tab_id</span>
<a id=__codelineno-1-120 name=__codelineno-1-120 href=#__codelineno-1-120></a> <span class=cp>%}</span>
<a id=__codelineno-1-121 name=__codelineno-1-121 href=#__codelineno-1-121></a> <span class=p>&gt;</span>
<a id=__codelineno-1-122 name=__codelineno-1-122 href=#__codelineno-1-122></a> <span class=cp>{{</span> <span class=nv>tab_datum.content</span> <span class=cp>}}</span>
<a id=__codelineno-1-123 name=__codelineno-1-123 href=#__codelineno-1-123></a> <span class=p>&lt;/</span><span class=nt>article</span><span class=p>&gt;</span>
<a id=__codelineno-1-124 name=__codelineno-1-124 href=#__codelineno-1-124></a> <span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
<a id=__codelineno-1-125 name=__codelineno-1-125 href=#__codelineno-1-125></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-126 name=__codelineno-1-126 href=#__codelineno-1-126></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-127 name=__codelineno-1-127 href=#__codelineno-1-127></a>
<a id=__codelineno-1-128 name=__codelineno-1-128 href=#__codelineno-1-128></a> <span class=nv>css</span><span class=p>:</span> <span class=nc>t.css</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-129 name=__codelineno-1-129 href=#__codelineno-1-129></a><span class=w> </span><span class=c>/* based on https://codepen.io/brettsmason/pen/zYGEgZP */</span>
<a id=__codelineno-1-130 name=__codelineno-1-130 href=#__codelineno-1-130></a>
<a id=__codelineno-1-131 name=__codelineno-1-131 href=#__codelineno-1-131></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tablist&quot;</span><span class=o>]</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-132 name=__codelineno-1-132 href=#__codelineno-1-132></a><span class=w> </span><span class=k>margin</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mf>-0.1</span><span class=kt>em</span><span class=p>;</span>
<a id=__codelineno-1-133 name=__codelineno-1-133 href=#__codelineno-1-133></a><span class=w> </span><span class=k>overflow</span><span class=p>:</span><span class=w> </span><span class=kc>visible</span><span class=p>;</span>
<a id=__codelineno-1-134 name=__codelineno-1-134 href=#__codelineno-1-134></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-135 name=__codelineno-1-135 href=#__codelineno-1-135></a>
<a id=__codelineno-1-136 name=__codelineno-1-136 href=#__codelineno-1-136></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-137 name=__codelineno-1-137 href=#__codelineno-1-137></a><span class=w> </span><span class=k>position</span><span class=p>:</span><span class=w> </span><span class=kc>relative</span><span class=p>;</span>
<a id=__codelineno-1-138 name=__codelineno-1-138 href=#__codelineno-1-138></a><span class=w> </span><span class=k>margin</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-139 name=__codelineno-1-139 href=#__codelineno-1-139></a><span class=w> </span><span class=k>padding</span><span class=p>:</span><span class=w> </span><span class=mf>0.3</span><span class=kt>em</span><span class=w> </span><span class=mf>0.5</span><span class=kt>em</span><span class=w> </span><span class=mf>0.4</span><span class=kt>em</span><span class=p>;</span>
<a id=__codelineno-1-140 name=__codelineno-1-140 href=#__codelineno-1-140></a><span class=w> </span><span class=k>border</span><span class=p>:</span><span class=w> </span><span class=mi>1</span><span class=kt>px</span><span class=w> </span><span class=kc>solid</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>219</span><span class=p>,</span><span class=w> </span><span class=mi>1</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>72</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-141 name=__codelineno-1-141 href=#__codelineno-1-141></a><span class=w> </span><span class=k>border-radius</span><span class=p>:</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-142 name=__codelineno-1-142 href=#__codelineno-1-142></a><span class=w> </span><span class=k>box-shadow</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>219</span><span class=p>,</span><span class=w> </span><span class=mi>1</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>72</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-143 name=__codelineno-1-143 href=#__codelineno-1-143></a><span class=w> </span><span class=k>overflow</span><span class=p>:</span><span class=w> </span><span class=kc>visible</span><span class=p>;</span>
<a id=__codelineno-1-144 name=__codelineno-1-144 href=#__codelineno-1-144></a><span class=w> </span><span class=k>font-family</span><span class=p>:</span><span class=w> </span><span class=kc>inherit</span><span class=p>;</span>
<a id=__codelineno-1-145 name=__codelineno-1-145 href=#__codelineno-1-145></a><span class=w> </span><span class=k>font-size</span><span class=p>:</span><span class=w> </span><span class=kc>inherit</span><span class=p>;</span>
<a id=__codelineno-1-146 name=__codelineno-1-146 href=#__codelineno-1-146></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>220</span><span class=p>,</span><span class=w> </span><span class=mi>20</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>94</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-147 name=__codelineno-1-147 href=#__codelineno-1-147></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-148 name=__codelineno-1-148 href=#__codelineno-1-148></a>
<a id=__codelineno-1-149 name=__codelineno-1-149 href=#__codelineno-1-149></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>hover</span><span class=p>::</span><span class=nd>before</span><span class=o>,</span>
<a id=__codelineno-1-150 name=__codelineno-1-150 href=#__codelineno-1-150></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>focus</span><span class=p>::</span><span class=nd>before</span><span class=o>,</span>
<a id=__codelineno-1-151 name=__codelineno-1-151 href=#__codelineno-1-151></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>][</span><span class=nt>aria-selected</span><span class=o>=</span><span class=s2>&quot;true&quot;</span><span class=o>]</span><span class=p>::</span><span class=nd>before</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-152 name=__codelineno-1-152 href=#__codelineno-1-152></a><span class=w> </span><span class=k>position</span><span class=p>:</span><span class=w> </span><span class=kc>absolute</span><span class=p>;</span>
<a id=__codelineno-1-153 name=__codelineno-1-153 href=#__codelineno-1-153></a><span class=w> </span><span class=k>bottom</span><span class=p>:</span><span class=w> </span><span class=mi>100</span><span class=kt>%</span><span class=p>;</span>
<a id=__codelineno-1-154 name=__codelineno-1-154 href=#__codelineno-1-154></a><span class=w> </span><span class=k>right</span><span class=p>:</span><span class=w> </span><span class=mi>-1</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-1-155 name=__codelineno-1-155 href=#__codelineno-1-155></a><span class=w> </span><span class=k>left</span><span class=p>:</span><span class=w> </span><span class=mi>-1</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-1-156 name=__codelineno-1-156 href=#__codelineno-1-156></a><span class=w> </span><span class=k>border-radius</span><span class=p>:</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-157 name=__codelineno-1-157 href=#__codelineno-1-157></a><span class=w> </span><span class=k>border-top</span><span class=p>:</span><span class=w> </span><span class=mi>3</span><span class=kt>px</span><span class=w> </span><span class=kc>solid</span><span class=w> </span><span class=n>LinkText</span><span class=p>;</span>
<a id=__codelineno-1-158 name=__codelineno-1-158 href=#__codelineno-1-158></a><span class=w> </span><span class=k>content</span><span class=p>:</span><span class=w> </span><span class=s1>&#39;&#39;</span><span class=p>;</span>
<a id=__codelineno-1-159 name=__codelineno-1-159 href=#__codelineno-1-159></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-160 name=__codelineno-1-160 href=#__codelineno-1-160></a>
<a id=__codelineno-1-161 name=__codelineno-1-161 href=#__codelineno-1-161></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>][</span><span class=nt>aria-selected</span><span class=o>=</span><span class=s2>&quot;true&quot;</span><span class=o>]</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-162 name=__codelineno-1-162 href=#__codelineno-1-162></a><span class=w> </span><span class=k>border-radius</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-163 name=__codelineno-1-163 href=#__codelineno-1-163></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>220</span><span class=p>,</span><span class=w> </span><span class=mi>43</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>99</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-164 name=__codelineno-1-164 href=#__codelineno-1-164></a><span class=w> </span><span class=k>outline</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-165 name=__codelineno-1-165 href=#__codelineno-1-165></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-166 name=__codelineno-1-166 href=#__codelineno-1-166></a>
<a id=__codelineno-1-167 name=__codelineno-1-167 href=#__codelineno-1-167></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>][</span><span class=nt>aria-selected</span><span class=o>=</span><span class=s2>&quot;true&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>not</span><span class=o>(</span><span class=p>:</span><span class=nd>focus</span><span class=o>)</span><span class=p>:</span><span class=nd>not</span><span class=o>(</span><span class=p>:</span><span class=nd>hover</span><span class=o>)</span><span class=p>::</span><span class=nd>before</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-168 name=__codelineno-1-168 href=#__codelineno-1-168></a><span class=w> </span><span class=k>border-top</span><span class=p>:</span><span class=w> </span><span class=mi>5</span><span class=kt>px</span><span class=w> </span><span class=kc>solid</span><span class=w> </span><span class=n>SelectedItem</span><span class=p>;</span>
<a id=__codelineno-1-169 name=__codelineno-1-169 href=#__codelineno-1-169></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-170 name=__codelineno-1-170 href=#__codelineno-1-170></a>
<a id=__codelineno-1-171 name=__codelineno-1-171 href=#__codelineno-1-171></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>][</span><span class=nt>aria-selected</span><span class=o>=</span><span class=s2>&quot;true&quot;</span><span class=o>]</span><span class=p>::</span><span class=nd>after</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-172 name=__codelineno-1-172 href=#__codelineno-1-172></a><span class=w> </span><span class=k>position</span><span class=p>:</span><span class=w> </span><span class=kc>absolute</span><span class=p>;</span>
<a id=__codelineno-1-173 name=__codelineno-1-173 href=#__codelineno-1-173></a><span class=w> </span><span class=k>z-index</span><span class=p>:</span><span class=w> </span><span class=mi>3</span><span class=p>;</span>
<a id=__codelineno-1-174 name=__codelineno-1-174 href=#__codelineno-1-174></a><span class=w> </span><span class=k>bottom</span><span class=p>:</span><span class=w> </span><span class=mi>-1</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-1-175 name=__codelineno-1-175 href=#__codelineno-1-175></a><span class=w> </span><span class=k>right</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-176 name=__codelineno-1-176 href=#__codelineno-1-176></a><span class=w> </span><span class=k>left</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-177 name=__codelineno-1-177 href=#__codelineno-1-177></a><span class=w> </span><span class=k>height</span><span class=p>:</span><span class=w> </span><span class=mf>0.3</span><span class=kt>em</span><span class=p>;</span>
<a id=__codelineno-1-178 name=__codelineno-1-178 href=#__codelineno-1-178></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>220</span><span class=p>,</span><span class=w> </span><span class=mi>43</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>99</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-179 name=__codelineno-1-179 href=#__codelineno-1-179></a><span class=w> </span><span class=k>box-shadow</span><span class=p>:</span><span class=w> </span><span class=kc>none</span><span class=p>;</span>
<a id=__codelineno-1-180 name=__codelineno-1-180 href=#__codelineno-1-180></a><span class=w> </span><span class=k>content</span><span class=p>:</span><span class=w> </span><span class=s1>&#39;&#39;</span><span class=p>;</span>
<a id=__codelineno-1-181 name=__codelineno-1-181 href=#__codelineno-1-181></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-182 name=__codelineno-1-182 href=#__codelineno-1-182></a>
<a id=__codelineno-1-183 name=__codelineno-1-183 href=#__codelineno-1-183></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>hover</span><span class=o>,</span>
<a id=__codelineno-1-184 name=__codelineno-1-184 href=#__codelineno-1-184></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>focus</span><span class=o>,</span>
<a id=__codelineno-1-185 name=__codelineno-1-185 href=#__codelineno-1-185></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>active</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-186 name=__codelineno-1-186 href=#__codelineno-1-186></a><span class=w> </span><span class=k>outline</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-187 name=__codelineno-1-187 href=#__codelineno-1-187></a><span class=w> </span><span class=k>border-radius</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-188 name=__codelineno-1-188 href=#__codelineno-1-188></a><span class=w> </span><span class=k>color</span><span class=p>:</span><span class=w> </span><span class=kc>inherit</span><span class=p>;</span>
<a id=__codelineno-1-189 name=__codelineno-1-189 href=#__codelineno-1-189></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-190 name=__codelineno-1-190 href=#__codelineno-1-190></a>
<a id=__codelineno-1-191 name=__codelineno-1-191 href=#__codelineno-1-191></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>hover</span><span class=p>::</span><span class=nd>before</span><span class=o>,</span>
<a id=__codelineno-1-192 name=__codelineno-1-192 href=#__codelineno-1-192></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tab&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>focus</span><span class=p>::</span><span class=nd>before</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-193 name=__codelineno-1-193 href=#__codelineno-1-193></a><span class=w> </span><span class=k>border-color</span><span class=p>:</span><span class=w> </span><span class=n>LinkText</span><span class=p>;</span>
<a id=__codelineno-1-194 name=__codelineno-1-194 href=#__codelineno-1-194></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-195 name=__codelineno-1-195 href=#__codelineno-1-195></a>
<a id=__codelineno-1-196 name=__codelineno-1-196 href=#__codelineno-1-196></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tabpanel&quot;</span><span class=o>]</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-197 name=__codelineno-1-197 href=#__codelineno-1-197></a><span class=w> </span><span class=k>position</span><span class=p>:</span><span class=w> </span><span class=kc>relative</span><span class=p>;</span>
<a id=__codelineno-1-198 name=__codelineno-1-198 href=#__codelineno-1-198></a><span class=w> </span><span class=k>z-index</span><span class=p>:</span><span class=w> </span><span class=mi>2</span><span class=p>;</span>
<a id=__codelineno-1-199 name=__codelineno-1-199 href=#__codelineno-1-199></a><span class=w> </span><span class=k>padding</span><span class=p>:</span><span class=w> </span><span class=mf>0.5</span><span class=kt>em</span><span class=w> </span><span class=mf>0.5</span><span class=kt>em</span><span class=w> </span><span class=mf>0.7</span><span class=kt>em</span><span class=p>;</span>
<a id=__codelineno-1-200 name=__codelineno-1-200 href=#__codelineno-1-200></a><span class=w> </span><span class=k>border</span><span class=p>:</span><span class=w> </span><span class=mi>1</span><span class=kt>px</span><span class=w> </span><span class=kc>solid</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>219</span><span class=p>,</span><span class=w> </span><span class=mi>1</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>72</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-201 name=__codelineno-1-201 href=#__codelineno-1-201></a><span class=w> </span><span class=k>border-radius</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=p>;</span>
<a id=__codelineno-1-202 name=__codelineno-1-202 href=#__codelineno-1-202></a><span class=w> </span><span class=k>box-shadow</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>219</span><span class=p>,</span><span class=w> </span><span class=mi>1</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>72</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-203 name=__codelineno-1-203 href=#__codelineno-1-203></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=nb>hsl</span><span class=p>(</span><span class=mi>220</span><span class=p>,</span><span class=w> </span><span class=mi>43</span><span class=kt>%</span><span class=p>,</span><span class=w> </span><span class=mi>99</span><span class=kt>%</span><span class=p>);</span>
<a id=__codelineno-1-204 name=__codelineno-1-204 href=#__codelineno-1-204></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-205 name=__codelineno-1-205 href=#__codelineno-1-205></a>
<a id=__codelineno-1-206 name=__codelineno-1-206 href=#__codelineno-1-206></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tabpanel&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>focus</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-207 name=__codelineno-1-207 href=#__codelineno-1-207></a><span class=w> </span><span class=k>border-color</span><span class=p>:</span><span class=w> </span><span class=n>LinkText</span><span class=p>;</span>
<a id=__codelineno-1-208 name=__codelineno-1-208 href=#__codelineno-1-208></a><span class=w> </span><span class=k>box-shadow</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=n>LinkText</span><span class=p>;</span>
<a id=__codelineno-1-209 name=__codelineno-1-209 href=#__codelineno-1-209></a><span class=w> </span><span class=k>outline</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-210 name=__codelineno-1-210 href=#__codelineno-1-210></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-211 name=__codelineno-1-211 href=#__codelineno-1-211></a>
<a id=__codelineno-1-212 name=__codelineno-1-212 href=#__codelineno-1-212></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tabpanel&quot;</span><span class=o>]</span><span class=p>:</span><span class=nd>focus</span><span class=p>::</span><span class=nd>after</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-213 name=__codelineno-1-213 href=#__codelineno-1-213></a><span class=w> </span><span class=k>position</span><span class=p>:</span><span class=w> </span><span class=kc>absolute</span><span class=p>;</span>
<a id=__codelineno-1-214 name=__codelineno-1-214 href=#__codelineno-1-214></a><span class=w> </span><span class=k>bottom</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-215 name=__codelineno-1-215 href=#__codelineno-1-215></a><span class=w> </span><span class=k>right</span><span class=p>:</span><span class=w> </span><span class=mi>-1</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-1-216 name=__codelineno-1-216 href=#__codelineno-1-216></a><span class=w> </span><span class=k>left</span><span class=p>:</span><span class=w> </span><span class=mi>-1</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-1-217 name=__codelineno-1-217 href=#__codelineno-1-217></a><span class=w> </span><span class=k>border-bottom</span><span class=p>:</span><span class=w> </span><span class=mi>3</span><span class=kt>px</span><span class=w> </span><span class=kc>solid</span><span class=w> </span><span class=n>LinkText</span><span class=p>;</span>
<a id=__codelineno-1-218 name=__codelineno-1-218 href=#__codelineno-1-218></a><span class=w> </span><span class=k>border-radius</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mi>0</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=w> </span><span class=mf>0.2</span><span class=kt>em</span><span class=p>;</span>
<a id=__codelineno-1-219 name=__codelineno-1-219 href=#__codelineno-1-219></a><span class=w> </span><span class=k>content</span><span class=p>:</span><span class=w> </span><span class=s1>&#39;&#39;</span><span class=p>;</span>
<a id=__codelineno-1-220 name=__codelineno-1-220 href=#__codelineno-1-220></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-221 name=__codelineno-1-221 href=#__codelineno-1-221></a>
<a id=__codelineno-1-222 name=__codelineno-1-222 href=#__codelineno-1-222></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tabpanel&quot;</span><span class=o>]</span><span class=w> </span><span class=nt>p</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-223 name=__codelineno-1-223 href=#__codelineno-1-223></a><span class=w> </span><span class=k>margin</span><span class=p>:</span><span class=w> </span><span class=mi>0</span><span class=p>;</span>
<a id=__codelineno-1-224 name=__codelineno-1-224 href=#__codelineno-1-224></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-225 name=__codelineno-1-225 href=#__codelineno-1-225></a>
<a id=__codelineno-1-226 name=__codelineno-1-226 href=#__codelineno-1-226></a><span class=w> </span><span class=o>[</span><span class=nt>role</span><span class=o>=</span><span class=s2>&quot;tabpanel&quot;</span><span class=o>]</span><span class=w> </span><span class=o>*</span><span class=w> </span><span class=o>+</span><span class=w> </span><span class=nt>p</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-227 name=__codelineno-1-227 href=#__codelineno-1-227></a><span class=w> </span><span class=k>margin-top</span><span class=p>:</span><span class=w> </span><span class=mi>1</span><span class=kt>em</span><span class=p>;</span>
<a id=__codelineno-1-228 name=__codelineno-1-228 href=#__codelineno-1-228></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-229 name=__codelineno-1-229 href=#__codelineno-1-229></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-230 name=__codelineno-1-230 href=#__codelineno-1-230></a>
<a id=__codelineno-1-231 name=__codelineno-1-231 href=#__codelineno-1-231></a>
<a id=__codelineno-1-232 name=__codelineno-1-232 href=#__codelineno-1-232></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;Tablist&quot;</span><span class=p>)</span>
<a id=__codelineno-1-233 name=__codelineno-1-233 href=#__codelineno-1-233></a><span class=k>class</span><span class=w> </span><span class=nc>Tablist</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-234 name=__codelineno-1-234 href=#__codelineno-1-234></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-235 name=__codelineno-1-235 href=#__codelineno-1-235></a><span class=sd> Dynamic tabs with [AlpineJS](https://alpinejs.dev/).</span>
<a id=__codelineno-1-236 name=__codelineno-1-236 href=#__codelineno-1-236></a>
<a id=__codelineno-1-237 name=__codelineno-1-237 href=#__codelineno-1-237></a><span class=sd> After the input is processed, this component delegates to an internal implementation</span>
<a id=__codelineno-1-238 name=__codelineno-1-238 href=#__codelineno-1-238></a><span class=sd> component that renders the content.</span>
<a id=__codelineno-1-239 name=__codelineno-1-239 href=#__codelineno-1-239></a>
<a id=__codelineno-1-240 name=__codelineno-1-240 href=#__codelineno-1-240></a><span class=sd> `name` identifies the tablist and is used as a WAI-ARIA label</span>
<a id=__codelineno-1-241 name=__codelineno-1-241 href=#__codelineno-1-241></a>
<a id=__codelineno-1-242 name=__codelineno-1-242 href=#__codelineno-1-242></a><span class=sd> `id`, by default, is a sligified `name`, we could be used to preselect a tab based</span>
<a id=__codelineno-1-243 name=__codelineno-1-243 href=#__codelineno-1-243></a><span class=sd> on query parameters (TODO)</span>
<a id=__codelineno-1-244 name=__codelineno-1-244 href=#__codelineno-1-244></a>
<a id=__codelineno-1-245 name=__codelineno-1-245 href=#__codelineno-1-245></a><span class=sd> Example:</span>
<a id=__codelineno-1-246 name=__codelineno-1-246 href=#__codelineno-1-246></a><span class=sd> ```</span>
<a id=__codelineno-1-247 name=__codelineno-1-247 href=#__codelineno-1-247></a><span class=sd> {% component &quot;Tablist&quot; id=&quot;my-tablist&quot; name=&quot;My Tabs&quot; %}</span>
<a id=__codelineno-1-248 name=__codelineno-1-248 href=#__codelineno-1-248></a><span class=sd> {% component Tab header=&quot;Tab 1&quot; %}</span>
<a id=__codelineno-1-249 name=__codelineno-1-249 href=#__codelineno-1-249></a><span class=sd> This is the content of Tab 1</span>
<a id=__codelineno-1-250 name=__codelineno-1-250 href=#__codelineno-1-250></a><span class=sd> {% endcomponent %}</span>
<a id=__codelineno-1-251 name=__codelineno-1-251 href=#__codelineno-1-251></a><span class=sd> {% component Tab header=&quot;Tab 2&quot; disabled=True %}</span>
<a id=__codelineno-1-252 name=__codelineno-1-252 href=#__codelineno-1-252></a><span class=sd> This is the content of Tab 2</span>
<a id=__codelineno-1-253 name=__codelineno-1-253 href=#__codelineno-1-253></a><span class=sd> {% endcomponent %}</span>
<a id=__codelineno-1-254 name=__codelineno-1-254 href=#__codelineno-1-254></a><span class=sd> {% endcomponent %}</span>
<a id=__codelineno-1-255 name=__codelineno-1-255 href=#__codelineno-1-255></a><span class=sd> ```</span>
<a id=__codelineno-1-256 name=__codelineno-1-256 href=#__codelineno-1-256></a>
<a id=__codelineno-1-257 name=__codelineno-1-257 href=#__codelineno-1-257></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-1-258 name=__codelineno-1-258 href=#__codelineno-1-258></a>
<a id=__codelineno-1-259 name=__codelineno-1-259 href=#__codelineno-1-259></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>t.django_html</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-260 name=__codelineno-1-260 href=#__codelineno-1-260></a> <span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
<a id=__codelineno-1-261 name=__codelineno-1-261 href=#__codelineno-1-261></a> <span class=cp>{%</span> <span class=k>provide</span> <span class=s2>&quot;_tab&quot;</span> <span class=p>..</span><span class=nv>.tab_context</span> <span class=cp>%}</span>
<a id=__codelineno-1-262 name=__codelineno-1-262 href=#__codelineno-1-262></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-1-263 name=__codelineno-1-263 href=#__codelineno-1-263></a> <span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
<a id=__codelineno-1-264 name=__codelineno-1-264 href=#__codelineno-1-264></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-265 name=__codelineno-1-265 href=#__codelineno-1-265></a>
<a id=__codelineno-1-266 name=__codelineno-1-266 href=#__codelineno-1-266></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-267 name=__codelineno-1-267 href=#__codelineno-1-267></a> <span class=nb>id</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-268 name=__codelineno-1-268 href=#__codelineno-1-268></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=s2>&quot;Tabs&quot;</span>
<a id=__codelineno-1-269 name=__codelineno-1-269 href=#__codelineno-1-269></a> <span class=n>selected_tab</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-270 name=__codelineno-1-270 href=#__codelineno-1-270></a> <span class=n>container_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-271 name=__codelineno-1-271 href=#__codelineno-1-271></a> <span class=n>tablist_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-272 name=__codelineno-1-272 href=#__codelineno-1-272></a> <span class=n>tab_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-273 name=__codelineno-1-273 href=#__codelineno-1-273></a> <span class=n>tabpanel_attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-274 name=__codelineno-1-274 href=#__codelineno-1-274></a>
<a id=__codelineno-1-275 name=__codelineno-1-275 href=#__codelineno-1-275></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-276 name=__codelineno-1-276 href=#__codelineno-1-276></a> <span class=bp>self</span><span class=o>.</span><span class=n>tablist_id</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>id</span> <span class=ow>or</span> <span class=n>slugify</span><span class=p>(</span><span class=n>kwargs</span><span class=o>.</span><span class=n>name</span><span class=p>)</span>
<a id=__codelineno-1-277 name=__codelineno-1-277 href=#__codelineno-1-277></a> <span class=bp>self</span><span class=o>.</span><span class=n>tab_data</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=n>TabDatum</span><span class=p>]</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-1-278 name=__codelineno-1-278 href=#__codelineno-1-278></a>
<a id=__codelineno-1-279 name=__codelineno-1-279 href=#__codelineno-1-279></a> <span class=n>tab_context</span> <span class=o>=</span> <span class=n>TabContext</span><span class=p>(</span>
<a id=__codelineno-1-280 name=__codelineno-1-280 href=#__codelineno-1-280></a> <span class=nb>id</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>tablist_id</span><span class=p>,</span>
<a id=__codelineno-1-281 name=__codelineno-1-281 href=#__codelineno-1-281></a> <span class=n>tab_data</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>tab_data</span><span class=p>,</span>
<a id=__codelineno-1-282 name=__codelineno-1-282 href=#__codelineno-1-282></a> <span class=n>enabled</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-1-283 name=__codelineno-1-283 href=#__codelineno-1-283></a> <span class=p>)</span>
<a id=__codelineno-1-284 name=__codelineno-1-284 href=#__codelineno-1-284></a>
<a id=__codelineno-1-285 name=__codelineno-1-285 href=#__codelineno-1-285></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-1-286 name=__codelineno-1-286 href=#__codelineno-1-286></a> <span class=s2>&quot;tab_context&quot;</span><span class=p>:</span> <span class=n>tab_context</span><span class=o>.</span><span class=n>_asdict</span><span class=p>(),</span>
<a id=__codelineno-1-287 name=__codelineno-1-287 href=#__codelineno-1-287></a> <span class=p>}</span>
<a id=__codelineno-1-288 name=__codelineno-1-288 href=#__codelineno-1-288></a>
<a id=__codelineno-1-289 name=__codelineno-1-289 href=#__codelineno-1-289></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>,</span> <span class=n>result</span><span class=p>,</span> <span class=n>error</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
<a id=__codelineno-1-290 name=__codelineno-1-290 href=#__codelineno-1-290></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-291 name=__codelineno-1-291 href=#__codelineno-1-291></a><span class=sd> Render the tab set.</span>
<a id=__codelineno-1-292 name=__codelineno-1-292 href=#__codelineno-1-292></a>
<a id=__codelineno-1-293 name=__codelineno-1-293 href=#__codelineno-1-293></a><span class=sd> By the time we get here, all child Tab components should have been rendered,</span>
<a id=__codelineno-1-294 name=__codelineno-1-294 href=#__codelineno-1-294></a><span class=sd> and they should&#39;ve populated the tablist.</span>
<a id=__codelineno-1-295 name=__codelineno-1-295 href=#__codelineno-1-295></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-1-296 name=__codelineno-1-296 href=#__codelineno-1-296></a> <span class=k>if</span> <span class=n>error</span> <span class=ow>or</span> <span class=n>result</span> <span class=ow>is</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-1-297 name=__codelineno-1-297 href=#__codelineno-1-297></a> <span class=k>return</span> <span class=kc>None</span>
<a id=__codelineno-1-298 name=__codelineno-1-298 href=#__codelineno-1-298></a>
<a id=__codelineno-1-299 name=__codelineno-1-299 href=#__codelineno-1-299></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Tablist</span><span class=o>.</span><span class=n>Kwargs</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span>
<a id=__codelineno-1-300 name=__codelineno-1-300 href=#__codelineno-1-300></a>
<a id=__codelineno-1-301 name=__codelineno-1-301 href=#__codelineno-1-301></a> <span class=c1># Render the TablistImpl component in place of Tablist.</span>
<a id=__codelineno-1-302 name=__codelineno-1-302 href=#__codelineno-1-302></a> <span class=k>return</span> <span class=n>_TablistImpl</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-1-303 name=__codelineno-1-303 href=#__codelineno-1-303></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>_TablistImpl</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>(</span>
<a id=__codelineno-1-304 name=__codelineno-1-304 href=#__codelineno-1-304></a> <span class=c1># Access variables we&#39;ve defined in get_template_data</span>
<a id=__codelineno-1-305 name=__codelineno-1-305 href=#__codelineno-1-305></a> <span class=nb>id</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>tablist_id</span><span class=p>,</span>
<a id=__codelineno-1-306 name=__codelineno-1-306 href=#__codelineno-1-306></a> <span class=n>tab_data</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>tab_data</span><span class=p>,</span>
<a id=__codelineno-1-307 name=__codelineno-1-307 href=#__codelineno-1-307></a> <span class=n>name</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>name</span><span class=p>,</span>
<a id=__codelineno-1-308 name=__codelineno-1-308 href=#__codelineno-1-308></a> <span class=n>selected_tab</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>selected_tab</span><span class=p>,</span>
<a id=__codelineno-1-309 name=__codelineno-1-309 href=#__codelineno-1-309></a> <span class=n>container_attrs</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>container_attrs</span><span class=p>,</span>
<a id=__codelineno-1-310 name=__codelineno-1-310 href=#__codelineno-1-310></a> <span class=n>tablist_attrs</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>tablist_attrs</span><span class=p>,</span>
<a id=__codelineno-1-311 name=__codelineno-1-311 href=#__codelineno-1-311></a> <span class=n>tab_attrs</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>tab_attrs</span><span class=p>,</span>
<a id=__codelineno-1-312 name=__codelineno-1-312 href=#__codelineno-1-312></a> <span class=n>tabpanel_attrs</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>tabpanel_attrs</span><span class=p>,</span>
<a id=__codelineno-1-313 name=__codelineno-1-313 href=#__codelineno-1-313></a> <span class=p>),</span>
<a id=__codelineno-1-314 name=__codelineno-1-314 href=#__codelineno-1-314></a> <span class=n>deps_strategy</span><span class=o>=</span><span class=s2>&quot;ignore&quot;</span><span class=p>,</span>
<a id=__codelineno-1-315 name=__codelineno-1-315 href=#__codelineno-1-315></a> <span class=p>)</span>
<a id=__codelineno-1-316 name=__codelineno-1-316 href=#__codelineno-1-316></a>
<a id=__codelineno-1-317 name=__codelineno-1-317 href=#__codelineno-1-317></a>
<a id=__codelineno-1-318 name=__codelineno-1-318 href=#__codelineno-1-318></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;Tab&quot;</span><span class=p>)</span>
<a id=__codelineno-1-319 name=__codelineno-1-319 href=#__codelineno-1-319></a><span class=k>class</span><span class=w> </span><span class=nc>Tab</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-320 name=__codelineno-1-320 href=#__codelineno-1-320></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-321 name=__codelineno-1-321 href=#__codelineno-1-321></a><span class=sd> Individual tab, inside the default slot of the `Tablist` component.</span>
<a id=__codelineno-1-322 name=__codelineno-1-322 href=#__codelineno-1-322></a>
<a id=__codelineno-1-323 name=__codelineno-1-323 href=#__codelineno-1-323></a><span class=sd> Example:</span>
<a id=__codelineno-1-324 name=__codelineno-1-324 href=#__codelineno-1-324></a><span class=sd> ```</span>
<a id=__codelineno-1-325 name=__codelineno-1-325 href=#__codelineno-1-325></a><span class=sd> {% component &quot;Tablist&quot; id=&quot;my-tablist&quot; name=&quot;My Tabs&quot; %}</span>
<a id=__codelineno-1-326 name=__codelineno-1-326 href=#__codelineno-1-326></a><span class=sd> {% component Tab header=&quot;Tab 1&quot; %}</span>
<a id=__codelineno-1-327 name=__codelineno-1-327 href=#__codelineno-1-327></a><span class=sd> This is the content of Tab 1</span>
<a id=__codelineno-1-328 name=__codelineno-1-328 href=#__codelineno-1-328></a><span class=sd> {% endcomponent %}</span>
<a id=__codelineno-1-329 name=__codelineno-1-329 href=#__codelineno-1-329></a><span class=sd> {% component Tab header=&quot;Tab 2&quot; disabled=True %}</span>
<a id=__codelineno-1-330 name=__codelineno-1-330 href=#__codelineno-1-330></a><span class=sd> This is the content of Tab 2</span>
<a id=__codelineno-1-331 name=__codelineno-1-331 href=#__codelineno-1-331></a><span class=sd> {% endcomponent %}</span>
<a id=__codelineno-1-332 name=__codelineno-1-332 href=#__codelineno-1-332></a><span class=sd> {% endcomponent %}</span>
<a id=__codelineno-1-333 name=__codelineno-1-333 href=#__codelineno-1-333></a><span class=sd> ```</span>
<a id=__codelineno-1-334 name=__codelineno-1-334 href=#__codelineno-1-334></a>
<a id=__codelineno-1-335 name=__codelineno-1-335 href=#__codelineno-1-335></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-1-336 name=__codelineno-1-336 href=#__codelineno-1-336></a>
<a id=__codelineno-1-337 name=__codelineno-1-337 href=#__codelineno-1-337></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>t.django_html</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-338 name=__codelineno-1-338 href=#__codelineno-1-338></a> <span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
<a id=__codelineno-1-339 name=__codelineno-1-339 href=#__codelineno-1-339></a> <span class=cp>{%</span> <span class=k>provide</span> <span class=s2>&quot;_tab&quot;</span> <span class=p>..</span><span class=nv>.overriding_tab_context</span> <span class=cp>%}</span>
<a id=__codelineno-1-340 name=__codelineno-1-340 href=#__codelineno-1-340></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;content&quot;</span> <span class=nv>default</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-1-341 name=__codelineno-1-341 href=#__codelineno-1-341></a> <span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
<a id=__codelineno-1-342 name=__codelineno-1-342 href=#__codelineno-1-342></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-343 name=__codelineno-1-343 href=#__codelineno-1-343></a>
<a id=__codelineno-1-344 name=__codelineno-1-344 href=#__codelineno-1-344></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
<a id=__codelineno-1-345 name=__codelineno-1-345 href=#__codelineno-1-345></a> <span class=n>header</span><span class=p>:</span> <span class=nb>str</span>
<a id=__codelineno-1-346 name=__codelineno-1-346 href=#__codelineno-1-346></a> <span class=n>disabled</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>False</span>
<a id=__codelineno-1-347 name=__codelineno-1-347 href=#__codelineno-1-347></a> <span class=nb>id</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
<a id=__codelineno-1-348 name=__codelineno-1-348 href=#__codelineno-1-348></a>
<a id=__codelineno-1-349 name=__codelineno-1-349 href=#__codelineno-1-349></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-350 name=__codelineno-1-350 href=#__codelineno-1-350></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-351 name=__codelineno-1-351 href=#__codelineno-1-351></a><span class=sd> Access the tab data registered for the parent Tablist component.</span>
<a id=__codelineno-1-352 name=__codelineno-1-352 href=#__codelineno-1-352></a>
<a id=__codelineno-1-353 name=__codelineno-1-353 href=#__codelineno-1-353></a><span class=sd> This raises if we&#39;re not nested inside a Tablist component.</span>
<a id=__codelineno-1-354 name=__codelineno-1-354 href=#__codelineno-1-354></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-1-355 name=__codelineno-1-355 href=#__codelineno-1-355></a> <span class=n>tab_ctx</span><span class=p>:</span> <span class=n>TabContext</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;_tab&quot;</span><span class=p>)</span>
<a id=__codelineno-1-356 name=__codelineno-1-356 href=#__codelineno-1-356></a>
<a id=__codelineno-1-357 name=__codelineno-1-357 href=#__codelineno-1-357></a> <span class=c1># We accessed the _tab context, but we&#39;re inside ANOTHER Tab</span>
<a id=__codelineno-1-358 name=__codelineno-1-358 href=#__codelineno-1-358></a> <span class=k>if</span> <span class=ow>not</span> <span class=n>tab_ctx</span><span class=o>.</span><span class=n>enabled</span><span class=p>:</span>
<a id=__codelineno-1-359 name=__codelineno-1-359 href=#__codelineno-1-359></a> <span class=k>raise</span> <span class=ne>RuntimeError</span><span class=p>(</span>
<a id=__codelineno-1-360 name=__codelineno-1-360 href=#__codelineno-1-360></a> <span class=sa>f</span><span class=s2>&quot;Component &#39;</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>&#39; was called with no parent Tablist component. &quot;</span>
<a id=__codelineno-1-361 name=__codelineno-1-361 href=#__codelineno-1-361></a> <span class=sa>f</span><span class=s2>&quot;Either wrap &#39;</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>&#39; in Tablist component, or check if the &quot;</span>
<a id=__codelineno-1-362 name=__codelineno-1-362 href=#__codelineno-1-362></a> <span class=sa>f</span><span class=s2>&quot;component is not a descendant of another instance of &#39;</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>&#39;&quot;</span>
<a id=__codelineno-1-363 name=__codelineno-1-363 href=#__codelineno-1-363></a> <span class=p>)</span>
<a id=__codelineno-1-364 name=__codelineno-1-364 href=#__codelineno-1-364></a>
<a id=__codelineno-1-365 name=__codelineno-1-365 href=#__codelineno-1-365></a> <span class=k>if</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>id</span><span class=p>:</span>
<a id=__codelineno-1-366 name=__codelineno-1-366 href=#__codelineno-1-366></a> <span class=n>slug</span> <span class=o>=</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>id</span>
<a id=__codelineno-1-367 name=__codelineno-1-367 href=#__codelineno-1-367></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-1-368 name=__codelineno-1-368 href=#__codelineno-1-368></a> <span class=n>group_slug</span> <span class=o>=</span> <span class=n>slugify</span><span class=p>(</span><span class=n>tab_ctx</span><span class=o>.</span><span class=n>id</span><span class=p>)</span>
<a id=__codelineno-1-369 name=__codelineno-1-369 href=#__codelineno-1-369></a> <span class=n>tab_slug</span> <span class=o>=</span> <span class=n>slugify</span><span class=p>(</span><span class=n>kwargs</span><span class=o>.</span><span class=n>header</span><span class=p>)</span>
<a id=__codelineno-1-370 name=__codelineno-1-370 href=#__codelineno-1-370></a> <span class=n>slug</span> <span class=o>=</span> <span class=sa>f</span><span class=s2>&quot;</span><span class=si>{</span><span class=n>group_slug</span><span class=si>}</span><span class=s2>_</span><span class=si>{</span><span class=n>tab_slug</span><span class=si>}</span><span class=s2>&quot;</span>
<a id=__codelineno-1-371 name=__codelineno-1-371 href=#__codelineno-1-371></a>
<a id=__codelineno-1-372 name=__codelineno-1-372 href=#__codelineno-1-372></a> <span class=bp>self</span><span class=o>.</span><span class=n>tab_id</span> <span class=o>=</span> <span class=sa>f</span><span class=s2>&quot;</span><span class=si>{</span><span class=n>slug</span><span class=si>}</span><span class=s2>_tab&quot;</span>
<a id=__codelineno-1-373 name=__codelineno-1-373 href=#__codelineno-1-373></a> <span class=bp>self</span><span class=o>.</span><span class=n>tabpanel_id</span> <span class=o>=</span> <span class=sa>f</span><span class=s2>&quot;</span><span class=si>{</span><span class=n>slug</span><span class=si>}</span><span class=s2>_content&quot;</span>
<a id=__codelineno-1-374 name=__codelineno-1-374 href=#__codelineno-1-374></a> <span class=bp>self</span><span class=o>.</span><span class=n>parent_tabs</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=n>TabDatum</span><span class=p>]</span> <span class=o>=</span> <span class=n>tab_ctx</span><span class=o>.</span><span class=n>tab_data</span>
<a id=__codelineno-1-375 name=__codelineno-1-375 href=#__codelineno-1-375></a>
<a id=__codelineno-1-376 name=__codelineno-1-376 href=#__codelineno-1-376></a> <span class=c1># Prevent Tab&#39;s children from accessing the parent Tablist context.</span>
<a id=__codelineno-1-377 name=__codelineno-1-377 href=#__codelineno-1-377></a> <span class=c1># If we didn&#39;t do this, then you could place a Tab inside another Tab,</span>
<a id=__codelineno-1-378 name=__codelineno-1-378 href=#__codelineno-1-378></a> <span class=c1># ```</span>
<a id=__codelineno-1-379 name=__codelineno-1-379 href=#__codelineno-1-379></a> <span class=c1># {% component Tablist %}</span>
<a id=__codelineno-1-380 name=__codelineno-1-380 href=#__codelineno-1-380></a> <span class=c1># {% component Tab header=&quot;Tab 1&quot; %}</span>
<a id=__codelineno-1-381 name=__codelineno-1-381 href=#__codelineno-1-381></a> <span class=c1># {% component Tab header=&quot;Tab 2&quot; %}</span>
<a id=__codelineno-1-382 name=__codelineno-1-382 href=#__codelineno-1-382></a> <span class=c1># This is the content of Tab 2</span>
<a id=__codelineno-1-383 name=__codelineno-1-383 href=#__codelineno-1-383></a> <span class=c1># {% endcomponent %}</span>
<a id=__codelineno-1-384 name=__codelineno-1-384 href=#__codelineno-1-384></a> <span class=c1># {% endcomponent %}</span>
<a id=__codelineno-1-385 name=__codelineno-1-385 href=#__codelineno-1-385></a> <span class=c1># {% endcomponent %}</span>
<a id=__codelineno-1-386 name=__codelineno-1-386 href=#__codelineno-1-386></a> <span class=c1># ```</span>
<a id=__codelineno-1-387 name=__codelineno-1-387 href=#__codelineno-1-387></a> <span class=n>overriding_tab_context</span> <span class=o>=</span> <span class=n>TabContext</span><span class=p>(</span>
<a id=__codelineno-1-388 name=__codelineno-1-388 href=#__codelineno-1-388></a> <span class=nb>id</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>tab_id</span><span class=p>,</span>
<a id=__codelineno-1-389 name=__codelineno-1-389 href=#__codelineno-1-389></a> <span class=n>tab_data</span><span class=o>=</span><span class=p>[],</span>
<a id=__codelineno-1-390 name=__codelineno-1-390 href=#__codelineno-1-390></a> <span class=n>enabled</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-1-391 name=__codelineno-1-391 href=#__codelineno-1-391></a> <span class=p>)</span>
<a id=__codelineno-1-392 name=__codelineno-1-392 href=#__codelineno-1-392></a>
<a id=__codelineno-1-393 name=__codelineno-1-393 href=#__codelineno-1-393></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-1-394 name=__codelineno-1-394 href=#__codelineno-1-394></a> <span class=s2>&quot;overriding_tab_context&quot;</span><span class=p>:</span> <span class=n>overriding_tab_context</span><span class=o>.</span><span class=n>_asdict</span><span class=p>(),</span>
<a id=__codelineno-1-395 name=__codelineno-1-395 href=#__codelineno-1-395></a> <span class=p>}</span>
<a id=__codelineno-1-396 name=__codelineno-1-396 href=#__codelineno-1-396></a>
<a id=__codelineno-1-397 name=__codelineno-1-397 href=#__codelineno-1-397></a> <span class=c1># This runs when the Tab component is rendered and the content is returned.</span>
<a id=__codelineno-1-398 name=__codelineno-1-398 href=#__codelineno-1-398></a> <span class=c1># We add the TabDatum to the parent Tablist component.</span>
<a id=__codelineno-1-399 name=__codelineno-1-399 href=#__codelineno-1-399></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>,</span> <span class=n>result</span><span class=p>,</span> <span class=n>error</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-1-400 name=__codelineno-1-400 href=#__codelineno-1-400></a> <span class=k>if</span> <span class=n>error</span> <span class=ow>or</span> <span class=n>result</span> <span class=ow>is</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-1-401 name=__codelineno-1-401 href=#__codelineno-1-401></a> <span class=k>return</span>
<a id=__codelineno-1-402 name=__codelineno-1-402 href=#__codelineno-1-402></a>
<a id=__codelineno-1-403 name=__codelineno-1-403 href=#__codelineno-1-403></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Tab</span><span class=o>.</span><span class=n>Kwargs</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span>
<a id=__codelineno-1-404 name=__codelineno-1-404 href=#__codelineno-1-404></a>
<a id=__codelineno-1-405 name=__codelineno-1-405 href=#__codelineno-1-405></a> <span class=bp>self</span><span class=o>.</span><span class=n>parent_tabs</span><span class=o>.</span><span class=n>append</span><span class=p>(</span>
<a id=__codelineno-1-406 name=__codelineno-1-406 href=#__codelineno-1-406></a> <span class=n>TabDatum</span><span class=p>(</span>
<a id=__codelineno-1-407 name=__codelineno-1-407 href=#__codelineno-1-407></a> <span class=n>tab_id</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>tab_id</span><span class=p>,</span>
<a id=__codelineno-1-408 name=__codelineno-1-408 href=#__codelineno-1-408></a> <span class=n>tabpanel_id</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>tabpanel_id</span><span class=p>,</span>
<a id=__codelineno-1-409 name=__codelineno-1-409 href=#__codelineno-1-409></a> <span class=n>header</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>header</span><span class=p>,</span>
<a id=__codelineno-1-410 name=__codelineno-1-410 href=#__codelineno-1-410></a> <span class=n>disabled</span><span class=o>=</span><span class=n>kwargs</span><span class=o>.</span><span class=n>disabled</span><span class=p>,</span>
<a id=__codelineno-1-411 name=__codelineno-1-411 href=#__codelineno-1-411></a> <span class=n>content</span><span class=o>=</span><span class=n>mark_safe</span><span class=p>(</span><span class=n>result</span><span class=o>.</span><span class=n>strip</span><span class=p>()),</span>
<a id=__codelineno-1-412 name=__codelineno-1-412 href=#__codelineno-1-412></a> <span class=p>),</span>
<a id=__codelineno-1-413 name=__codelineno-1-413 href=#__codelineno-1-413></a> <span class=p>)</span>
</code></pre></div> <h2 id=example>Example<a class=headerlink href=#example title="Permanent link">¤</a></h2> <p>To see the component in action, you can set up a view and a URL pattern as shown below.</p> <h3 id=viewspy><code>views.py</code><a class=headerlink href=#viewspy title="Permanent link">¤</a></h3> <p>This example shows how to render a full page with the tab component.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.http</span><span class=w> </span><span class=kn>import</span> <span class=n>HttpRequest</span><span class=p>,</span> <span class=n>HttpResponse</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a><span class=k>class</span><span class=w> </span><span class=nc>TabsPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>types.django_html</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=p>&lt;</span><span class=nt>html</span><span class=p>&gt;</span>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> <span class=p>&lt;</span><span class=nt>title</span><span class=p>&gt;</span>Tabs<span class=p>&lt;/</span><span class=nt>title</span><span class=p>&gt;</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a> <span class=p>&lt;/</span><span class=nt>head</span><span class=p>&gt;</span>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a> <span class=p>&lt;</span><span class=nt>body</span><span class=p>&gt;</span>
<a id=__codelineno-2-13 name=__codelineno-2-13 href=#__codelineno-2-13></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;Tablist&quot;</span>
<a id=__codelineno-2-14 name=__codelineno-2-14 href=#__codelineno-2-14></a> <span class=nv>id</span><span class=o>=</span><span class=s2>&quot;optional-tablist-id&quot;</span>
<a id=__codelineno-2-15 name=__codelineno-2-15 href=#__codelineno-2-15></a> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;Bonza tablist&quot;</span>
<a id=__codelineno-2-16 name=__codelineno-2-16 href=#__codelineno-2-16></a> <span class=nv>container_attrs</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;optional-container-attrs&quot;</span>
<a id=__codelineno-2-17 name=__codelineno-2-17 href=#__codelineno-2-17></a> <span class=nv>tablist_attrs</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;optional-tablist-attrs&quot;</span>
<a id=__codelineno-2-18 name=__codelineno-2-18 href=#__codelineno-2-18></a> <span class=nv>tab_attrs</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;optional-tab-attrs&quot;</span>
<a id=__codelineno-2-19 name=__codelineno-2-19 href=#__codelineno-2-19></a> <span class=nv>tabpanel_attrs</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;optional-panel-attrs&quot;</span>
<a id=__codelineno-2-20 name=__codelineno-2-20 href=#__codelineno-2-20></a> <span class=cp>%}</span>
<a id=__codelineno-2-21 name=__codelineno-2-21 href=#__codelineno-2-21></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;Tab&quot;</span> <span class=nv>id</span><span class=o>=</span><span class=s2>&quot;optional-tab-id&quot;</span> <span class=nv>header</span><span class=o>=</span><span class=s2>&quot;I&#39;m a tab!&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-22 name=__codelineno-2-22 href=#__codelineno-2-22></a> <span class=cp>{%</span> <span class=k>lorem</span> <span class=cp>%}</span>
<a id=__codelineno-2-23 name=__codelineno-2-23 href=#__codelineno-2-23></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-2-24 name=__codelineno-2-24 href=#__codelineno-2-24></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;Tab&quot;</span> <span class=nv>header</span><span class=o>=</span><span class=s2>&quot;I&#39;m also a tab!&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-25 name=__codelineno-2-25 href=#__codelineno-2-25></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span><span class=cp>{%</span> <span class=k>lorem</span> <span class=cp>%}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-2-26 name=__codelineno-2-26 href=#__codelineno-2-26></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span><span class=cp>{%</span> <span class=k>lorem</span> <span class=cp>%}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-2-27 name=__codelineno-2-27 href=#__codelineno-2-27></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-2-28 name=__codelineno-2-28 href=#__codelineno-2-28></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;Tab&quot;</span> <span class=nv>header</span><span class=o>=</span><span class=s2>&quot;I am a gorilla!&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-2-29 name=__codelineno-2-29 href=#__codelineno-2-29></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span><span class=cp>{%</span> <span class=k>lorem</span> <span class=cp>%}</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-2-30 name=__codelineno-2-30 href=#__codelineno-2-30></a> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>I wonder if anyone got the Monty Python reference. 🤔<span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<a id=__codelineno-2-31 name=__codelineno-2-31 href=#__codelineno-2-31></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-2-32 name=__codelineno-2-32 href=#__codelineno-2-32></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-2-33 name=__codelineno-2-33 href=#__codelineno-2-33></a> <span class=p>&lt;/</span><span class=nt>body</span><span class=p>&gt;</span>
<a id=__codelineno-2-34 name=__codelineno-2-34 href=#__codelineno-2-34></a> <span class=p>&lt;/</span><span class=nt>html</span><span class=p>&gt;</span>
<a id=__codelineno-2-35 name=__codelineno-2-35 href=#__codelineno-2-35></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-2-36 name=__codelineno-2-36 href=#__codelineno-2-36></a>
<a id=__codelineno-2-37 name=__codelineno-2-37 href=#__codelineno-2-37></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
<a id=__codelineno-2-38 name=__codelineno-2-38 href=#__codelineno-2-38></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>:</span> <span class=n>HttpRequest</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>HttpResponse</span><span class=p>:</span>
<a id=__codelineno-2-39 name=__codelineno-2-39 href=#__codelineno-2-39></a> <span class=k>return</span> <span class=n>TabsPage</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>)</span>
</code></pre></div> <h3 id=urlspy><code>urls.py</code><a class=headerlink href=#urlspy title="Permanent link">¤</a></h3> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=kn>from</span><span class=w> </span><span class=nn>examples.pages.tabs</span><span class=w> </span><span class=kn>import</span> <span class=n>TabsPage</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;examples/tabs&quot;</span><span class=p>,</span> <span class=n>TabsPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>(),</span> <span class=n>name</span><span class=o>=</span><span class=s2>&quot;tabs&quot;</span><span class=p>),</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a><span class=p>]</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="October 5, 2025 07:09:08 UTC"><span class=timeago datetime=2025-10-05T07:09:08+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="October 5, 2025 07:09:08 UTC">2025-10-05</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=../form_grid/ class="md-footer__link md-footer__link--prev" aria-label="Previous: FormGrid"> <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> FormGrid </div> </div> </a> <a href=../../community/people/ class="md-footer__link md-footer__link--next" aria-label="Next: Django Components People"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Django Components People </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