mirror of
https://github.com/django-components/django-components.git
synced 2025-08-22 06:54:04 +00:00
310 lines
No EOL
130 KiB
HTML
310 lines
No EOL
130 KiB
HTML
<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/slots/ rel=canonical><link href=../single_file_components/ rel=prev><link href=../template_tag_syntax/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.5.43"><title>Slots - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.0253249f.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><script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="Slots - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/concepts/fundamentals/slots.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/slots/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Slots - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/concepts/fundamentals/slots.png></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=#named-slots class=md-skip> Skip to content </a> </div> <div data-md-component=announce> <aside class=md-banner> <div class="md-banner__inner md-grid md-typeset"> 🚨The documentation is still a work in progress. 🚨 </div> </aside> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class="md-header md-header--shadow" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Slots </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/EmilStenstrom/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 496 512"><!-- Font Awesome Free 6.6.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 2024 Fonticons, Inc.--><path d="M165.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.9M244.8 8C106.1 8 0 113.3 0 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.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.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> EmilStenstrom/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <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" 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/EmilStenstrom/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 496 512"><!-- Font Awesome Free 6.6.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 2024 Fonticons, Inc.--><path d="M165.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.9M244.8 8C106.1 8 0 113.3 0 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.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.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> EmilStenstrom/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex> <span class=md-ellipsis> Get Started </span> <span class="md-nav__icon md-icon"></span> </label> <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> Get Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../overview/code_of_conduct/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/community/ class=md-nav__link> <span class=md-ellipsis> Community </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/compatibility/ class=md-nav__link> <span class=md-ellipsis> Compatibility </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/development/ class=md-nav__link> <span class=md-ellipsis> Development </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/installation/ class=md-nav__link> <span class=md-ellipsis> Installation </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/security_notes/ class=md-nav__link> <span class=md-ellipsis> Security notes 🚨 </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/welcome/ class=md-nav__link> <span class=md-ellipsis> Welcome to Django Components </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Concepts </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Concepts </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1 checked> <label class=md-nav__link for=__nav_2_1 id=__nav_2_1_label tabindex=0> <span class=md-ellipsis> Fundamentals </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../access_component_input/ class=md-nav__link> <span class=md-ellipsis> Accessing component inputs </span> </a> </li> <li class=md-nav__item> <a href=../autodiscovery/ class=md-nav__link> <span class=md-ellipsis> Autodiscovery </span> </a> </li> <li class=md-nav__item> <a href=../component_context_scope/ class=md-nav__link> <span class=md-ellipsis> Component context and scope </span> </a> </li> <li class=md-nav__item> <a href=../components_as_views/ class=md-nav__link> <span class=md-ellipsis> Components as views </span> </a> </li> <li class=md-nav__item> <a href=../components_in_python/ class=md-nav__link> <span class=md-ellipsis> Components in Python </span> </a> </li> <li class=md-nav__item> <a href=../components_in_templates/ class=md-nav__link> <span class=md-ellipsis> Components in templates </span> </a> </li> <li class=md-nav__item> <a href=../defining_js_css_html_files/ class=md-nav__link> <span class=md-ellipsis> Defining HTML / JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../html_attributes/ class=md-nav__link> <span class=md-ellipsis> HTML attributes </span> </a> </li> <li class=md-nav__item> <a href=../single_file_components/ class=md-nav__link> <span class=md-ellipsis> Single-file components </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> Slots </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Slots </span> </a> <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=#named-slots class=md-nav__link> <span class=md-ellipsis> Named slots </span> </a> </li> <li class=md-nav__item> <a href=#default-slot class=md-nav__link> <span class=md-ellipsis> Default slot </span> </a> <nav class=md-nav aria-label="Default slot"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-default-slot-in-python class=md-nav__link> <span class=md-ellipsis> Accessing default slot in Python </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#render-fill-in-multiple-places class=md-nav__link> <span class=md-ellipsis> Render fill in multiple places </span> </a> <nav class=md-nav aria-label="Render fill in multiple places"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#default-and-required-slots class=md-nav__link> <span class=md-ellipsis> Default and required slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#accessing-original-content-of-slots class=md-nav__link> <span class=md-ellipsis> Accessing original content of slots </span> </a> </li> <li class=md-nav__item> <a href=#conditional-slots class=md-nav__link> <span class=md-ellipsis> Conditional slots </span> </a> <nav class=md-nav aria-label="Conditional slots"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-is_filled-of-slot-names-with-special-characters class=md-nav__link> <span class=md-ellipsis> Accessing is_filled of slot names with special characters </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#conditional-fills class=md-nav__link> <span class=md-ellipsis> Conditional fills </span> </a> </li> <li class=md-nav__item> <a href=#scoped-slots class=md-nav__link> <span class=md-ellipsis> Scoped slots </span> </a> <nav class=md-nav aria-label="Scoped slots"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#passing-data-to-slots class=md-nav__link> <span class=md-ellipsis> Passing data to slots </span> </a> </li> <li class=md-nav__item> <a href=#accessing-slot-data-in-fill class=md-nav__link> <span class=md-ellipsis> Accessing slot data in fill </span> </a> </li> <li class=md-nav__item> <a href=#slot-data-of-default-slots class=md-nav__link> <span class=md-ellipsis> Slot data of default slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#dynamic-slots-and-fills class=md-nav__link> <span class=md-ellipsis> Dynamic slots and fills </span> </a> </li> <li class=md-nav__item> <a href=#pass-through-all-the-slots class=md-nav__link> <span class=md-ellipsis> Pass through all the slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../template_tag_syntax/ class=md-nav__link> <span class=md-ellipsis> Template tag syntax </span> </a> </li> <li class=md-nav__item> <a href=../your_first_component/ class=md-nav__link> <span class=md-ellipsis> Create your first component </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_2> <label class=md-nav__link for=__nav_2_2 id=__nav_2_2_label tabindex=0> <span class=md-ellipsis> Advanced </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../advanced/authoring_component_libraries/ class=md-nav__link> <span class=md-ellipsis> Authoring component libraries </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/component_registry/ class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/hooks/ class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/provide_inject/ class=md-nav__link> <span class=md-ellipsis> Prop drilling and provide / inject </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/rendering_js_css/ class=md-nav__link> <span class=md-ellipsis> Rendering JS / CSS </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/tag_formatter/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/typing_and_validation/ class=md-nav__link> <span class=md-ellipsis> Typing and validation </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex> <span class=md-ellipsis> Guides </span> <span class="md-nav__icon md-icon"></span> </label> <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> Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex=0> <span class=md-ellipsis> Setup </span> <span class="md-nav__icon md-icon"></span> </label> <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> Setup </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/setup/dev_server_setup/ class=md-nav__link> <span class=md-ellipsis> Running with development server </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/logging_and_debugging/ class=md-nav__link> <span class=md-ellipsis> Logging and debugging </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/syntax_highlight/ class=md-nav__link> <span class=md-ellipsis> Syntax highlighting </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../guides/cookbook class=md-nav__link> <span class=md-ellipsis> Cookbook </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex> <span class=md-ellipsis> API Documentation </span> <span class="md-nav__icon md-icon"></span> </label> <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> API Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1> <div class="md-nav__link md-nav__container"> <a href=../../../reference/django_components/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </span> </a> <label class="md-nav__link " for=__nav_4_1 id=__nav_4_1_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_1_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/django_components/app_settings/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> app_settings </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/apps/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> apps </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/attributes/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> attributes </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/autodiscovery/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> autodiscovery </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/component/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/component_media/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_media </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/component_registry/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_registry </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1_9> <div class="md-nav__link md-nav__container"> <a href=../../../reference/django_components/components/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> components </span> </a> <label class="md-nav__link " for=__nav_4_1_9 id=__nav_4_1_9_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_4_1_9_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1_9> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/django_components/components/dynamic/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dynamic </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../reference/django_components/context/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/dependencies/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dependencies </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/expression/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/finders/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> finders </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/library/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> library </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1_15> <div class="md-nav__link md-nav__container"> <a href=../../../reference/django_components/management/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </span> </a> <label class="md-nav__link " for=__nav_4_1_15 id=__nav_4_1_15_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_4_1_15_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1_15> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1_15_2> <div class="md-nav__link md-nav__container"> <a href=../../../reference/django_components/management/commands/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </span> </a> <label class="md-nav__link " for=__nav_4_1_15_2 id=__nav_4_1_15_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_4_1_15_2_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1_15_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/django_components/management/commands/startcomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> startcomponent </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/management/commands/upgradecomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> upgradecomponent </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../reference/django_components/middleware/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> middleware </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/node/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> node </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/provide/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> provide </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/slots/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> slots </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/tag_formatter/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_formatter </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/template/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/template_loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_loader </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/template_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_parser </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1_24> <div class="md-nav__link md-nav__container"> <a href=../../../reference/django_components/templatetags/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </span> </a> <label class="md-nav__link " for=__nav_4_1_24 id=__nav_4_1_24_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_4_1_24_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1_24> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/django_components/templatetags/component_tags/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_tags </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../reference/django_components/types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/urls/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> urls </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1_27> <div class="md-nav__link md-nav__container"> <a href=../../../reference/django_components/util/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> util </span> </a> <label class="md-nav__link " for=__nav_4_1_27 id=__nav_4_1_27_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_4_1_27_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1_27> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> util </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/django_components/util/cache/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> cache </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/html/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> html </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> loader </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/logger/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> logger </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/misc/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> misc </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/nanoid/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> nanoid </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/tag_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_parser </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/django_components/util/validation/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> validation </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_2> <div class="md-nav__link md-nav__container"> <a href=../../../reference/django_components_js/build/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components_js </span> </a> </div> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_2_label aria-expanded=false> <label class=md-nav__title for=__nav_4_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components_js </label> <ul class=md-nav__list data-md-scrollfix> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_3> <div class="md-nav__link md-nav__container"> <a href=../../../reference/docs/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> docs </span> </a> <label class="md-nav__link " for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_3_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> docs </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_3_2> <div class="md-nav__link md-nav__container"> <a href=../../../reference/docs/scripts/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> scripts </span> </a> <label class="md-nav__link " for=__nav_4_3_2 id=__nav_4_3_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_4_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> scripts </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/docs/scripts/reference/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> reference </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../changelog.md class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> </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=#named-slots class=md-nav__link> <span class=md-ellipsis> Named slots </span> </a> </li> <li class=md-nav__item> <a href=#default-slot class=md-nav__link> <span class=md-ellipsis> Default slot </span> </a> <nav class=md-nav aria-label="Default slot"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-default-slot-in-python class=md-nav__link> <span class=md-ellipsis> Accessing default slot in Python </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#render-fill-in-multiple-places class=md-nav__link> <span class=md-ellipsis> Render fill in multiple places </span> </a> <nav class=md-nav aria-label="Render fill in multiple places"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#default-and-required-slots class=md-nav__link> <span class=md-ellipsis> Default and required slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#accessing-original-content-of-slots class=md-nav__link> <span class=md-ellipsis> Accessing original content of slots </span> </a> </li> <li class=md-nav__item> <a href=#conditional-slots class=md-nav__link> <span class=md-ellipsis> Conditional slots </span> </a> <nav class=md-nav aria-label="Conditional slots"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-is_filled-of-slot-names-with-special-characters class=md-nav__link> <span class=md-ellipsis> Accessing is_filled of slot names with special characters </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#conditional-fills class=md-nav__link> <span class=md-ellipsis> Conditional fills </span> </a> </li> <li class=md-nav__item> <a href=#scoped-slots class=md-nav__link> <span class=md-ellipsis> Scoped slots </span> </a> <nav class=md-nav aria-label="Scoped slots"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#passing-data-to-slots class=md-nav__link> <span class=md-ellipsis> Passing data to slots </span> </a> </li> <li class=md-nav__item> <a href=#accessing-slot-data-in-fill class=md-nav__link> <span class=md-ellipsis> Accessing slot data in fill </span> </a> </li> <li class=md-nav__item> <a href=#slot-data-of-default-slots class=md-nav__link> <span class=md-ellipsis> Slot data of default slots </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#dynamic-slots-and-fills class=md-nav__link> <span class=md-ellipsis> Dynamic slots and fills </span> </a> </li> <li class=md-nav__item> <a href=#pass-through-all-the-slots class=md-nav__link> <span class=md-ellipsis> Pass through all the slots </span> </a> </li> </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/EmilStenstrom/django-components/edit/master/src/docs/concepts/fundamentals/slots.md title="Edit this page" class="md-content__button md-icon"> <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/EmilStenstrom/django-components/raw/master/src/docs/concepts/fundamentals/slots.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <h1>Slots</h1> <p><em>New in version 0.26</em>:</p> <ul> <li>The <code>slot</code> tag now serves only to declare new slots inside the component template.</li> <li>To override the content of a declared slot, use the newly introduced <code>fill</code> tag instead.</li> <li>Whereas unfilled slots used to raise a warning, filling a slot is now optional by default.</li> <li>To indicate that a slot must be filled, the new <code>required</code> option should be added at the end of the <code>slot</code> tag.</li> </ul> <hr> <p>Components support something called 'slots'. When a component is used inside another template, slots allow the parent template to override specific parts of the child component by passing in different content. This mechanism makes components more reusable and composable. This behavior is similar to <a href=https://vuejs.org/guide/components/slots.html>slots in Vue</a>.</p> <p>In the example below we introduce two block tags that work hand in hand to make this work. These are...</p> <ul> <li><code>{% slot <name> %}</code>/<code>{% endslot %}</code>: Declares a new slot in the component template.</li> <li><code>{% fill <name> %}</code>/<code>{% endfill %}</code>: (Used inside a <code>{% component %}</code> tag pair.) Fills a declared slot with the specified content.</li> </ul> <p>Let's update our calendar component to support more customization. We'll add <code>slot</code> tag pairs to its template, <em>template.html</em>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
||
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"header"</span> <span class=cp>%}</span>Calendar header<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
||
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"body"</span> <span class=cp>%}</span>Today's date is <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>When using the component, you specify which slots you want to fill and where you want to use the defaults from the template. It looks like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"body"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
||
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>Since the 'header' fill is unspecified, it's taken from the base template. If you put this in a template, and pass in <code>date=2020-06-06</code>, this is what gets rendered:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
||
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> Calendar header
|
||
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
||
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span>2020-06-06<span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
||
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <h3 id=named-slots>Named slots<a class=headerlink href=#named-slots title="Permanent link">¤</a></h3> <p>As seen in the previouse section, you can use <code>{% fill slot_name %}</code> to insert content into a specific slot.</p> <p>You can define fills for multiple slot simply by defining them all within the <code>{% component %} {% endcomponent %}</code> tags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> Hi this is header!
|
||
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"body"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
||
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>You can also use <code>{% for %}</code>, <code>{% with %}</code>, or other non-component tags (even <code>{% include %}</code>) to construct the <code>{% fill %}</code> tags, <strong>as long as these other tags do not leave any text behind!</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>for</span> <span class=nv>slot_name</span> <span class=k>in</span> <span class=nv>slots</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>name</span><span class=o>=</span><span class=nv>slot_name</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_name</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a>
|
||
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=x> </span><span class=cp>{%</span> <span class=k>with</span> <span class=nv>slot_name</span><span class=o>=</span><span class=s2>"abc"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>name</span><span class=o>=</span><span class=nv>slot_name</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-10 name=__codelineno-4-10 href=#__codelineno-4-10></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_name</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-4-11 name=__codelineno-4-11 href=#__codelineno-4-11></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-12 name=__codelineno-4-12 href=#__codelineno-4-12></a><span class=x> </span><span class=cp>{%</span> <span class=k>endwith</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-4-13 name=__codelineno-4-13 href=#__codelineno-4-13></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <h3 id=default-slot>Default slot<a class=headerlink href=#default-slot title="Permanent link">¤</a></h3> <p><em>Added in version 0.28</em></p> <p>As you can see, component slots lets you write reusable containers that you fill in when you use a component. This makes for highly reusable components that can be used in different circumstances.</p> <p>It can become tedious to use <code>fill</code> tags everywhere, especially when you're using a component that declares only one slot. To make things easier, <code>slot</code> tags can be marked with an optional keyword: <code>default</code>.</p> <p>When added to the tag (as shown below), this option lets you pass filling content directly in the body of a <code>component</code> tag pair – without using a <code>fill</code> tag. Choose carefully, though: a component template may contain at most one slot that is marked as <code>default</code>. The <code>default</code> option can be combined with other slot options, e.g. <code>required</code>.</p> <p>Here's the same example as before, except with default slots and implicit filling.</p> <p>The template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
||
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"header"</span> <span class=cp>%}</span>Calendar header<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
||
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"body"</span> <span class=nv>default</span> <span class=cp>%}</span>Today's date is <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>Including the component (notice how the <code>fill</code> tag is omitted):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
||
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>The rendered result (exactly the same as before):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>Calendar header<span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span>2020-06-06<span class=p></</span><span class=nt>span</span><span class=p>></span>??<span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>You may be tempted to combine implicit fills with explicit <code>fill</code> tags. This will not work. The following component template will raise an error when rendered.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=c>{# DON'T DO THIS #}</span>
|
||
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header"</span> <span class=cp>%}</span>Totally new header!<span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
||
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>Instead, you can use a named fill with name <code>default</code> to target the default fill:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=c>{# THIS WORKS #}</span>
|
||
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header"</span> <span class=cp>%}</span>Totally new header!<span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"default"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> Can you believe it's already <span class=p><</span><span class=nt>span</span><span class=p>></span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p></</span><span class=nt>span</span><span class=p>></span>??
|
||
<a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>NOTE: If you doubly-fill a slot, that is, that both <code>{% fill "default" %}</code> and <code>{% fill "header" %}</code> would point to the same slot, this will raise an error when rendered.</p> <h4 id=accessing-default-slot-in-python>Accessing default slot in Python<a class=headerlink href=#accessing-default-slot-in-python title="Permanent link">¤</a></h4> <p>Since the default slot is stored under the slot name <code>default</code>, you can access the default slot like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=k>class</span> <span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
|
||
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=n>default_slot</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span><span class=p>[</span><span class=s2>"default"</span><span class=p>]</span>
|
||
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=k>return</span> <span class=p>{</span>
|
||
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a> <span class=s2>"default_slot"</span><span class=p>:</span> <span class=n>default_slot</span><span class=p>,</span>
|
||
<a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=p>}</span>
|
||
</code></pre></div> <h3 id=render-fill-in-multiple-places>Render fill in multiple places<a class=headerlink href=#render-fill-in-multiple-places title="Permanent link">¤</a></h3> <p><em>Added in version 0.70</em></p> <p>You can render the same content in multiple places by defining multiple slots with identical names:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
||
<a id=__codelineno-11-3 name=__codelineno-11-3 href=#__codelineno-11-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=cp>%}</span>Image here<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-11-4 name=__codelineno-11-4 href=#__codelineno-11-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-11-5 name=__codelineno-11-5 href=#__codelineno-11-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
||
<a id=__codelineno-11-6 name=__codelineno-11-6 href=#__codelineno-11-6></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=cp>%}</span>Image here<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-11-7 name=__codelineno-11-7 href=#__codelineno-11-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-11-8 name=__codelineno-11-8 href=#__codelineno-11-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>So if used like:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"image"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-12-3 name=__codelineno-12-3 href=#__codelineno-12-3></a> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"..."</span> <span class=p>/></span>
|
||
<a id=__codelineno-12-4 name=__codelineno-12-4 href=#__codelineno-12-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-12-5 name=__codelineno-12-5 href=#__codelineno-12-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>This renders:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-13-1 name=__codelineno-13-1 href=#__codelineno-13-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-13-2 name=__codelineno-13-2 href=#__codelineno-13-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
||
<a id=__codelineno-13-3 name=__codelineno-13-3 href=#__codelineno-13-3></a> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"..."</span> <span class=p>/></span>
|
||
<a id=__codelineno-13-4 name=__codelineno-13-4 href=#__codelineno-13-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-13-5 name=__codelineno-13-5 href=#__codelineno-13-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
||
<a id=__codelineno-13-6 name=__codelineno-13-6 href=#__codelineno-13-6></a> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"..."</span> <span class=p>/></span>
|
||
<a id=__codelineno-13-7 name=__codelineno-13-7 href=#__codelineno-13-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-13-8 name=__codelineno-13-8 href=#__codelineno-13-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <h4 id=default-and-required-slots>Default and required slots<a class=headerlink href=#default-and-required-slots title="Permanent link">¤</a></h4> <p>If you use a slot multiple times, you can still mark the slot as <code>default</code> or <code>required</code>. For that, you must mark each slot individually, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-14-1 name=__codelineno-14-1 href=#__codelineno-14-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-14-2 name=__codelineno-14-2 href=#__codelineno-14-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
||
<a id=__codelineno-14-3 name=__codelineno-14-3 href=#__codelineno-14-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>Image here<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-14-4 name=__codelineno-14-4 href=#__codelineno-14-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-14-5 name=__codelineno-14-5 href=#__codelineno-14-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
||
<a id=__codelineno-14-6 name=__codelineno-14-6 href=#__codelineno-14-6></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=nv>required</span> <span class=cp>%}</span>Image here<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-14-7 name=__codelineno-14-7 href=#__codelineno-14-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-14-8 name=__codelineno-14-8 href=#__codelineno-14-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>Which you can then use as regular default slot:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-15-1 name=__codelineno-15-1 href=#__codelineno-15-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-15-2 name=__codelineno-15-2 href=#__codelineno-15-2></a> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"..."</span> <span class=p>/></span>
|
||
<a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>Since each slot is tagged individually, you can have multiple slots with the same name but different conditions.</p> <p>E.g. in this example, we have a component that renders a user avatar - a small circular image with a profile picture or name initials.</p> <p>If the component is given <code>image_src</code> or <code>name_initials</code> variables, the <code>image</code> slot is optional. But if neither of those are provided, you MUST fill the <code>image</code> slot.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-16-1 name=__codelineno-16-1 href=#__codelineno-16-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"avatar"</span><span class=p>></span>
|
||
<a id=__codelineno-16-2 name=__codelineno-16-2 href=#__codelineno-16-2></a> <span class=cp>{%</span> <span class=k>if</span> <span class=nv>image_src</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a> <span class=p><</span><span class=nt>img</span> <span class=na>src</span><span class=o>=</span><span class=s>"</span><span class=cp>{{</span> <span class=nv>image_src</span> <span class=cp>}}</span><span class=s>"</span> <span class=p>/></span>
|
||
<a id=__codelineno-16-5 name=__codelineno-16-5 href=#__codelineno-16-5></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-6 name=__codelineno-16-6 href=#__codelineno-16-6></a> <span class=cp>{%</span> <span class=k>elif</span> <span class=nv>name_initials</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-7 name=__codelineno-16-7 href=#__codelineno-16-7></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-8 name=__codelineno-16-8 href=#__codelineno-16-8></a> <span class=p><</span><span class=nt>div</span> <span class=na>style</span><span class=o>=</span><span class=s>"</span>
|
||
<a id=__codelineno-16-9 name=__codelineno-16-9 href=#__codelineno-16-9></a><span class=s> border-radius: 25px;</span>
|
||
<a id=__codelineno-16-10 name=__codelineno-16-10 href=#__codelineno-16-10></a><span class=s> width: 50px;</span>
|
||
<a id=__codelineno-16-11 name=__codelineno-16-11 href=#__codelineno-16-11></a><span class=s> height: 50px;</span>
|
||
<a id=__codelineno-16-12 name=__codelineno-16-12 href=#__codelineno-16-12></a><span class=s> background: blue;</span>
|
||
<a id=__codelineno-16-13 name=__codelineno-16-13 href=#__codelineno-16-13></a><span class=s> "</span><span class=p>></span>
|
||
<a id=__codelineno-16-14 name=__codelineno-16-14 href=#__codelineno-16-14></a> <span class=cp>{{</span> <span class=nv>name_initials</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-16-15 name=__codelineno-16-15 href=#__codelineno-16-15></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-16-16 name=__codelineno-16-16 href=#__codelineno-16-16></a> <span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-17 name=__codelineno-16-17 href=#__codelineno-16-17></a> <span class=cp>{%</span> <span class=k>else</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-18 name=__codelineno-16-18 href=#__codelineno-16-18></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"image"</span> <span class=nv>default</span> <span class=nv>required</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-19 name=__codelineno-16-19 href=#__codelineno-16-19></a> <span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-16-20 name=__codelineno-16-20 href=#__codelineno-16-20></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <h3 id=accessing-original-content-of-slots>Accessing original content of slots<a class=headerlink href=#accessing-original-content-of-slots title="Permanent link">¤</a></h3> <p><em>Added in version 0.26</em></p> <blockquote> <p>NOTE: In version 0.77, the syntax was changed from</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"my_slot"</span> <span class=k>as</span> <span class=s2>"alias"</span> <span class=cp>%}</span><span class=x> </span><span class=cp>{{</span> <span class=nv>alias.default</span> <span class=cp>}}</span>
|
||
</code></pre></div> <p>to</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-1></a><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"my_slot"</span> <span class=nv>default</span><span class=o>=</span><span class=s2>"slot_default"</span> <span class=cp>%}</span><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_default</span> <span class=cp>}}</span>
|
||
</code></pre></div> </blockquote> <p>Sometimes you may want to keep the original slot, but only wrap or prepend/append content to it. To do so, you can access the default slot via the <code>default</code> kwarg.</p> <p>Similarly to the <code>data</code> attribute, you specify the variable name through which the default slot will be made available.</p> <p>For instance, let's say you're filling a slot called 'body'. To render the original slot, assign it to a variable using the <code>'default'</code> keyword. You then render this variable to insert the default content:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-19-1 name=__codelineno-19-1 href=#__codelineno-19-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-19-2 name=__codelineno-19-2 href=#__codelineno-19-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"body"</span> <span class=nv>default</span><span class=o>=</span><span class=s2>"body_default"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-19-3 name=__codelineno-19-3 href=#__codelineno-19-3></a> <span class=cp>{{</span> <span class=nv>body_default</span> <span class=cp>}}</span>. Have a great day!
|
||
<a id=__codelineno-19-4 name=__codelineno-19-4 href=#__codelineno-19-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-19-5 name=__codelineno-19-5 href=#__codelineno-19-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>This produces:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-20-1 name=__codelineno-20-1 href=#__codelineno-20-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar-component"</span><span class=p>></span>
|
||
<a id=__codelineno-20-2 name=__codelineno-20-2 href=#__codelineno-20-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"header"</span><span class=p>></span>
|
||
<a id=__codelineno-20-3 name=__codelineno-20-3 href=#__codelineno-20-3></a> Calendar header
|
||
<a id=__codelineno-20-4 name=__codelineno-20-4 href=#__codelineno-20-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-20-5 name=__codelineno-20-5 href=#__codelineno-20-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"body"</span><span class=p>></span>
|
||
<a id=__codelineno-20-6 name=__codelineno-20-6 href=#__codelineno-20-6></a> Today's date is <span class=p><</span><span class=nt>span</span><span class=p>></span>2020-06-06<span class=p></</span><span class=nt>span</span><span class=p>></span>. Have a great day!
|
||
<a id=__codelineno-20-7 name=__codelineno-20-7 href=#__codelineno-20-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-20-8 name=__codelineno-20-8 href=#__codelineno-20-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>To access the original content of a default slot, set the name to <code>default</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-21-1 name=__codelineno-21-1 href=#__codelineno-21-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"calendar"</span> <span class=nv>date</span><span class=o>=</span><span class=s2>"2020-06-06"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-21-2 name=__codelineno-21-2 href=#__codelineno-21-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"default"</span> <span class=nv>default</span><span class=o>=</span><span class=s2>"slot_default"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-21-3 name=__codelineno-21-3 href=#__codelineno-21-3></a> <span class=cp>{{</span> <span class=nv>slot_default</span> <span class=cp>}}</span>. Have a great day!
|
||
<a id=__codelineno-21-4 name=__codelineno-21-4 href=#__codelineno-21-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-21-5 name=__codelineno-21-5 href=#__codelineno-21-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <h3 id=conditional-slots>Conditional slots<a class=headerlink href=#conditional-slots title="Permanent link">¤</a></h3> <p><em>Added in version 0.26.</em></p> <blockquote> <p>NOTE: In version 0.70, <code>{% if_filled %}</code> tags were replaced with <code>{{ component_vars.is_filled }}</code> variables. If your slot name contained special characters, see the section <a href=#accessing-is_filled-of-slot-names-with-special-characters>Accessing <code>is_filled</code> of slot names with special characters</a>.</p> </blockquote> <p>In certain circumstances, you may want the behavior of slot filling to depend on whether or not a particular slot is filled.</p> <p>For example, suppose we have the following component template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"frontmatter-component"</span><span class=p>></span>
|
||
<a id=__codelineno-22-2 name=__codelineno-22-2 href=#__codelineno-22-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"title"</span><span class=p>></span>
|
||
<a id=__codelineno-22-3 name=__codelineno-22-3 href=#__codelineno-22-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"title"</span> <span class=cp>%}</span>Title<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-22-4 name=__codelineno-22-4 href=#__codelineno-22-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-22-5 name=__codelineno-22-5 href=#__codelineno-22-5></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"subtitle"</span><span class=p>></span>
|
||
<a id=__codelineno-22-6 name=__codelineno-22-6 href=#__codelineno-22-6></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"subtitle"</span> <span class=cp>%}</span><span class=c>{# Optional subtitle #}</span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-22-7 name=__codelineno-22-7 href=#__codelineno-22-7></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-22-8 name=__codelineno-22-8 href=#__codelineno-22-8></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>By default the slot named 'subtitle' is empty. Yet when the component is used without explicit fills, the div containing the slot is still rendered, as shown below:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-23-1 name=__codelineno-23-1 href=#__codelineno-23-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"frontmatter-component"</span><span class=p>></span>
|
||
<a id=__codelineno-23-2 name=__codelineno-23-2 href=#__codelineno-23-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"title"</span><span class=p>></span>Title<span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-23-3 name=__codelineno-23-3 href=#__codelineno-23-3></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"subtitle"</span><span class=p>></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-23-4 name=__codelineno-23-4 href=#__codelineno-23-4></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>This may not be what you want. What if instead the outer 'subtitle' div should only be included when the inner slot is in fact filled?</p> <p>The answer is to use the <code>{{ component_vars.is_filled.<name> }}</code> variable. You can use this together with Django's <code>{% if/elif/else/endif %}</code> tags to define a block whose contents will be rendered only if the component slot with the corresponding 'name' is filled.</p> <p>This is what our example looks like with <code>component_vars.is_filled</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-24-1 name=__codelineno-24-1 href=#__codelineno-24-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"frontmatter-component"</span><span class=p>></span>
|
||
<a id=__codelineno-24-2 name=__codelineno-24-2 href=#__codelineno-24-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"title"</span><span class=p>></span>
|
||
<a id=__codelineno-24-3 name=__codelineno-24-3 href=#__codelineno-24-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"title"</span> <span class=cp>%}</span>Title<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-24-4 name=__codelineno-24-4 href=#__codelineno-24-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-24-5 name=__codelineno-24-5 href=#__codelineno-24-5></a> <span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.is_filled.subtitle</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-24-6 name=__codelineno-24-6 href=#__codelineno-24-6></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"subtitle"</span><span class=p>></span>
|
||
<a id=__codelineno-24-7 name=__codelineno-24-7 href=#__codelineno-24-7></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"subtitle"</span> <span class=cp>%}</span><span class=c>{# Optional subtitle #}</span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-24-8 name=__codelineno-24-8 href=#__codelineno-24-8></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-24-9 name=__codelineno-24-9 href=#__codelineno-24-9></a> <span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-24-10 name=__codelineno-24-10 href=#__codelineno-24-10></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>Here's our example with more complex branching.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-25-1 name=__codelineno-25-1 href=#__codelineno-25-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"frontmatter-component"</span><span class=p>></span>
|
||
<a id=__codelineno-25-2 name=__codelineno-25-2 href=#__codelineno-25-2></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"title"</span><span class=p>></span>
|
||
<a id=__codelineno-25-3 name=__codelineno-25-3 href=#__codelineno-25-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"title"</span> <span class=cp>%}</span>Title<span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-25-4 name=__codelineno-25-4 href=#__codelineno-25-4></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-25-5 name=__codelineno-25-5 href=#__codelineno-25-5></a> <span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.is_filled.subtitle</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-25-6 name=__codelineno-25-6 href=#__codelineno-25-6></a> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"subtitle"</span><span class=p>></span>
|
||
<a id=__codelineno-25-7 name=__codelineno-25-7 href=#__codelineno-25-7></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"subtitle"</span> <span class=cp>%}</span><span class=c>{# Optional subtitle #}</span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-25-8 name=__codelineno-25-8 href=#__codelineno-25-8></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-25-9 name=__codelineno-25-9 href=#__codelineno-25-9></a> <span class=cp>{%</span> <span class=k>elif</span> <span class=nv>component_vars.is_filled.title</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-25-10 name=__codelineno-25-10 href=#__codelineno-25-10></a> ...
|
||
<a id=__codelineno-25-11 name=__codelineno-25-11 href=#__codelineno-25-11></a> <span class=cp>{%</span> <span class=k>elif</span> <span class=nv>component_vars.is_filled</span><span class=p>.</span><span class=o><</span><span class=nv>name</span><span class=o>></span> <span class=cp>%}</span>
|
||
<a id=__codelineno-25-12 name=__codelineno-25-12 href=#__codelineno-25-12></a> ...
|
||
<a id=__codelineno-25-13 name=__codelineno-25-13 href=#__codelineno-25-13></a> <span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-25-14 name=__codelineno-25-14 href=#__codelineno-25-14></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
</code></pre></div> <p>Sometimes you're not interested in whether a slot is filled, but rather that it <em>isn't</em>. To negate the meaning of <code>component_vars.is_filled</code>, simply treat it as boolean and negate it with <code>not</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-26-1 name=__codelineno-26-1 href=#__codelineno-26-1></a><span class=cp>{%</span> <span class=k>if</span> <span class=k>not</span> <span class=nv>component_vars.is_filled.subtitle</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-26-2 name=__codelineno-26-2 href=#__codelineno-26-2></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"subtitle"</span><span class=p>></span>
|
||
<a id=__codelineno-26-3 name=__codelineno-26-3 href=#__codelineno-26-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"subtitle"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-26-4 name=__codelineno-26-4 href=#__codelineno-26-4></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||
<a id=__codelineno-26-5 name=__codelineno-26-5 href=#__codelineno-26-5></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
||
</code></pre></div> <h4 id=accessing-is_filled-of-slot-names-with-special-characters>Accessing <code>is_filled</code> of slot names with special characters<a class=headerlink href=#accessing-is_filled-of-slot-names-with-special-characters title="Permanent link">¤</a></h4> <p>To be able to access a slot name via <code>component_vars.is_filled</code>, the slot name needs to be composed of only alphanumeric characters and underscores (e.g. <code>this__isvalid_123</code>).</p> <p>However, you can still define slots with other special characters. In such case, the slot name in <code>component_vars.is_filled</code> is modified to replace all invalid characters into <code>_</code>.</p> <p>So a slot named <code>"my super-slot :)"</code> will be available as <code>component_vars.is_filled.my_super_slot___</code>.</p> <p>Same applies when you are accessing <code>is_filled</code> from within the Python, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a><span class=k>class</span> <span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-27-2 name=__codelineno-27-2 href=#__codelineno-27-2></a> <span class=k>def</span> <span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
||
<a id=__codelineno-27-3 name=__codelineno-27-3 href=#__codelineno-27-3></a> <span class=c1># ✅ Works</span>
|
||
<a id=__codelineno-27-4 name=__codelineno-27-4 href=#__codelineno-27-4></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>is_filled</span><span class=p>[</span><span class=s2>"my_super_slot___"</span><span class=p>]:</span>
|
||
<a id=__codelineno-27-5 name=__codelineno-27-5 href=#__codelineno-27-5></a> <span class=c1># Do something</span>
|
||
<a id=__codelineno-27-6 name=__codelineno-27-6 href=#__codelineno-27-6></a>
|
||
<a id=__codelineno-27-7 name=__codelineno-27-7 href=#__codelineno-27-7></a> <span class=c1># ❌ Does not work</span>
|
||
<a id=__codelineno-27-8 name=__codelineno-27-8 href=#__codelineno-27-8></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>is_filled</span><span class=p>[</span><span class=s2>"my super-slot :)"</span><span class=p>]:</span>
|
||
<a id=__codelineno-27-9 name=__codelineno-27-9 href=#__codelineno-27-9></a> <span class=c1># Do something</span>
|
||
</code></pre></div> <h3 id=conditional-fills>Conditional fills<a class=headerlink href=#conditional-fills title="Permanent link">¤</a></h3> <p>Similarly, you can use <code>{% if %}</code> and <code>{% for %}</code> when defining the <code>{% fill %}</code> tags, to conditionally fill the slots when using the componnet:</p> <p>In the example below, the <code>{% fill "footer" %}</code> fill is used only if the condition is true. If falsy, the fill is ignored, and so the <code>my_table</code> component will use its default content for the <code>footer</code> slot.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-28-1 name=__codelineno-28-1 href=#__codelineno-28-1></a>{% component "my_table" %}
|
||
<a id=__codelineno-28-2 name=__codelineno-28-2 href=#__codelineno-28-2></a> {% if editable %}
|
||
<a id=__codelineno-28-3 name=__codelineno-28-3 href=#__codelineno-28-3></a> {% fill "footer" %}
|
||
<a id=__codelineno-28-4 name=__codelineno-28-4 href=#__codelineno-28-4></a> <input name="name" />
|
||
<a id=__codelineno-28-5 name=__codelineno-28-5 href=#__codelineno-28-5></a> {% endfill %}
|
||
<a id=__codelineno-28-6 name=__codelineno-28-6 href=#__codelineno-28-6></a> {% endif %}
|
||
<a id=__codelineno-28-7 name=__codelineno-28-7 href=#__codelineno-28-7></a>{% endcomponent %}
|
||
</code></pre></div> <p>You can even combine <code>{% if %}</code> and <code>{% for %}</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-29-1 name=__codelineno-29-1 href=#__codelineno-29-1></a>{% component "my_table" %}
|
||
<a id=__codelineno-29-2 name=__codelineno-29-2 href=#__codelineno-29-2></a> {% for header in headers %}
|
||
<a id=__codelineno-29-3 name=__codelineno-29-3 href=#__codelineno-29-3></a> {% if header != "hyperlink" %}
|
||
<a id=__codelineno-29-4 name=__codelineno-29-4 href=#__codelineno-29-4></a> {# Generate fill name like `header.my_column` #}
|
||
<a id=__codelineno-29-5 name=__codelineno-29-5 href=#__codelineno-29-5></a> {% fill name="header."|add:header" %}
|
||
<a id=__codelineno-29-6 name=__codelineno-29-6 href=#__codelineno-29-6></a> <b>{{ header }}</b>
|
||
<a id=__codelineno-29-7 name=__codelineno-29-7 href=#__codelineno-29-7></a> {% endfill %}
|
||
<a id=__codelineno-29-8 name=__codelineno-29-8 href=#__codelineno-29-8></a> {% endif %}
|
||
<a id=__codelineno-29-9 name=__codelineno-29-9 href=#__codelineno-29-9></a> {% endfor %}
|
||
<a id=__codelineno-29-10 name=__codelineno-29-10 href=#__codelineno-29-10></a>{% endcomponent %}
|
||
</code></pre></div> <h3 id=scoped-slots>Scoped slots<a class=headerlink href=#scoped-slots title="Permanent link">¤</a></h3> <p><em>Added in version 0.76</em>:</p> <p>Consider a component with slot(s). This component may do some processing on the inputs, and then use the processed variable in the slot's default template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"my_comp"</span><span class=p>)</span>
|
||
<a id=__codelineno-30-2 name=__codelineno-30-2 href=#__codelineno-30-2></a><span class=k>class</span> <span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-30-3 name=__codelineno-30-3 href=#__codelineno-30-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||
<a id=__codelineno-30-4 name=__codelineno-30-4 href=#__codelineno-30-4></a><span class=s2> <div></span>
|
||
<a id=__codelineno-30-5 name=__codelineno-30-5 href=#__codelineno-30-5></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot "content" default %}</span>
|
||
<a id=__codelineno-30-6 name=__codelineno-30-6 href=#__codelineno-30-6></a><span class=s2> input: {{ input }}</span>
|
||
<a id=__codelineno-30-7 name=__codelineno-30-7 href=#__codelineno-30-7></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndslot %}</span>
|
||
<a id=__codelineno-30-8 name=__codelineno-30-8 href=#__codelineno-30-8></a><span class=s2> </div></span>
|
||
<a id=__codelineno-30-9 name=__codelineno-30-9 href=#__codelineno-30-9></a><span class=s2> """</span>
|
||
<a id=__codelineno-30-10 name=__codelineno-30-10 href=#__codelineno-30-10></a>
|
||
<a id=__codelineno-30-11 name=__codelineno-30-11 href=#__codelineno-30-11></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=nb>input</span><span class=p>):</span>
|
||
<a id=__codelineno-30-12 name=__codelineno-30-12 href=#__codelineno-30-12></a> <span class=n>processed_input</span> <span class=o>=</span> <span class=n>do_something</span><span class=p>(</span><span class=nb>input</span><span class=p>)</span>
|
||
<a id=__codelineno-30-13 name=__codelineno-30-13 href=#__codelineno-30-13></a> <span class=k>return</span> <span class=p>{</span><span class=s2>"input"</span><span class=p>:</span> <span class=n>processed_input</span><span class=p>}</span>
|
||
</code></pre></div> <p>You may want to design a component so that users of your component can still access the <code>input</code> variable, so they don't have to recompute it.</p> <p>This behavior is called "scoped slots". This is inspired by <a href=https://vuejs.org/guide/components/slots.html#scoped-slots>Vue scoped slots</a> and <a href="https://github.com/Xzya/django-web-components/tree/master?tab=readme-ov-file#scoped-slots">scoped slots of django-web-components</a>.</p> <p>Using scoped slots consists of two steps:</p> <ol> <li>Passing data to <code>slot</code> tag</li> <li>Accessing data in <code>fill</code> tag</li> </ol> <h4 id=passing-data-to-slots>Passing data to slots<a class=headerlink href=#passing-data-to-slots title="Permanent link">¤</a></h4> <p>To pass the data to the <code>slot</code> tag, simply pass them as keyword attributes (<code>key=value</code>):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-31-1 name=__codelineno-31-1 href=#__codelineno-31-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"my_comp"</span><span class=p>)</span>
|
||
<a id=__codelineno-31-2 name=__codelineno-31-2 href=#__codelineno-31-2></a><span class=k>class</span> <span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-31-3 name=__codelineno-31-3 href=#__codelineno-31-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||
<a id=__codelineno-31-4 name=__codelineno-31-4 href=#__codelineno-31-4></a><span class=s2> <div></span>
|
||
<a id=__codelineno-31-5 name=__codelineno-31-5 href=#__codelineno-31-5></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot "content" default input=input %}</span>
|
||
<a id=__codelineno-31-6 name=__codelineno-31-6 href=#__codelineno-31-6></a><span class=s2> input: {{ input }}</span>
|
||
<a id=__codelineno-31-7 name=__codelineno-31-7 href=#__codelineno-31-7></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndslot %}</span>
|
||
<a id=__codelineno-31-8 name=__codelineno-31-8 href=#__codelineno-31-8></a><span class=s2> </div></span>
|
||
<a id=__codelineno-31-9 name=__codelineno-31-9 href=#__codelineno-31-9></a><span class=s2> """</span>
|
||
<a id=__codelineno-31-10 name=__codelineno-31-10 href=#__codelineno-31-10></a>
|
||
<a id=__codelineno-31-11 name=__codelineno-31-11 href=#__codelineno-31-11></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=nb>input</span><span class=p>):</span>
|
||
<a id=__codelineno-31-12 name=__codelineno-31-12 href=#__codelineno-31-12></a> <span class=n>processed_input</span> <span class=o>=</span> <span class=n>do_something</span><span class=p>(</span><span class=nb>input</span><span class=p>)</span>
|
||
<a id=__codelineno-31-13 name=__codelineno-31-13 href=#__codelineno-31-13></a> <span class=k>return</span> <span class=p>{</span>
|
||
<a id=__codelineno-31-14 name=__codelineno-31-14 href=#__codelineno-31-14></a> <span class=s2>"input"</span><span class=p>:</span> <span class=n>processed_input</span><span class=p>,</span>
|
||
<a id=__codelineno-31-15 name=__codelineno-31-15 href=#__codelineno-31-15></a> <span class=p>}</span>
|
||
</code></pre></div> <h4 id=accessing-slot-data-in-fill>Accessing slot data in fill<a class=headerlink href=#accessing-slot-data-in-fill title="Permanent link">¤</a></h4> <p>Next, we head over to where we define a fill for this slot. Here, to access the slot data we set the <code>data</code> attribute to the name of the variable through which we want to access the slot data. In the example below, we set it to <code>data</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-32-1 name=__codelineno-32-1 href=#__codelineno-32-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-32-2 name=__codelineno-32-2 href=#__codelineno-32-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"content"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_data"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-32-3 name=__codelineno-32-3 href=#__codelineno-32-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_data.input</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-32-4 name=__codelineno-32-4 href=#__codelineno-32-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-32-5 name=__codelineno-32-5 href=#__codelineno-32-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>To access slot data on a default slot, you have to explictly define the <code>{% fill %}</code> tags.</p> <p>So this works:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-33-1 name=__codelineno-33-1 href=#__codelineno-33-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-33-2 name=__codelineno-33-2 href=#__codelineno-33-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"content"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_data"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-33-3 name=__codelineno-33-3 href=#__codelineno-33-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_data.input</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-33-4 name=__codelineno-33-4 href=#__codelineno-33-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-33-5 name=__codelineno-33-5 href=#__codelineno-33-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>While this does not:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-34-1 name=__codelineno-34-1 href=#__codelineno-34-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"data"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-34-2 name=__codelineno-34-2 href=#__codelineno-34-2></a><span class=x> </span><span class=cp>{{</span> <span class=nv>data.input</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-34-3 name=__codelineno-34-3 href=#__codelineno-34-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>Note: You cannot set the <code>data</code> attribute and <a href=#accessing-original-content-of-slots><code>default</code> attribute)</a> to the same name. This raises an error:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-35-1 name=__codelineno-35-1 href=#__codelineno-35-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-35-2 name=__codelineno-35-2 href=#__codelineno-35-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"content"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_var"</span> <span class=nv>default</span><span class=o>=</span><span class=s2>"slot_var"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-35-3 name=__codelineno-35-3 href=#__codelineno-35-3></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_var.input</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-35-4 name=__codelineno-35-4 href=#__codelineno-35-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-35-5 name=__codelineno-35-5 href=#__codelineno-35-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <h4 id=slot-data-of-default-slots>Slot data of default slots<a class=headerlink href=#slot-data-of-default-slots title="Permanent link">¤</a></h4> <p>To access data of a default slot, you can specify <code>{% fill name="default" %}</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-36-1 name=__codelineno-36-1 href=#__codelineno-36-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_comp"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-36-2 name=__codelineno-36-2 href=#__codelineno-36-2></a> <span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"default"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_data"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-36-3 name=__codelineno-36-3 href=#__codelineno-36-3></a> <span class=cp>{{</span> <span class=nv>slot_data.input</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-36-4 name=__codelineno-36-4 href=#__codelineno-36-4></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-36-5 name=__codelineno-36-5 href=#__codelineno-36-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <h3 id=dynamic-slots-and-fills>Dynamic slots and fills<a class=headerlink href=#dynamic-slots-and-fills title="Permanent link">¤</a></h3> <p>Until now, we were declaring slot and fill names statically, as a string literal, e.g.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-37-1 name=__codelineno-37-1 href=#__codelineno-37-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"content"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>However, sometimes you may want to generate slots based on the given input. One example of this is <a href=https://vuetifyjs.com/en/api/v-data-table/ >a table component like that of Vuetify</a>, which creates a header and an item slots for each user-defined column.</p> <p>In django_components you can achieve the same, simply by using a variable (or a <a href=#use-template-tags-inside-component-inputs>template expression</a>) instead of a string literal:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-38-1 name=__codelineno-38-1 href=#__codelineno-38-1></a><span class=x><table></span>
|
||
<a id=__codelineno-38-2 name=__codelineno-38-2 href=#__codelineno-38-2></a><span class=x> <tr></span>
|
||
<a id=__codelineno-38-3 name=__codelineno-38-3 href=#__codelineno-38-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>for</span> <span class=nv>header</span> <span class=k>in</span> <span class=nv>headers</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-38-4 name=__codelineno-38-4 href=#__codelineno-38-4></a><span class=x> <th></span>
|
||
<a id=__codelineno-38-5 name=__codelineno-38-5 href=#__codelineno-38-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"header-{{ header.key }}"</span> <span class=nv>value</span><span class=o>=</span><span class=nv>header.title</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-38-6 name=__codelineno-38-6 href=#__codelineno-38-6></a><span class=x> </span><span class=cp>{{</span> <span class=nv>header.title</span> <span class=cp>}}</span>
|
||
<a id=__codelineno-38-7 name=__codelineno-38-7 href=#__codelineno-38-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-38-8 name=__codelineno-38-8 href=#__codelineno-38-8></a><span class=x> </th></span>
|
||
<a id=__codelineno-38-9 name=__codelineno-38-9 href=#__codelineno-38-9></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-38-10 name=__codelineno-38-10 href=#__codelineno-38-10></a><span class=x> </tr></span>
|
||
<a id=__codelineno-38-11 name=__codelineno-38-11 href=#__codelineno-38-11></a><span class=x></table></span>
|
||
</code></pre></div> <p>When using the component, you can either set the fill explicitly:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-39-1 name=__codelineno-39-1 href=#__codelineno-39-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=nv>items</span><span class=o>=</span><span class=nv>items</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-39-2 name=__codelineno-39-2 href=#__codelineno-39-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header-name"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"data"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-39-3 name=__codelineno-39-3 href=#__codelineno-39-3></a><span class=x> <b></span><span class=cp>{{</span> <span class=nv>data.value</span> <span class=cp>}}</span><span class=x></b></span>
|
||
<a id=__codelineno-39-4 name=__codelineno-39-4 href=#__codelineno-39-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-39-5 name=__codelineno-39-5 href=#__codelineno-39-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>Or also use a variable:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-40-1 name=__codelineno-40-1 href=#__codelineno-40-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=nv>items</span><span class=o>=</span><span class=nv>items</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-40-2 name=__codelineno-40-2 href=#__codelineno-40-2></a><span class=x> </span><span class=c>{# Make only the active column bold #}</span>
|
||
<a id=__codelineno-40-3 name=__codelineno-40-3 href=#__codelineno-40-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"header-{{ active_header_name }}"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"data"</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-40-4 name=__codelineno-40-4 href=#__codelineno-40-4></a><span class=x> <b></span><span class=cp>{{</span> <span class=nv>data.value</span> <span class=cp>}}</span><span class=x></b></span>
|
||
<a id=__codelineno-40-5 name=__codelineno-40-5 href=#__codelineno-40-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||
<a id=__codelineno-40-6 name=__codelineno-40-6 href=#__codelineno-40-6></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||
</code></pre></div> <blockquote> <p>NOTE: It's better to use static slot names whenever possible for clarity. The dynamic slot names should be reserved for advanced use only.</p> </blockquote> <p>Lastly, in rare cases, you can also pass the slot name via <a href=#spread-operator>the spread operator</a>. This is possible, because the slot name argument is actually a shortcut for a <code>name</code> keyword argument.</p> <p>So this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-41-1 name=__codelineno-41-1 href=#__codelineno-41-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"content"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>is the same as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-42-1 name=__codelineno-42-1 href=#__codelineno-42-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"content"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
</code></pre></div> <p>So it's possible to define a <code>name</code> key on a dictionary, and then spread that onto the slot tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-43-1 name=__codelineno-43-1 href=#__codelineno-43-1></a><span class=c>{# slot_props = {"name": "content"} #}</span>
|
||
<a id=__codelineno-43-2 name=__codelineno-43-2 href=#__codelineno-43-2></a><span class=cp>{%</span> <span class=k>slot</span> <span class=p>..</span><span class=nv>.slot_props</span> <span class=o>/</span> <span class=cp>%}</span>
|
||
</code></pre></div> <h3 id=pass-through-all-the-slots>Pass through all the slots<a class=headerlink href=#pass-through-all-the-slots title="Permanent link">¤</a></h3> <p>You can dynamically pass all slots to a child component. This is similar to <a href=https://vue-land.github.io/faq/forwarding-slots#passing-all-slots>passing all slots in Vue</a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-44-1 name=__codelineno-44-1 href=#__codelineno-44-1></a><span class=k>class</span> <span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||
<a id=__codelineno-44-2 name=__codelineno-44-2 href=#__codelineno-44-2></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
|
||
<a id=__codelineno-44-3 name=__codelineno-44-3 href=#__codelineno-44-3></a> <span class=k>return</span> <span class=p>{</span>
|
||
<a id=__codelineno-44-4 name=__codelineno-44-4 href=#__codelineno-44-4></a> <span class=s2>"slots"</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span><span class=p>,</span>
|
||
<a id=__codelineno-44-5 name=__codelineno-44-5 href=#__codelineno-44-5></a> <span class=p>}</span>
|
||
<a id=__codelineno-44-6 name=__codelineno-44-6 href=#__codelineno-44-6></a>
|
||
<a id=__codelineno-44-7 name=__codelineno-44-7 href=#__codelineno-44-7></a> <span class=n>template</span><span class=p>:</span> <span class=s2>"""</span>
|
||
<a id=__codelineno-44-8 name=__codelineno-44-8 href=#__codelineno-44-8></a><span class=s2> <div></span>
|
||
<a id=__codelineno-44-9 name=__codelineno-44-9 href=#__codelineno-44-9></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent "child" %}</span>
|
||
<a id=__codelineno-44-10 name=__codelineno-44-10 href=#__codelineno-44-10></a><span class=s2> {</span><span class=si>% f</span><span class=s2>or slot_name in slots %}</span>
|
||
<a id=__codelineno-44-11 name=__codelineno-44-11 href=#__codelineno-44-11></a><span class=s2> {</span><span class=si>% f</span><span class=s2>ill name=slot_name data="data" %}</span>
|
||
<a id=__codelineno-44-12 name=__codelineno-44-12 href=#__codelineno-44-12></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot name=slot_name ...data / %}</span>
|
||
<a id=__codelineno-44-13 name=__codelineno-44-13 href=#__codelineno-44-13></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndfill %}</span>
|
||
<a id=__codelineno-44-14 name=__codelineno-44-14 href=#__codelineno-44-14></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndfor %}</span>
|
||
<a id=__codelineno-44-15 name=__codelineno-44-15 href=#__codelineno-44-15></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndcomponent %}</span>
|
||
<a id=__codelineno-44-16 name=__codelineno-44-16 href=#__codelineno-44-16></a><span class=s2> </div></span>
|
||
<a id=__codelineno-44-17 name=__codelineno-44-17 href=#__codelineno-44-17></a><span class=s2> """</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"><span class=timeago datetime=2024-11-26T13:52:55+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date">2024-11-26</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=../single_file_components/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Single-file components"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Single-file components </div> </div> </a> <a href=../template_tag_syntax/ class="md-footer__link md-footer__link--next" aria-label="Next: Template tag syntax"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Template tag syntax </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/EmilStenstrom/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.6.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 2024 Fonticons, Inc.--><path d="M165.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.9M244.8 8C106.1 8 0 113.3 0 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.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.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 6.6.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 2024 Fonticons, Inc.--><path 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 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3M167.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.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3"/></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.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.6ce7567c.min.js", "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.83f73b43.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> |