mirror of
https://github.com/django-components/django-components.git
synced 2025-09-19 12:19:44 +00:00
254 lines
No EOL
111 KiB
HTML
254 lines
No EOL
111 KiB
HTML
<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://django-components.github.io/django-components/latest/concepts/fundamentals/rendering_components/ rel=canonical><link href=../render_api/ rel=prev><link href=../template_tag_syntax/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.12"><title>Rendering components - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.2afb09e1.min.css><link rel=stylesheet href=../../../assets/stylesheets/palette.06af60db.min.css><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../../assets/_markdown_exec_pyodide.css><link rel=stylesheet href=../../../assets/_mkdocstrings.css><link rel=stylesheet href=../../../css/timeago.css><link rel=stylesheet href=../../../css/style.css><script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="Rendering components - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://django-components.github.io/django-components/latest/assets/images/social/concepts/fundamentals/rendering_components.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://django-components.github.io/django-components/latest/concepts/fundamentals/rendering_components/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Rendering components - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://django-components.github.io/django-components/latest/assets/images/social/concepts/fundamentals/rendering_components.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=#overview class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class=md-header data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Rendering components </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 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> django-components/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../../../overview/welcome/ class=md-tabs__link> Overview </a> </li> <li class=md-tabs__item> <a href=../../../getting_started/your_first_component/ class=md-tabs__link> Getting Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../single_file_components/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../../guides/setup/caching/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../../reference/api/ class=md-tabs__link> API Documentation </a> </li> <li class=md-tabs__item> <a href=../../../release_notes/ class=md-tabs__link> Release Notes </a> </li> </ul> </div> </nav> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 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> django-components/django-components </div> </a> </div> <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_1> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex=0> <span class=md-ellipsis> Overview </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> Overview </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../overview/welcome/ class=md-nav__link> <span class=md-ellipsis> Welcome to Django Components </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/installation/ class=md-nav__link> <span class=md-ellipsis> Installation </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/community/ class=md-nav__link> <span class=md-ellipsis> Community </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributing </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/performance/ class=md-nav__link> <span class=md-ellipsis> Performance </span> </a> </li> <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/license/ class=md-nav__link> <span class=md-ellipsis> License </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> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Getting Started </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=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../getting_started/your_first_component/ class=md-nav__link> <span class=md-ellipsis> Create your first component </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/adding_js_and_css/ class=md-nav__link> <span class=md-ellipsis> Adding JS and CSS </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/components_in_templates/ class=md-nav__link> <span class=md-ellipsis> Components in templates </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/parametrising_components/ class=md-nav__link> <span class=md-ellipsis> Parametrising components </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/adding_slots/ class=md-nav__link> <span class=md-ellipsis> Adding slots </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/rendering_components/ class=md-nav__link> <span class=md-ellipsis> Rendering 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_3 checked> <label class=md-nav__link for=__nav_3 id=__nav_3_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_3_label aria-expanded=true> <label class=md-nav__title for=__nav_3> <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--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3_1 checked> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex> <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_3_1_label aria-expanded=true> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <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> <a href=../html_js_css_files/ class=md-nav__link> <span class=md-ellipsis> HTML / JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../html_js_css_variables/ class=md-nav__link> <span class=md-ellipsis> HTML / JS / CSS variables </span> </a> </li> <li class=md-nav__item> <a href=../secondary_js_css_files/ class=md-nav__link> <span class=md-ellipsis> Secondary JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../component_defaults/ class=md-nav__link> <span class=md-ellipsis> Component defaults </span> </a> </li> <li class=md-nav__item> <a href=../render_api/ class=md-nav__link> <span class=md-ellipsis> Render API </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> Rendering components </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Rendering components </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=#overview class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=#component-tag class=md-nav__link> <span class=md-ellipsis> {% component %} tag </span> </a> <nav class=md-nav aria-label="{% component %} tag"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#registering-components class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=#rendering-templates class=md-nav__link> <span class=md-ellipsis> Rendering templates </span> </a> </li> <li class=md-nav__item> <a href=#isolating-components class=md-nav__link> <span class=md-ellipsis> Isolating components </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#render-method class=md-nav__link> <span class=md-ellipsis> render() method </span> </a> </li> <li class=md-nav__item> <a href=#render_to_response-method class=md-nav__link> <span class=md-ellipsis> render_to_response() method </span> </a> <nav class=md-nav aria-label="render_to_response() method"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#custom-response-classes class=md-nav__link> <span class=md-ellipsis> Custom response classes </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#dependencies-rendering class=md-nav__link> <span class=md-ellipsis> Dependencies rendering </span> </a> </li> <li class=md-nav__item> <a href=#passing-context class=md-nav__link> <span class=md-ellipsis> Passing context </span> </a> </li> <li class=md-nav__item> <a href=#typing-render-methods class=md-nav__link> <span class=md-ellipsis> Typing render methods </span> </a> </li> <li class=md-nav__item> <a href=#components-as-input class=md-nav__link> <span class=md-ellipsis> Components as input </span> </a> </li> <li class=md-nav__item> <a href=#dynamic-components class=md-nav__link> <span class=md-ellipsis> Dynamic components </span> </a> <nav class=md-nav aria-label="Dynamic components"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#dynamic-component-name class=md-nav__link> <span class=md-ellipsis> Dynamic component name </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#html-fragments class=md-nav__link> <span class=md-ellipsis> HTML fragments </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=../slots/ class=md-nav__link> <span class=md-ellipsis> Slots </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=../component_views_urls/ class=md-nav__link> <span class=md-ellipsis> Component views and URLs </span> </a> </li> <li class=md-nav__item> <a href=../http_request/ class=md-nav__link> <span class=md-ellipsis> HTTP Request </span> </a> </li> <li class=md-nav__item> <a href=../typing_and_validation/ class=md-nav__link> <span class=md-ellipsis> Typing and validation </span> </a> </li> <li class=md-nav__item> <a href=../subclassing_components/ class=md-nav__link> <span class=md-ellipsis> Subclassing components </span> </a> </li> <li class=md-nav__item> <a href=../autodiscovery/ class=md-nav__link> <span class=md-ellipsis> Autodiscovery </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_3_2> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex> <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_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <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/html_fragments/ class=md-nav__link> <span class=md-ellipsis> HTML fragments </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/hooks/ class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </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/component_caching/ class=md-nav__link> <span class=md-ellipsis> Component caching </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/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=../../advanced/template_tags/ class=md-nav__link> <span class=md-ellipsis> Custom template tags </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/extensions/ class=md-nav__link> <span class=md-ellipsis> Extensions </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/testing/ class=md-nav__link> <span class=md-ellipsis> Testing </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/component_libraries/ class=md-nav__link> <span class=md-ellipsis> Component libraries </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> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <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_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <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_4_1> <label class=md-nav__link for=__nav_4_1 id=__nav_4_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_4_1_label aria-expanded=false> <label class=md-nav__title for=__nav_4_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/caching/ class=md-nav__link> <span class=md-ellipsis> Caching </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/development_server/ class=md-nav__link> <span class=md-ellipsis> Development server </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_4_2> <label class=md-nav__link for=__nav_4_2 id=__nav_4_2_label tabindex=0> <span class=md-ellipsis> Other </span> <span class="md-nav__icon md-icon"></span> </label> <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> Other </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/other/troubleshooting/ class=md-nav__link> <span class=md-ellipsis> Troubleshooting </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_4_3> <label class=md-nav__link for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class=md-ellipsis> Dev Guides </span> <span class="md-nav__icon md-icon"></span> </label> <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> Dev Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/devguides/dependency_mgmt/ class=md-nav__link> <span class=md-ellipsis> JS and CSS rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slot_rendering/ class=md-nav__link> <span class=md-ellipsis> Slot rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slots_and_blocks/ class=md-nav__link> <span class=md-ellipsis> Using slot and block tags </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_5> <label class=md-nav__link for=__nav_5 id=__nav_5_label tabindex=0> <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_5_label aria-expanded=false> <label class=md-nav__title for=__nav_5> <span class="md-nav__icon md-icon"></span> API Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/api/ class=md-nav__link> <span class=md-ellipsis> API </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/commands/ class=md-nav__link> <span class=md-ellipsis> Commands </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/exceptions/ class=md-nav__link> <span class=md-ellipsis> Exceptions </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/extension_commands/ class=md-nav__link> <span class=md-ellipsis> Extension commands </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/extension_hooks/ class=md-nav__link> <span class=md-ellipsis> Extension hooks </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/extension_urls/ class=md-nav__link> <span class=md-ellipsis> Extension URLs </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/signals/ class=md-nav__link> <span class=md-ellipsis> Signals </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_tags/ class=md-nav__link> <span class=md-ellipsis> Template tags </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_vars/ class=md-nav__link> <span class=md-ellipsis> Template vars </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/urls/ class=md-nav__link> <span class=md-ellipsis> URLs </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/testing_api/ class=md-nav__link> <span class=md-ellipsis> Testing API </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../release_notes/ class=md-nav__link> <span class=md-ellipsis> Release Notes </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=#overview class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=#component-tag class=md-nav__link> <span class=md-ellipsis> {% component %} tag </span> </a> <nav class=md-nav aria-label="{% component %} tag"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#registering-components class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=#rendering-templates class=md-nav__link> <span class=md-ellipsis> Rendering templates </span> </a> </li> <li class=md-nav__item> <a href=#isolating-components class=md-nav__link> <span class=md-ellipsis> Isolating components </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#render-method class=md-nav__link> <span class=md-ellipsis> render() method </span> </a> </li> <li class=md-nav__item> <a href=#render_to_response-method class=md-nav__link> <span class=md-ellipsis> render_to_response() method </span> </a> <nav class=md-nav aria-label="render_to_response() method"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#custom-response-classes class=md-nav__link> <span class=md-ellipsis> Custom response classes </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#dependencies-rendering class=md-nav__link> <span class=md-ellipsis> Dependencies rendering </span> </a> </li> <li class=md-nav__item> <a href=#passing-context class=md-nav__link> <span class=md-ellipsis> Passing context </span> </a> </li> <li class=md-nav__item> <a href=#typing-render-methods class=md-nav__link> <span class=md-ellipsis> Typing render methods </span> </a> </li> <li class=md-nav__item> <a href=#components-as-input class=md-nav__link> <span class=md-ellipsis> Components as input </span> </a> </li> <li class=md-nav__item> <a href=#dynamic-components class=md-nav__link> <span class=md-ellipsis> Dynamic components </span> </a> <nav class=md-nav aria-label="Dynamic components"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#dynamic-component-name class=md-nav__link> <span class=md-ellipsis> Dynamic component name </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#html-fragments class=md-nav__link> <span class=md-ellipsis> HTML fragments </span> </a> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/django-components/django-components/edit/master/docs/concepts/fundamentals/rendering_components.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/django-components/django-components/raw/master/docs/concepts/fundamentals/rendering_components.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>Rendering components</h1> <p>Your components can be rendered either within your Django templates, or directly in Python code.</p> <h2 id=overview>Overview<a class=headerlink href=#overview title="Permanent link">¤</a></h2> <p>Django Components provides three main methods to render components:</p> <ul> <li><a href=#component-tag><code>{% component %}</code> tag</a> - Renders the component within your Django templates</li> <li><a href=#render-method><code>Component.render()</code> method</a> - Renders the component to a string</li> <li><a href=#render-to-response-method><code>Component.render_to_response()</code> method</a> - Renders the component and wraps it in an HTTP response</li> </ul> <h2 id=component-tag><code>{% component %}</code> tag<a class=headerlink href=#component-tag title="Permanent link">¤</a></h2> <p>Use the <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag to render a component within your Django templates.</p> <p>The <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag takes:</p> <ul> <li>Component's registered name as the first positional argument,</li> <li>Followed by any number of positional and keyword arguments.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x><div></span>
|
|
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"button"</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=x></div></span>
|
|
</code></pre></div> <p>To pass in slots content, you can insert <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tags, directly within the <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag to "fill" the slots:</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>"my_table"</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x> < 1 | 2 | 3 ></span>
|
|
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>You can even nest <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tags within <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#if><code>{% if %}</code></a>, <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#for><code>{% for %}</code></a> and other tags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>if</span> <span class=nv>rows</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=x> < 1 | 2 | 3 ></span>
|
|
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a><span class=x> </span><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <div class="admonition info"> <p class=admonition-title>Omitting the <code>component</code> keyword</p> <p>If you would like to omit the <code>component</code> keyword, and simply refer to your components by their registered names:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>button</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>You can do so by setting the "shorthand" <a href=../../advanced/tag_formatters>Tag formatter</a> in the settings:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=c1># settings.py</span>
|
|
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
|
|
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=s2>"tag_formatter"</span><span class=p>:</span> <span class=s2>"django_components.component_shorthand_formatter"</span><span class=p>,</span>
|
|
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=p>}</span>
|
|
</code></pre></div> </div> <div class="admonition info"> <p class=admonition-title>Extended template tag syntax</p> <p>Unlike regular Django template tags, django-components' tags offer extra features like defining literal lists and dicts, and more. Read more about <a href=../template_tag_syntax>Template tag syntax</a>.</p> </div> <h3 id=registering-components>Registering components<a class=headerlink href=#registering-components title="Permanent link">¤</a></h3> <p>For a component to be renderable with the <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag, it must be first registered with the <a href=../../../reference/api/#django_components.register><code>@register()</code></a> decorator.</p> <p>For example, if you register a component under the name <code>"button"</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span>
|
|
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
|
|
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a>
|
|
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"button"</span><span class=p>)</span>
|
|
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"button.html"</span>
|
|
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a>
|
|
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a> <span class=n>job</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a>
|
|
<a id=__codelineno-5-12 name=__codelineno-5-12 href=#__codelineno-5-12></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-5-13 name=__codelineno-5-13 href=#__codelineno-5-13></a> <span class=o>...</span>
|
|
</code></pre></div> <p>Then you can render this component by using its registered name <code>"button"</code> in the template:</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>"button"</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>As you can see above, the args and kwargs passed to the <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag correspond to the component's input.</p> <p>For more details, read <a href=../../advanced/component_registry>Registering components</a>.</p> <div class="admonition note"> <p class=admonition-title>Why do I need to register components?</p> <p>TL;DR: To be able to share components as libraries, and because components can be registed with multiple registries / libraries.</p> <p>Django-components allows to <a href=../../advanced/component_libraries>share components across projects</a>.</p> <p>However, different projects may use different settings. For example, one project may prefer the "long" format:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"button"</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>While the other may use the "short" format:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=cp>{%</span> <span class=k>button</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Both approaches are supported simultaneously for backwards compatibility, because django-components started out with only the "long" format.</p> <p>To avoid ambiguity, when you use a 3rd party library, it uses the syntax that the author had configured for it.</p> <p>So when you are creating a component, django-components need to know which registry the component belongs to, so it knows which syntax to use.</p> </div> <h3 id=rendering-templates>Rendering templates<a class=headerlink href=#rendering-templates title="Permanent link">¤</a></h3> <p>If you have embedded the component in a Django template using the <a href=../../reference/template_tags#component><code>{% component %}</code></a> tag:</p> <div class=highlight><span class=filename>[project root]/templates/my_template.html</span><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a><span class=x><div></span>
|
|
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a><span class=x> </span><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>"2024-12-13"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a><span class=x></div></span>
|
|
</code></pre></div> <p>You can simply render the template with the Django's API:</p> <ul> <li> <p><a href=https://docs.djangoproject.com/en/5.2/topics/http/shortcuts/#render><code>django.shortcuts.render()</code></a></p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.shortcuts</span><span class=w> </span><span class=kn>import</span> <span class=n>render</span>
|
|
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a>
|
|
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a><span class=n>context</span> <span class=o>=</span> <span class=p>{</span><span class=s2>"date"</span><span class=p>:</span> <span class=s2>"2024-12-13"</span><span class=p>}</span>
|
|
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a><span class=n>rendered_template</span> <span class=o>=</span> <span class=n>render</span><span class=p>(</span><span class=n>request</span><span class=p>,</span> <span class=s2>"my_template.html"</span><span class=p>,</span> <span class=n>context</span><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p><a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Template.render><code>Template.render()</code></a></p> <div class=highlight><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Template</span>
|
|
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template.loader</span><span class=w> </span><span class=kn>import</span> <span class=n>get_template</span>
|
|
<a id=__codelineno-11-3 name=__codelineno-11-3 href=#__codelineno-11-3></a>
|
|
<a id=__codelineno-11-4 name=__codelineno-11-4 href=#__codelineno-11-4></a><span class=c1># Either from a file</span>
|
|
<a id=__codelineno-11-5 name=__codelineno-11-5 href=#__codelineno-11-5></a><span class=n>template</span> <span class=o>=</span> <span class=n>get_template</span><span class=p>(</span><span class=s2>"my_template.html"</span><span class=p>)</span>
|
|
<a id=__codelineno-11-6 name=__codelineno-11-6 href=#__codelineno-11-6></a>
|
|
<a id=__codelineno-11-7 name=__codelineno-11-7 href=#__codelineno-11-7></a><span class=c1># or inlined</span>
|
|
<a id=__codelineno-11-8 name=__codelineno-11-8 href=#__codelineno-11-8></a><span class=n>template</span> <span class=o>=</span> <span class=n>Template</span><span class=p>(</span><span class=s2>"""</span>
|
|
<a id=__codelineno-11-9 name=__codelineno-11-9 href=#__codelineno-11-9></a><span class=s2> {</span><span class=si>% lo</span><span class=s2>ad component_tags %}</span>
|
|
<a id=__codelineno-11-10 name=__codelineno-11-10 href=#__codelineno-11-10></a><span class=s2> <div></span>
|
|
<a id=__codelineno-11-11 name=__codelineno-11-11 href=#__codelineno-11-11></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent "calendar" date="2024-12-13" / %}</span>
|
|
<a id=__codelineno-11-12 name=__codelineno-11-12 href=#__codelineno-11-12></a><span class=s2> </div></span>
|
|
<a id=__codelineno-11-13 name=__codelineno-11-13 href=#__codelineno-11-13></a><span class=s2>"""</span><span class=p>)</span>
|
|
<a id=__codelineno-11-14 name=__codelineno-11-14 href=#__codelineno-11-14></a>
|
|
<a id=__codelineno-11-15 name=__codelineno-11-15 href=#__codelineno-11-15></a><span class=n>rendered_template</span> <span class=o>=</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>()</span>
|
|
</code></pre></div> </li> </ul> <h3 id=isolating-components>Isolating components<a class=headerlink href=#isolating-components title="Permanent link">¤</a></h3> <p>By default, components behave similarly to Django's <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#include><code>{% include %}</code></a>, and the template inside the component has access to the variables defined in the outer template.</p> <p>You can selectively isolate a component, using the <code>only</code> flag, so that the inner template can access only the data that was explicitly passed to it:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"name"</span> <span class=nv>positional_arg</span> <span class=nv>keyword_arg</span><span class=o>=</span><span class=nv>value</span> <span class=p>...</span> <span class=nv>only</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Alternatively, you can set all components to be isolated by default, by setting <a href=../../../reference/settings#django_components.app_settings.ComponentsSettings.context_behavior><code>context_behavior</code></a> to <code>"isolated"</code> in your settings:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-13-1 name=__codelineno-13-1 href=#__codelineno-13-1></a><span class=c1># settings.py</span>
|
|
<a id=__codelineno-13-2 name=__codelineno-13-2 href=#__codelineno-13-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
|
|
<a id=__codelineno-13-3 name=__codelineno-13-3 href=#__codelineno-13-3></a> <span class=s2>"context_behavior"</span><span class=p>:</span> <span class=s2>"isolated"</span><span class=p>,</span>
|
|
<a id=__codelineno-13-4 name=__codelineno-13-4 href=#__codelineno-13-4></a><span class=p>}</span>
|
|
</code></pre></div> <h2 id=render-method><code>render()</code> method<a class=headerlink href=#render-method title="Permanent link">¤</a></h2> <p>The <a href=../../../reference/api/#django_components.Component.render><code>Component.render()</code></a> method renders a component to a string.</p> <p>This is the equivalent of calling the <a href=../template_tags#component><code>{% component %}</code></a> tag.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-14-1 name=__codelineno-14-1 href=#__codelineno-14-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span><span class=p>,</span> <span class=n>Optional</span>
|
|
<a id=__codelineno-14-2 name=__codelineno-14-2 href=#__codelineno-14-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span>
|
|
<a id=__codelineno-14-3 name=__codelineno-14-3 href=#__codelineno-14-3></a>
|
|
<a id=__codelineno-14-4 name=__codelineno-14-4 href=#__codelineno-14-4></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-14-5 name=__codelineno-14-5 href=#__codelineno-14-5></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"button.html"</span>
|
|
<a id=__codelineno-14-6 name=__codelineno-14-6 href=#__codelineno-14-6></a>
|
|
<a id=__codelineno-14-7 name=__codelineno-14-7 href=#__codelineno-14-7></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-14-8 name=__codelineno-14-8 href=#__codelineno-14-8></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-14-9 name=__codelineno-14-9 href=#__codelineno-14-9></a>
|
|
<a id=__codelineno-14-10 name=__codelineno-14-10 href=#__codelineno-14-10></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-14-11 name=__codelineno-14-11 href=#__codelineno-14-11></a> <span class=n>surname</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-14-12 name=__codelineno-14-12 href=#__codelineno-14-12></a> <span class=n>age</span><span class=p>:</span> <span class=nb>int</span>
|
|
<a id=__codelineno-14-13 name=__codelineno-14-13 href=#__codelineno-14-13></a>
|
|
<a id=__codelineno-14-14 name=__codelineno-14-14 href=#__codelineno-14-14></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-14-15 name=__codelineno-14-15 href=#__codelineno-14-15></a> <span class=n>footer</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotInput</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
|
|
<a id=__codelineno-14-16 name=__codelineno-14-16 href=#__codelineno-14-16></a>
|
|
<a id=__codelineno-14-17 name=__codelineno-14-17 href=#__codelineno-14-17></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-14-18 name=__codelineno-14-18 href=#__codelineno-14-18></a> <span class=o>...</span>
|
|
<a id=__codelineno-14-19 name=__codelineno-14-19 href=#__codelineno-14-19></a>
|
|
<a id=__codelineno-14-20 name=__codelineno-14-20 href=#__codelineno-14-20></a><span class=n>Button</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-14-21 name=__codelineno-14-21 href=#__codelineno-14-21></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=s2>"John"</span><span class=p>],</span>
|
|
<a id=__codelineno-14-22 name=__codelineno-14-22 href=#__codelineno-14-22></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-14-23 name=__codelineno-14-23 href=#__codelineno-14-23></a> <span class=s2>"surname"</span><span class=p>:</span> <span class=s2>"Doe"</span><span class=p>,</span>
|
|
<a id=__codelineno-14-24 name=__codelineno-14-24 href=#__codelineno-14-24></a> <span class=s2>"age"</span><span class=p>:</span> <span class=mi>30</span><span class=p>,</span>
|
|
<a id=__codelineno-14-25 name=__codelineno-14-25 href=#__codelineno-14-25></a> <span class=p>},</span>
|
|
<a id=__codelineno-14-26 name=__codelineno-14-26 href=#__codelineno-14-26></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-14-27 name=__codelineno-14-27 href=#__codelineno-14-27></a> <span class=s2>"footer"</span><span class=p>:</span> <span class=s2>"i AM A SLOT"</span><span class=p>,</span>
|
|
<a id=__codelineno-14-28 name=__codelineno-14-28 href=#__codelineno-14-28></a> <span class=p>},</span>
|
|
<a id=__codelineno-14-29 name=__codelineno-14-29 href=#__codelineno-14-29></a><span class=p>)</span>
|
|
</code></pre></div> <p><a href=../../../reference/api/#django_components.Component.render><code>Component.render()</code></a> accepts the following arguments:</p> <ul> <li><code>args</code> - Positional arguments to pass to the component (as a list or tuple)</li> <li><code>kwargs</code> - Keyword arguments to pass to the component (as a dictionary)</li> <li><code>slots</code> - Slot content to pass to the component (as a dictionary)</li> <li><code>context</code> - Django context for rendering (can be a dictionary or a <code>Context</code> object)</li> <li><code>deps_strategy</code> - <a href=#dependencies-rendering>Dependencies rendering strategy</a> (default: <code>"document"</code>)</li> <li><code>request</code> - <a href=../http_request>HTTP request object</a>, used for context processors (optional)</li> <li><code>escape_slots_content</code> - Whether to HTML-escape slot content (default: <code>True</code>)</li> </ul> <p>All arguments are optional. If not provided, they default to empty values or sensible defaults.</p> <p>See the API reference for <a href=../../../reference/api/#django_components.Component.render><code>Component.render()</code></a> for more details on the arguments.</p> <h2 id=render_to_response-method><code>render_to_response()</code> method<a class=headerlink href=#render_to_response-method title="Permanent link">¤</a></h2> <p>The <a href=../../../reference/api/#django_components.Component.render_to_response><code>Component.render_to_response()</code></a> method works just like <a href=../../../reference/api/#django_components.Component.render><code>Component.render()</code></a>, but wraps the result in an HTTP response.</p> <p>It accepts all the same arguments as <a href=../../../reference/api/#django_components.Component.render><code>Component.render()</code></a>.</p> <p>Any extra arguments are passed to the <a href=https://docs.djangoproject.com/en/5.2/ref/request-response/#django.http.HttpResponse><code>HttpResponse</code></a> constructor.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-15-1 name=__codelineno-15-1 href=#__codelineno-15-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span><span class=p>,</span> <span class=n>Optional</span>
|
|
<a id=__codelineno-15-2 name=__codelineno-15-2 href=#__codelineno-15-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span>
|
|
<a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a>
|
|
<a id=__codelineno-15-4 name=__codelineno-15-4 href=#__codelineno-15-4></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-15-5 name=__codelineno-15-5 href=#__codelineno-15-5></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"button.html"</span>
|
|
<a id=__codelineno-15-6 name=__codelineno-15-6 href=#__codelineno-15-6></a>
|
|
<a id=__codelineno-15-7 name=__codelineno-15-7 href=#__codelineno-15-7></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-15-8 name=__codelineno-15-8 href=#__codelineno-15-8></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-15-9 name=__codelineno-15-9 href=#__codelineno-15-9></a>
|
|
<a id=__codelineno-15-10 name=__codelineno-15-10 href=#__codelineno-15-10></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-15-11 name=__codelineno-15-11 href=#__codelineno-15-11></a> <span class=n>surname</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-15-12 name=__codelineno-15-12 href=#__codelineno-15-12></a> <span class=n>age</span><span class=p>:</span> <span class=nb>int</span>
|
|
<a id=__codelineno-15-13 name=__codelineno-15-13 href=#__codelineno-15-13></a>
|
|
<a id=__codelineno-15-14 name=__codelineno-15-14 href=#__codelineno-15-14></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-15-15 name=__codelineno-15-15 href=#__codelineno-15-15></a> <span class=n>footer</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotInput</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
|
|
<a id=__codelineno-15-16 name=__codelineno-15-16 href=#__codelineno-15-16></a>
|
|
<a id=__codelineno-15-17 name=__codelineno-15-17 href=#__codelineno-15-17></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-15-18 name=__codelineno-15-18 href=#__codelineno-15-18></a> <span class=o>...</span>
|
|
<a id=__codelineno-15-19 name=__codelineno-15-19 href=#__codelineno-15-19></a>
|
|
<a id=__codelineno-15-20 name=__codelineno-15-20 href=#__codelineno-15-20></a><span class=c1># Render the component to an HttpResponse</span>
|
|
<a id=__codelineno-15-21 name=__codelineno-15-21 href=#__codelineno-15-21></a><span class=n>response</span> <span class=o>=</span> <span class=n>Button</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
|
<a id=__codelineno-15-22 name=__codelineno-15-22 href=#__codelineno-15-22></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=s2>"John"</span><span class=p>],</span>
|
|
<a id=__codelineno-15-23 name=__codelineno-15-23 href=#__codelineno-15-23></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-15-24 name=__codelineno-15-24 href=#__codelineno-15-24></a> <span class=s2>"surname"</span><span class=p>:</span> <span class=s2>"Doe"</span><span class=p>,</span>
|
|
<a id=__codelineno-15-25 name=__codelineno-15-25 href=#__codelineno-15-25></a> <span class=s2>"age"</span><span class=p>:</span> <span class=mi>30</span><span class=p>,</span>
|
|
<a id=__codelineno-15-26 name=__codelineno-15-26 href=#__codelineno-15-26></a> <span class=p>},</span>
|
|
<a id=__codelineno-15-27 name=__codelineno-15-27 href=#__codelineno-15-27></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-15-28 name=__codelineno-15-28 href=#__codelineno-15-28></a> <span class=s2>"footer"</span><span class=p>:</span> <span class=s2>"i AM A SLOT"</span><span class=p>,</span>
|
|
<a id=__codelineno-15-29 name=__codelineno-15-29 href=#__codelineno-15-29></a> <span class=p>},</span>
|
|
<a id=__codelineno-15-30 name=__codelineno-15-30 href=#__codelineno-15-30></a> <span class=c1># Additional response arguments</span>
|
|
<a id=__codelineno-15-31 name=__codelineno-15-31 href=#__codelineno-15-31></a> <span class=n>status</span><span class=o>=</span><span class=mi>200</span><span class=p>,</span>
|
|
<a id=__codelineno-15-32 name=__codelineno-15-32 href=#__codelineno-15-32></a> <span class=n>headers</span><span class=o>=</span><span class=p>{</span><span class=s2>"X-Custom-Header"</span><span class=p>:</span> <span class=s2>"Value"</span><span class=p>},</span>
|
|
<a id=__codelineno-15-33 name=__codelineno-15-33 href=#__codelineno-15-33></a><span class=p>)</span>
|
|
</code></pre></div> <p>This method is particularly useful in view functions, as you can return the result of the component directly:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-16-1 name=__codelineno-16-1 href=#__codelineno-16-1></a><span class=k>def</span><span class=w> </span><span class=nf>profile_view</span><span class=p>(</span><span class=n>request</span><span class=p>,</span> <span class=n>user_id</span><span class=p>):</span>
|
|
<a id=__codelineno-16-2 name=__codelineno-16-2 href=#__codelineno-16-2></a> <span class=k>return</span> <span class=n>Button</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
|
<a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a> <span class=s2>"surname"</span><span class=p>:</span> <span class=s2>"Doe"</span><span class=p>,</span>
|
|
<a id=__codelineno-16-5 name=__codelineno-16-5 href=#__codelineno-16-5></a> <span class=s2>"age"</span><span class=p>:</span> <span class=mi>30</span><span class=p>,</span>
|
|
<a id=__codelineno-16-6 name=__codelineno-16-6 href=#__codelineno-16-6></a> <span class=p>},</span>
|
|
<a id=__codelineno-16-7 name=__codelineno-16-7 href=#__codelineno-16-7></a> <span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>,</span>
|
|
<a id=__codelineno-16-8 name=__codelineno-16-8 href=#__codelineno-16-8></a> <span class=p>)</span>
|
|
</code></pre></div> <h3 id=custom-response-classes>Custom response classes<a class=headerlink href=#custom-response-classes title="Permanent link">¤</a></h3> <p>By default, <a href=../../../reference/api/#django_components.Component.render_to_response><code>Component.render_to_response()</code></a> returns a standard Django <a href=https://docs.djangoproject.com/en/5.2/ref/request-response/#django.http.HttpResponse><code>HttpResponse</code></a>.</p> <p>You can customize this by setting the <a href=../../../reference/api/#django_components.Component.response_class><code>response_class</code></a> attribute on your component:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.http</span><span class=w> </span><span class=kn>import</span> <span class=n>HttpResponse</span>
|
|
<a id=__codelineno-17-2 name=__codelineno-17-2 href=#__codelineno-17-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
|
|
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a>
|
|
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyHttpResponse</span><span class=p>(</span><span class=n>HttpResponse</span><span class=p>):</span>
|
|
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a> <span class=o>...</span>
|
|
<a id=__codelineno-17-6 name=__codelineno-17-6 href=#__codelineno-17-6></a>
|
|
<a id=__codelineno-17-7 name=__codelineno-17-7 href=#__codelineno-17-7></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-17-8 name=__codelineno-17-8 href=#__codelineno-17-8></a> <span class=n>response_class</span> <span class=o>=</span> <span class=n>MyHttpResponse</span>
|
|
<a id=__codelineno-17-9 name=__codelineno-17-9 href=#__codelineno-17-9></a>
|
|
<a id=__codelineno-17-10 name=__codelineno-17-10 href=#__codelineno-17-10></a><span class=n>response</span> <span class=o>=</span> <span class=n>MyComponent</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
|
|
<a id=__codelineno-17-11 name=__codelineno-17-11 href=#__codelineno-17-11></a><span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>response</span><span class=p>,</span> <span class=n>MyHttpResponse</span><span class=p>)</span>
|
|
</code></pre></div> <h2 id=dependencies-rendering>Dependencies rendering<a class=headerlink href=#dependencies-rendering title="Permanent link">¤</a></h2> <p>The rendered HTML may be used in different contexts (browser, email, etc), and each may need different handling of JS and CSS scripts.</p> <p><a href=../../../reference/api/#django_components.Component.render><code>render()</code></a> and <a href=../../../reference/api/#django_components.Component.render_to_response><code>render_to_response()</code></a> accept a <code>deps_strategy</code> parameter, which controls where and how the JS / CSS are inserted into the HTML.</p> <p>The <code>deps_strategy</code> parameter is ultimately passed to <a href=../../../reference/api/#django_components.render_dependencies><code>render_dependencies()</code></a>.</p> <p>Learn more about <a href=../../advanced/rendering_js_css>Rendering JS / CSS</a>.</p> <p>There are six dependencies rendering strategies:</p> <ul> <li><a href=../../advanced/rendering_js_css#document><code>document</code></a> (default)<ul> <li>Smartly inserts JS / CSS into placeholders (<a href=../../../reference/template_tags#component_js_dependencies><code>{% component_js_dependencies %}</code></a>) or into <code><head></code> and <code><body></code> tags.</li> <li>Inserts extra script to allow <code>fragment</code> components to work.</li> <li>Assumes the HTML will be rendered in a JS-enabled browser.</li> </ul> </li> <li><a href=../../advanced/rendering_js_css#fragment><code>fragment</code></a><ul> <li>A lightweight HTML fragment to be inserted into a document with AJAX.</li> <li>Assumes the page was already rendered with <code>"document"</code> strategy.</li> <li>No JS / CSS included.</li> </ul> </li> <li><a href=../../advanced/rendering_js_css#simple><code>simple</code></a><ul> <li>Smartly insert JS / CSS into placeholders (<a href=../../../reference/template_tags#component_js_dependencies><code>{% component_js_dependencies %}</code></a>) or into <code><head></code> and <code><body></code> tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../advanced/rendering_js_css#prepend><code>prepend</code></a><ul> <li>Insert JS / CSS before the rendered HTML.</li> <li>Ignores the placeholders (<a href=../../../reference/template_tags#component_js_dependencies><code>{% component_js_dependencies %}</code></a>) and any <code><head></code>/<code><body></code> HTML tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../advanced/rendering_js_css#append><code>append</code></a><ul> <li>Insert JS / CSS after the rendered HTML.</li> <li>Ignores the placeholders (<a href=../../../reference/template_tags#component_js_dependencies><code>{% component_js_dependencies %}</code></a>) and any <code><head></code>/<code><body></code> HTML tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><a href=../../advanced/rendering_js_css#ignore><code>ignore</code></a><ul> <li>HTML is left as-is. You can still process it with a different strategy later with <a href=../../../reference/api/#django_components.render_dependencies><code>render_dependencies()</code></a>.</li> <li>Used for inserting rendered HTML into other components.</li> </ul> </li> </ul> <div class="admonition info"> <p class=admonition-title>Info</p> <p>You can use the <code>"prepend"</code> and <code>"append"</code> strategies to force to output JS / CSS for components that don't have neither the placeholders like <a href=../../../reference/template_tags#component_js_dependencies><code>{% component_js_dependencies %}</code></a>, nor any <code><head></code>/<code><body></code> HTML tags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-1></a><span class=n>rendered</span> <span class=o>=</span> <span class=n>Calendar</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
|
<a id=__codelineno-18-2 name=__codelineno-18-2 href=#__codelineno-18-2></a> <span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>,</span>
|
|
<a id=__codelineno-18-3 name=__codelineno-18-3 href=#__codelineno-18-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-18-4 name=__codelineno-18-4 href=#__codelineno-18-4></a> <span class=s2>"date"</span><span class=p>:</span> <span class=n>request</span><span class=o>.</span><span class=n>GET</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>"date"</span><span class=p>,</span> <span class=s2>""</span><span class=p>),</span>
|
|
<a id=__codelineno-18-5 name=__codelineno-18-5 href=#__codelineno-18-5></a> <span class=p>},</span>
|
|
<a id=__codelineno-18-6 name=__codelineno-18-6 href=#__codelineno-18-6></a> <span class=n>deps_strategy</span><span class=o>=</span><span class=s2>"append"</span><span class=p>,</span>
|
|
<a id=__codelineno-18-7 name=__codelineno-18-7 href=#__codelineno-18-7></a><span class=p>)</span>
|
|
</code></pre></div> <p>Renders something like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-19-1 name=__codelineno-19-1 href=#__codelineno-19-1></a><span class=cm><!-- Calendar component --></span>
|
|
<a id=__codelineno-19-2 name=__codelineno-19-2 href=#__codelineno-19-2></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"calendar"</span><span class=p>></span>
|
|
<a id=__codelineno-19-3 name=__codelineno-19-3 href=#__codelineno-19-3></a> ...
|
|
<a id=__codelineno-19-4 name=__codelineno-19-4 href=#__codelineno-19-4></a><span class=p></</span><span class=nt>div</span><span class=p>></span>
|
|
<a id=__codelineno-19-5 name=__codelineno-19-5 href=#__codelineno-19-5></a><span class=cm><!-- Appended JS / CSS --></span>
|
|
<a id=__codelineno-19-6 name=__codelineno-19-6 href=#__codelineno-19-6></a><span class=p><</span><span class=nt>script</span> <span class=na>src</span><span class=o>=</span><span class=s>"..."</span><span class=p>></</span><span class=nt>script</span><span class=p>></span>
|
|
<a id=__codelineno-19-7 name=__codelineno-19-7 href=#__codelineno-19-7></a><span class=p><</span><span class=nt>link</span> <span class=na>href</span><span class=o>=</span><span class=s>"..."</span><span class=p>></</span><span class=nt>link</span><span class=p>></span>
|
|
</code></pre></div> </div> <h2 id=passing-context>Passing context<a class=headerlink href=#passing-context title="Permanent link">¤</a></h2> <p>The <a href=../../../reference/api/#django_components.Component.render><code>render()</code></a> and <a href=../../../reference/api/#django_components.Component.render_to_response><code>render_to_response()</code></a> methods accept an optional <code>context</code> argument. This sets the context within which the component is rendered.</p> <p>When a component is rendered within a template with the <a href=../../../reference/template_tags#component><code>{% component %}</code></a> tag, this will be automatically set to the <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.Context>Context</a> instance that is used for rendering the template.</p> <p>When you call <a href=../../../reference/api/#django_components.Component.render><code>Component.render()</code></a> directly from Python, there is no context object, so you can ignore this input most of the time. Instead, use <code>args</code>, <code>kwargs</code>, and <code>slots</code> to pass data to the component.</p> <p>However, you can pass <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.RequestContext><code>RequestContext</code></a> to the <code>context</code> argument, so that the component will gain access to the request object and will use <a href=https://docs.djangoproject.com/en/5.2/ref/templates/api/#using-requestcontext>context processors</a>. Read more on <a href=../http_request>Working with HTTP requests</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-20-1 name=__codelineno-20-1 href=#__codelineno-20-1></a><span class=n>Button</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-20-2 name=__codelineno-20-2 href=#__codelineno-20-2></a> <span class=n>context</span><span class=o>=</span><span class=n>RequestContext</span><span class=p>(</span><span class=n>request</span><span class=p>),</span>
|
|
<a id=__codelineno-20-3 name=__codelineno-20-3 href=#__codelineno-20-3></a><span class=p>)</span>
|
|
</code></pre></div> <p>For advanced use cases, you can use <code>context</code> argument to "pre-render" the component in Python, and then pass the rendered output as plain string to the template. With this, the inner component is rendered as if it was within the template with <a href=../../../reference/template_tags#component><code>{% component %}</code></a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-21-1 name=__codelineno-21-1 href=#__codelineno-21-1></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-21-2 name=__codelineno-21-2 href=#__codelineno-21-2></a> <span class=k>def</span><span class=w> </span><span class=nf>render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-21-3 name=__codelineno-21-3 href=#__codelineno-21-3></a> <span class=c1># Pass `context` to Icon component so it is rendered</span>
|
|
<a id=__codelineno-21-4 name=__codelineno-21-4 href=#__codelineno-21-4></a> <span class=c1># as if nested within Button.</span>
|
|
<a id=__codelineno-21-5 name=__codelineno-21-5 href=#__codelineno-21-5></a> <span class=n>icon</span> <span class=o>=</span> <span class=n>Icon</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-21-6 name=__codelineno-21-6 href=#__codelineno-21-6></a> <span class=n>context</span><span class=o>=</span><span class=n>context</span><span class=p>,</span>
|
|
<a id=__codelineno-21-7 name=__codelineno-21-7 href=#__codelineno-21-7></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=s2>"icon-name"</span><span class=p>],</span>
|
|
<a id=__codelineno-21-8 name=__codelineno-21-8 href=#__codelineno-21-8></a> <span class=n>deps_strategy</span><span class=o>=</span><span class=s2>"ignore"</span><span class=p>,</span>
|
|
<a id=__codelineno-21-9 name=__codelineno-21-9 href=#__codelineno-21-9></a> <span class=p>)</span>
|
|
<a id=__codelineno-21-10 name=__codelineno-21-10 href=#__codelineno-21-10></a> <span class=c1># Update context with icon</span>
|
|
<a id=__codelineno-21-11 name=__codelineno-21-11 href=#__codelineno-21-11></a> <span class=k>with</span> <span class=n>context</span><span class=o>.</span><span class=n>update</span><span class=p>({</span><span class=s2>"icon"</span><span class=p>:</span> <span class=n>icon</span><span class=p>}):</span>
|
|
<a id=__codelineno-21-12 name=__codelineno-21-12 href=#__codelineno-21-12></a> <span class=k>return</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
|
|
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Whether the variables defined in <code>context</code> are actually available in the template depends on the <a href=../../../reference/settings#django_components.app_settings.ComponentsSettings.context_behavior>context behavior mode</a>:</p> <ul> <li> <p>In <code>"django"</code> context behavior mode, the template will have access to the keys of this context.</p> </li> <li> <p>In <code>"isolated"</code> context behavior mode, the template will NOT have access to this context, and data MUST be passed via component's args and kwargs.</p> </li> </ul> <p>Therefore, it's <strong>strongly recommended</strong> to not rely on defining variables on the context object, but instead passing them through as <code>args</code> and <code>kwargs</code></p> <p>❌ Don't do this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=n>html</span> <span class=o>=</span> <span class=n>ProfileCard</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-22-2 name=__codelineno-22-2 href=#__codelineno-22-2></a> <span class=n>context</span><span class=o>=</span><span class=p>{</span><span class=s2>"name"</span><span class=p>:</span> <span class=s2>"John"</span><span class=p>},</span>
|
|
<a id=__codelineno-22-3 name=__codelineno-22-3 href=#__codelineno-22-3></a><span class=p>)</span>
|
|
</code></pre></div> <p>✅ Do this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-23-1 name=__codelineno-23-1 href=#__codelineno-23-1></a><span class=n>html</span> <span class=o>=</span> <span class=n>ProfileCard</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-23-2 name=__codelineno-23-2 href=#__codelineno-23-2></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=s2>"name"</span><span class=p>:</span> <span class=s2>"John"</span><span class=p>},</span>
|
|
<a id=__codelineno-23-3 name=__codelineno-23-3 href=#__codelineno-23-3></a><span class=p>)</span>
|
|
</code></pre></div> </div> <h2 id=typing-render-methods>Typing render methods<a class=headerlink href=#typing-render-methods title="Permanent link">¤</a></h2> <p>Neither <a href=../../../reference/api/#django_components.Component.render><code>Component.render()</code></a> nor <a href=../../../reference/api/#django_components.Component.render_to_response><code>Component.render_to_response()</code></a> are typed, due to limitations of Python's type system.</p> <p>To add type hints, you can wrap the inputs in component's <a href=../../../reference/api/#django_components.Component.Args><code>Args</code></a>, <a href=../../../reference/api/#django_components.Component.Kwargs><code>Kwargs</code></a>, and <a href=../../../reference/api/#django_components.Component.Slots><code>Slots</code></a> classes.</p> <p>Read more on <a href=../../advanced/typing_and_validation>Typing and validation</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-24-1 name=__codelineno-24-1 href=#__codelineno-24-1></a><span class=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>NamedTuple</span><span class=p>,</span> <span class=n>Optional</span>
|
|
<a id=__codelineno-24-2 name=__codelineno-24-2 href=#__codelineno-24-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Slot</span><span class=p>,</span> <span class=n>SlotInput</span>
|
|
<a id=__codelineno-24-3 name=__codelineno-24-3 href=#__codelineno-24-3></a>
|
|
<a id=__codelineno-24-4 name=__codelineno-24-4 href=#__codelineno-24-4></a><span class=c1># Define the component with the types</span>
|
|
<a id=__codelineno-24-5 name=__codelineno-24-5 href=#__codelineno-24-5></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-24-6 name=__codelineno-24-6 href=#__codelineno-24-6></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-24-7 name=__codelineno-24-7 href=#__codelineno-24-7></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-24-8 name=__codelineno-24-8 href=#__codelineno-24-8></a>
|
|
<a id=__codelineno-24-9 name=__codelineno-24-9 href=#__codelineno-24-9></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-24-10 name=__codelineno-24-10 href=#__codelineno-24-10></a> <span class=n>surname</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-24-11 name=__codelineno-24-11 href=#__codelineno-24-11></a> <span class=n>age</span><span class=p>:</span> <span class=nb>int</span>
|
|
<a id=__codelineno-24-12 name=__codelineno-24-12 href=#__codelineno-24-12></a>
|
|
<a id=__codelineno-24-13 name=__codelineno-24-13 href=#__codelineno-24-13></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-24-14 name=__codelineno-24-14 href=#__codelineno-24-14></a> <span class=n>my_slot</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotInput</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
|
|
<a id=__codelineno-24-15 name=__codelineno-24-15 href=#__codelineno-24-15></a> <span class=n>footer</span><span class=p>:</span> <span class=n>SlotInput</span>
|
|
<a id=__codelineno-24-16 name=__codelineno-24-16 href=#__codelineno-24-16></a>
|
|
<a id=__codelineno-24-17 name=__codelineno-24-17 href=#__codelineno-24-17></a><span class=c1># Add type hints to the render call</span>
|
|
<a id=__codelineno-24-18 name=__codelineno-24-18 href=#__codelineno-24-18></a><span class=n>Button</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-24-19 name=__codelineno-24-19 href=#__codelineno-24-19></a> <span class=n>args</span><span class=o>=</span><span class=n>Button</span><span class=o>.</span><span class=n>Args</span><span class=p>(</span>
|
|
<a id=__codelineno-24-20 name=__codelineno-24-20 href=#__codelineno-24-20></a> <span class=n>name</span><span class=o>=</span><span class=s2>"John"</span><span class=p>,</span>
|
|
<a id=__codelineno-24-21 name=__codelineno-24-21 href=#__codelineno-24-21></a> <span class=p>),</span>
|
|
<a id=__codelineno-24-22 name=__codelineno-24-22 href=#__codelineno-24-22></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>Button</span><span class=o>.</span><span class=n>Kwargs</span><span class=p>(</span>
|
|
<a id=__codelineno-24-23 name=__codelineno-24-23 href=#__codelineno-24-23></a> <span class=n>surname</span><span class=o>=</span><span class=s2>"Doe"</span><span class=p>,</span>
|
|
<a id=__codelineno-24-24 name=__codelineno-24-24 href=#__codelineno-24-24></a> <span class=n>age</span><span class=o>=</span><span class=mi>30</span><span class=p>,</span>
|
|
<a id=__codelineno-24-25 name=__codelineno-24-25 href=#__codelineno-24-25></a> <span class=p>),</span>
|
|
<a id=__codelineno-24-26 name=__codelineno-24-26 href=#__codelineno-24-26></a> <span class=n>slots</span><span class=o>=</span><span class=n>Button</span><span class=o>.</span><span class=n>Slots</span><span class=p>(</span>
|
|
<a id=__codelineno-24-27 name=__codelineno-24-27 href=#__codelineno-24-27></a> <span class=n>footer</span><span class=o>=</span><span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=o>*</span><span class=n>a</span><span class=p>,</span> <span class=o>**</span><span class=n>kwa</span><span class=p>:</span> <span class=s2>"Click me!"</span><span class=p>),</span>
|
|
<a id=__codelineno-24-28 name=__codelineno-24-28 href=#__codelineno-24-28></a> <span class=p>),</span>
|
|
<a id=__codelineno-24-29 name=__codelineno-24-29 href=#__codelineno-24-29></a><span class=p>)</span>
|
|
</code></pre></div> <h2 id=components-as-input>Components as input<a class=headerlink href=#components-as-input title="Permanent link">¤</a></h2> <p>django_components makes it possible to compose components in a "React-like" way, where you can render one component and use its output as input to another component:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-25-1 name=__codelineno-25-1 href=#__codelineno-25-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.utils.safestring</span><span class=w> </span><span class=kn>import</span> <span class=n>mark_safe</span>
|
|
<a id=__codelineno-25-2 name=__codelineno-25-2 href=#__codelineno-25-2></a>
|
|
<a id=__codelineno-25-3 name=__codelineno-25-3 href=#__codelineno-25-3></a><span class=c1># Render the inner component</span>
|
|
<a id=__codelineno-25-4 name=__codelineno-25-4 href=#__codelineno-25-4></a><span class=n>inner_html</span> <span class=o>=</span> <span class=n>InnerComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-25-5 name=__codelineno-25-5 href=#__codelineno-25-5></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=s2>"some_data"</span><span class=p>:</span> <span class=s2>"value"</span><span class=p>},</span>
|
|
<a id=__codelineno-25-6 name=__codelineno-25-6 href=#__codelineno-25-6></a> <span class=n>deps_strategy</span><span class=o>=</span><span class=s2>"ignore"</span><span class=p>,</span> <span class=c1># Important for nesting!</span>
|
|
<a id=__codelineno-25-7 name=__codelineno-25-7 href=#__codelineno-25-7></a><span class=p>)</span>
|
|
<a id=__codelineno-25-8 name=__codelineno-25-8 href=#__codelineno-25-8></a>
|
|
<a id=__codelineno-25-9 name=__codelineno-25-9 href=#__codelineno-25-9></a><span class=c1># Use inner component's output in the outer component</span>
|
|
<a id=__codelineno-25-10 name=__codelineno-25-10 href=#__codelineno-25-10></a><span class=n>outer_html</span> <span class=o>=</span> <span class=n>OuterComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-25-11 name=__codelineno-25-11 href=#__codelineno-25-11></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-25-12 name=__codelineno-25-12 href=#__codelineno-25-12></a> <span class=s2>"content"</span><span class=p>:</span> <span class=n>mark_safe</span><span class=p>(</span><span class=n>inner_html</span><span class=p>),</span> <span class=c1># Mark as safe to prevent escaping</span>
|
|
<a id=__codelineno-25-13 name=__codelineno-25-13 href=#__codelineno-25-13></a> <span class=p>},</span>
|
|
<a id=__codelineno-25-14 name=__codelineno-25-14 href=#__codelineno-25-14></a><span class=p>)</span>
|
|
</code></pre></div> <p>The key here is setting <a href=../../advanced/rendering_js_css#ignore><code>deps_strategy="ignore"</code></a> for the inner component. This prevents duplicate rendering of JS / CSS dependencies when the outer component is rendered.</p> <p>When <code>deps_strategy="ignore"</code>:</p> <ul> <li>No JS or CSS dependencies will be added to the output HTML</li> <li>The component's content is rendered as-is</li> <li>The outer component will take care of including all needed dependencies</li> </ul> <p>Read more about <a href=../../advanced/rendering_js_css>Rendering JS / CSS</a>.</p> <h2 id=dynamic-components>Dynamic components<a class=headerlink href=#dynamic-components title="Permanent link">¤</a></h2> <p>Django components defines a special "dynamic" component (<a href=../../../reference/components#django_components.components.dynamic.DynamicComponent><code>DynamicComponent</code></a>).</p> <p>Normally, you have to hard-code the component name in the template:</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>component</span> <span class=s2>"button"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>The dynamic component allows you to dynamically render any component based on the <code>is</code> kwarg. This is similar to <a href=https://vuejs.org/guide/essentials/component-basics#dynamic-components>Vue's dynamic components</a> (<code><component :is></code>).</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"dynamic"</span> <span class=k>is</span><span class=o>=</span><span class=nv>table_comp</span> <span class=nv>data</span><span class=o>=</span><span class=nv>table_data</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>table_headers</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-27-2 name=__codelineno-27-2 href=#__codelineno-27-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-27-3 name=__codelineno-27-3 href=#__codelineno-27-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"pagination"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-27-4 name=__codelineno-27-4 href=#__codelineno-27-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-27-5 name=__codelineno-27-5 href=#__codelineno-27-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>The args, kwargs, and slot fills are all passed down to the underlying component.</p> <p>As with other components, the dynamic component can be rendered from Python:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-28-1 name=__codelineno-28-1 href=#__codelineno-28-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>DynamicComponent</span>
|
|
<a id=__codelineno-28-2 name=__codelineno-28-2 href=#__codelineno-28-2></a>
|
|
<a id=__codelineno-28-3 name=__codelineno-28-3 href=#__codelineno-28-3></a><span class=n>DynamicComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-28-4 name=__codelineno-28-4 href=#__codelineno-28-4></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-28-5 name=__codelineno-28-5 href=#__codelineno-28-5></a> <span class=s2>"is"</span><span class=p>:</span> <span class=n>table_comp</span><span class=p>,</span>
|
|
<a id=__codelineno-28-6 name=__codelineno-28-6 href=#__codelineno-28-6></a> <span class=s2>"data"</span><span class=p>:</span> <span class=n>table_data</span><span class=p>,</span>
|
|
<a id=__codelineno-28-7 name=__codelineno-28-7 href=#__codelineno-28-7></a> <span class=s2>"headers"</span><span class=p>:</span> <span class=n>table_headers</span><span class=p>,</span>
|
|
<a id=__codelineno-28-8 name=__codelineno-28-8 href=#__codelineno-28-8></a> <span class=p>},</span>
|
|
<a id=__codelineno-28-9 name=__codelineno-28-9 href=#__codelineno-28-9></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-28-10 name=__codelineno-28-10 href=#__codelineno-28-10></a> <span class=s2>"pagination"</span><span class=p>:</span> <span class=n>PaginationComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-28-11 name=__codelineno-28-11 href=#__codelineno-28-11></a> <span class=n>deps_strategy</span><span class=o>=</span><span class=s2>"ignore"</span><span class=p>,</span>
|
|
<a id=__codelineno-28-12 name=__codelineno-28-12 href=#__codelineno-28-12></a> <span class=p>),</span>
|
|
<a id=__codelineno-28-13 name=__codelineno-28-13 href=#__codelineno-28-13></a> <span class=p>},</span>
|
|
<a id=__codelineno-28-14 name=__codelineno-28-14 href=#__codelineno-28-14></a><span class=p>)</span>
|
|
</code></pre></div> <h3 id=dynamic-component-name>Dynamic component name<a class=headerlink href=#dynamic-component-name title="Permanent link">¤</a></h3> <p>By default, the dynamic component is registered under the name <code>"dynamic"</code>. In case of a conflict, you can set the <a href=../../../reference/settings#django_components.app_settings.ComponentsSettings.dynamic_component_name><code>COMPONENTS.dynamic_component_name</code></a> setting to change the name used for the dynamic components.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-29-1 name=__codelineno-29-1 href=#__codelineno-29-1></a><span class=c1># settings.py</span>
|
|
<a id=__codelineno-29-2 name=__codelineno-29-2 href=#__codelineno-29-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
|
|
<a id=__codelineno-29-3 name=__codelineno-29-3 href=#__codelineno-29-3></a> <span class=n>dynamic_component_name</span><span class=o>=</span><span class=s2>"my_dynamic"</span><span class=p>,</span>
|
|
<a id=__codelineno-29-4 name=__codelineno-29-4 href=#__codelineno-29-4></a><span class=p>)</span>
|
|
</code></pre></div> <p>After which you will be able to use the dynamic component with the new name:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_dynamic"</span> <span class=k>is</span><span class=o>=</span><span class=nv>table_comp</span> <span class=nv>data</span><span class=o>=</span><span class=nv>table_data</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>table_headers</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-30-2 name=__codelineno-30-2 href=#__codelineno-30-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-30-3 name=__codelineno-30-3 href=#__codelineno-30-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"pagination"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-30-4 name=__codelineno-30-4 href=#__codelineno-30-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-30-5 name=__codelineno-30-5 href=#__codelineno-30-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <h2 id=html-fragments>HTML fragments<a class=headerlink href=#html-fragments title="Permanent link">¤</a></h2> <p>Django-components provides a seamless integration with HTML fragments with AJAX (<a href=https://hotwired.dev/ >HTML over the wire</a>), whether you're using jQuery, HTMX, AlpineJS, vanilla JavaScript, or other.</p> <p>This is achieved by the combination of the <a href=../../advanced/rendering_js_css#document><code>"document"</code></a> and <a href=../../advanced/rendering_js_css#fragment><code>"fragment"</code></a> dependencies rendering strategies.</p> <p>Read more about <a href=../../advanced/html_fragments>HTML fragments</a> and <a href=../../advanced/rendering_js_css>Rendering JS / CSS</a>.</p> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago" title="May 11, 2025 12:59:34"><span class=timeago datetime=2025-05-11T12:59:34+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="May 11, 2025 12:59:34">2025-05-11</span> </span> <span class=md-source-file__fact> <span class=md-icon title=Contributors> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg> </span> <nav> <a href=mailto:juraj.oravec.josefson@gmail.com>Juro Oravec</a> </nav> </span> </aside> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../render_api/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Render API"> <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> Render API </div> </div> </a> <a href=../template_tag_syntax/ class="md-footer__link md-footer__link--next" aria-label="Next: Template tag syntax"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Template tag syntax </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/django-components/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 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.7.2 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.tabs", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.f8cc74c7.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../../assets/javascripts/bundle.c8b220af.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> |