mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-08-18 13:10:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
django-components/0.92/reference/django_components/component/index.html

542 lines
No EOL
140 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://emilstenstrom.github.io/django-components/latest/reference/django_components/component/ rel=canonical><link href=../autodiscover/ rel=prev><link href=../component_media/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.5.3, mkdocs-material-9.5.16"><title>component - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.bcfcd587.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><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></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=#django_components.component class=md-skip> Skip to content </a> </div> <div data-md-component=announce> <aside class=md-banner> <div class="md-banner__inner md-grid md-typeset"> 🚨The documentation is still a work in progress. 🚨 </div> </aside> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class="md-header md-header--shadow" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></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 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></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> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component </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 9h-1.9M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69m-9.15 3.96h2.3L12 9l-1.15 3.65Z"/></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 3 3.19.09m3.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.95 2.06.05m-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.31Z"/></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 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg> </label> </form> <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(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([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.516 6.516 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 5Z"/></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.516 6.516 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 5Z"/></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 11h12Z"/></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-.7 0-.24-.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.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></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 12 19 6.41Z"/></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 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.5.1 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 2023 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.6zm-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.3zm44.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.9zM244.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 8zM97.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-1zm-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.7zm32.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-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.5.1 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 2023 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.6zm-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.3zm44.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.9zM244.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 8zM97.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-1zm-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.7zm32.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-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <div class="md-nav__link md-nav__container"> <a href=../../.. class="md-nav__link "> <span class=md-ellipsis> README </span> </a> <label class="md-nav__link " for=__nav_1 id=__nav_1_label tabindex> <span class="md-nav__icon md-icon"></span> </label> </div> <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> README </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../CHANGELOG/ class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> <li class=md-nav__item> <a href=../../../CODE_OF_CONDUCT/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1 checked> <label class=md-nav__link for=__nav_2_1 id=__nav_2_1_label tabindex=0> <span class=md-ellipsis> API Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1> <span class="md-nav__icon md-icon"></span> API Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1_1 checked> <div class="md-nav__link md-nav__container"> <a href=../ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </span> </a> <label class="md-nav__link " for=__nav_2_1_1 id=__nav_2_1_1_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1_1> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../app_settings/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> app_settings </span> </a> </li> <li class=md-nav__item> <a href=../apps/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> apps </span> </a> </li> <li class=md-nav__item> <a href=../attributes/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> attributes </span> </a> </li> <li class=md-nav__item> <a href=../autodiscover/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> autodiscover </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> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component </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=#django_components.component.Component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Component </span> </a> <nav class=md-nav aria-label= Component> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.component.Component.Media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.response_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;response_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.as_view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;as_view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.inject class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;inject </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_css_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_css_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_js_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_js_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_to_response class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_to_response </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.component.ComponentNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentNode </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.ComponentView class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentView </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../component_media/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_media </span> </a> </li> <li class=md-nav__item> <a href=../component_registry/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_registry </span> </a> </li> <li class=md-nav__item> <a href=../context/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </span> </a> </li> <li class=md-nav__item> <a href=../expression/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </span> </a> </li> <li class=md-nav__item> <a href=../library/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> library </span> </a> </li> <li class=md-nav__item> <a href=../logger/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> logger </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_13> <div class="md-nav__link md-nav__container"> <a href=../management/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </span> </a> <label class="md-nav__link " for=__nav_2_1_1_13 id=__nav_2_1_1_13_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_13_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_13> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_13_2> <div class="md-nav__link md-nav__container"> <a href=../management/commands/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </span> </a> <label class="md-nav__link " for=__nav_2_1_1_13_2 id=__nav_2_1_1_13_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=5 aria-labelledby=__nav_2_1_1_13_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_13_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../management/commands/startcomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> startcomponent </span> </a> </li> <li class=md-nav__item> <a href=../management/commands/upgradecomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> upgradecomponent </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../middleware/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> middleware </span> </a> </li> <li class=md-nav__item> <a href=../node/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> node </span> </a> </li> <li class=md-nav__item> <a href=../provide/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> provide </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_17> <div class="md-nav__link md-nav__container"> <a href=../safer_staticfiles/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> safer_staticfiles </span> </a> <label class="md-nav__link " for=__nav_2_1_1_17 id=__nav_2_1_1_17_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_17_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_17> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> safer_staticfiles </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../safer_staticfiles/apps/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> apps </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../slots/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> slots </span> </a> </li> <li class=md-nav__item> <a href=../tag_formatter/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_formatter </span> </a> </li> <li class=md-nav__item> <a href=../template_loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_loader </span> </a> </li> <li class=md-nav__item> <a href=../template_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_parser </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1_1_22> <div class="md-nav__link md-nav__container"> <a href=../templatetags/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </span> </a> <label class="md-nav__link " for=__nav_2_1_1_22 id=__nav_2_1_1_22_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_22_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_22> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../templatetags/component_tags/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_tags </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../utils/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> utils </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </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=#django_components.component.Component class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;Component </span> </a> <nav class=md-nav aria-label= Component> <ul class=md-nav__list> <li class=md-nav__item> <a href=#django_components.component.Component.Media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;Media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.css class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;css </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.input class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;input </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.js class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;js </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.media class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;media </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.response_class class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;response_class </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.template class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.template_name class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-attribute"></code>&nbsp;template_name </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.as_view class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;as_view </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.inject class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;inject </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_css_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_css_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_js_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_js_dependencies </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.Component.render_to_response class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-method"></code>&nbsp;render_to_response </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#django_components.component.ComponentNode class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentNode </span> </a> </li> <li class=md-nav__item> <a href=#django_components.component.ComponentView class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentView </span> </a> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/EmilStenstrom/django-components/edit/master/src/django_components/component.py 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 2h4v-2m10.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.1 2.1 2.1Z"/></svg> </a> <a href=https://github.com/EmilStenstrom/django-components/raw/master/src/django_components/component.py 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.15 8.15 0 0 1-1.23-2Z"/></svg> </a> <div class="doc doc-object doc-module"> <h1 id=django_components.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">component</span> <a href=#django_components.component class=headerlink title="Permanent link">¤</a></h1> <div class="doc doc-contents first"> <div class="doc doc-children"> <div class="doc doc-object doc-class"> <h2 id=django_components.component.Component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">Component</span> <a href=#django_components.component.Component class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Component</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>registered_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>component_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>outer_context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>fill_content</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.slots.FillContent href=../slots/#django_components.slots.FillContent>FillContent</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> <p class="doc doc-class-bases"> Bases: <code><a class="autorefs autorefs-external" title=typing.Generic href=https://docs.python.org/3.12/library/typing.html#typing.Generic>Generic</a>[<span title=django_components.component.ArgsType>ArgsType</span>, <span title=django_components.component.KwargsType>KwargsType</span>, <span title=django_components.component.DataType>DataType</span>, <span title=django_components.component.SlotsType>SlotsType</span>]</code></p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-169>169</a></span>
<span class=normal><a href=#__codelineno-0-170>170</a></span>
<span class=normal><a href=#__codelineno-0-171>171</a></span>
<span class=normal><a href=#__codelineno-0-172>172</a></span>
<span class=normal><a href=#__codelineno-0-173>173</a></span>
<span class=normal><a href=#__codelineno-0-174>174</a></span>
<span class=normal><a href=#__codelineno-0-175>175</a></span>
<span class=normal><a href=#__codelineno-0-176>176</a></span>
<span class=normal><a href=#__codelineno-0-177>177</a></span>
<span class=normal><a href=#__codelineno-0-178>178</a></span>
<span class=normal><a href=#__codelineno-0-179>179</a></span>
<span class=normal><a href=#__codelineno-0-180>180</a></span>
<span class=normal><a href=#__codelineno-0-181>181</a></span>
<span class=normal><a href=#__codelineno-0-182>182</a></span>
<span class=normal><a href=#__codelineno-0-183>183</a></span>
<span class=normal><a href=#__codelineno-0-184>184</a></span>
<span class=normal><a href=#__codelineno-0-185>185</a></span>
<span class=normal><a href=#__codelineno-0-186>186</a></span>
<span class=normal><a href=#__codelineno-0-187>187</a></span>
<span class=normal><a href=#__codelineno-0-188>188</a></span>
<span class=normal><a href=#__codelineno-0-189>189</a></span>
<span class=normal><a href=#__codelineno-0-190>190</a></span>
<span class=normal><a href=#__codelineno-0-191>191</a></span>
<span class=normal><a href=#__codelineno-0-192>192</a></span>
<span class=normal><a href=#__codelineno-0-193>193</a></span>
<span class=normal><a href=#__codelineno-0-194>194</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-169 name=__codelineno-0-169></a><span class=k>def</span> <span class=fm>__init__</span><span class=p>(</span>
<a id=__codelineno-0-170 name=__codelineno-0-170></a> <span class=bp>self</span><span class=p>,</span>
<a id=__codelineno-0-171 name=__codelineno-0-171></a> <span class=n>registered_name</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-172 name=__codelineno-0-172></a> <span class=n>component_id</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-173 name=__codelineno-0-173></a> <span class=n>outer_context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Context</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-174 name=__codelineno-0-174></a> <span class=n>fill_content</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>FillContent</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-175 name=__codelineno-0-175></a><span class=p>):</span>
<a id=__codelineno-0-176 name=__codelineno-0-176></a> <span class=c1># When user first instantiates the component class before calling</span>
<a id=__codelineno-0-177 name=__codelineno-0-177></a> <span class=c1># `render` or `render_to_response`, then we want to allow the render</span>
<a id=__codelineno-0-178 name=__codelineno-0-178></a> <span class=c1># function to make use of the instantiated object.</span>
<a id=__codelineno-0-179 name=__codelineno-0-179></a> <span class=c1>#</span>
<a id=__codelineno-0-180 name=__codelineno-0-180></a> <span class=c1># So while `MyComp.render()` creates a new instance of MyComp internally,</span>
<a id=__codelineno-0-181 name=__codelineno-0-181></a> <span class=c1># if we do `MyComp(registered_name=&quot;abc&quot;).render()`, then we use the</span>
<a id=__codelineno-0-182 name=__codelineno-0-182></a> <span class=c1># already-instantiated object.</span>
<a id=__codelineno-0-183 name=__codelineno-0-183></a> <span class=c1>#</span>
<a id=__codelineno-0-184 name=__codelineno-0-184></a> <span class=c1># To achieve that, we want to re-assign the class methods as instance methods.</span>
<a id=__codelineno-0-185 name=__codelineno-0-185></a> <span class=c1># For that we have to &quot;unwrap&quot; the class methods via __func__.</span>
<a id=__codelineno-0-186 name=__codelineno-0-186></a> <span class=c1># See https://stackoverflow.com/a/76706399/9788634</span>
<a id=__codelineno-0-187 name=__codelineno-0-187></a> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span> <span class=o>=</span> <span class=n>types</span><span class=o>.</span><span class=n>MethodType</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=vm>__class__</span><span class=o>.</span><span class=n>render_to_response</span><span class=o>.</span><span class=vm>__func__</span><span class=p>,</span> <span class=bp>self</span><span class=p>)</span> <span class=c1># type: ignore</span>
<a id=__codelineno-0-188 name=__codelineno-0-188></a> <span class=bp>self</span><span class=o>.</span><span class=n>render</span> <span class=o>=</span> <span class=n>types</span><span class=o>.</span><span class=n>MethodType</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=vm>__class__</span><span class=o>.</span><span class=n>render</span><span class=o>.</span><span class=vm>__func__</span><span class=p>,</span> <span class=bp>self</span><span class=p>)</span> <span class=c1># type: ignore</span>
<a id=__codelineno-0-189 name=__codelineno-0-189></a>
<a id=__codelineno-0-190 name=__codelineno-0-190></a> <span class=bp>self</span><span class=o>.</span><span class=n>registered_name</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=n>registered_name</span>
<a id=__codelineno-0-191 name=__codelineno-0-191></a> <span class=bp>self</span><span class=o>.</span><span class=n>outer_context</span><span class=p>:</span> <span class=n>Context</span> <span class=o>=</span> <span class=n>outer_context</span> <span class=ow>or</span> <span class=n>Context</span><span class=p>()</span>
<a id=__codelineno-0-192 name=__codelineno-0-192></a> <span class=bp>self</span><span class=o>.</span><span class=n>fill_content</span> <span class=o>=</span> <span class=n>fill_content</span> <span class=ow>or</span> <span class=p>{}</span>
<a id=__codelineno-0-193 name=__codelineno-0-193></a> <span class=bp>self</span><span class=o>.</span><span class=n>component_id</span> <span class=o>=</span> <span class=n>component_id</span> <span class=ow>or</span> <span class=n>gen_id</span><span class=p>()</span>
<a id=__codelineno-0-194 name=__codelineno-0-194></a> <span class=bp>self</span><span class=o>.</span><span class=n>_render_stack</span><span class=p>:</span> <span class=n>Deque</span><span class=p>[</span><span class=n>RenderInput</span><span class=p>[</span><span class=n>ArgsType</span><span class=p>,</span> <span class=n>KwargsType</span><span class=p>,</span> <span class=n>SlotsType</span><span class=p>]]</span> <span class=o>=</span> <span class=n>deque</span><span class=p>()</span>
</code></pre></div></td></tr></table></div> </details> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.Media class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">Media</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.component.Component.Media class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>Media</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.component_media.ComponentMediaInput href=../component_media/#django_components.component_media.ComponentMediaInput>ComponentMediaInput</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Defines JS and CSS media files associated with this component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.css class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">css</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.component.Component.css class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>css</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p>Inlined CSS associated with this component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.input class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">input</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-property"><code>property</code></small> </span> <a href=#django_components.component.Component.input class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nb>input</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.RenderInput>RenderInput</span></span><span class=p>[</span><span class=n><span title=django_components.component.ArgsType>ArgsType</span></span><span class=p>,</span> <span class=n><span title=django_components.component.KwargsType>KwargsType</span></span><span class=p>,</span> <span class=n><span title=django_components.component.SlotsType>SlotsType</span></span><span class=p>]]</span>
</code></pre></div> <div class="doc doc-contents "> <p>Input holds the data (like arg, kwargs, slots) that were passsed to the current execution of the <code>render</code> method.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.js class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">js</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.component.Component.js class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>js</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p>Inlined JS associated with this component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.media class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">media</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.component.Component.media class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>media</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.component.Component.Media href=#django_components.component.Component.Media>Media</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Normalized definition of JS and CSS media files associated with this component.</p> <p>NOTE: This field is generated from Component.Media class.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.response_class class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">response_class</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.component.Component.response_class class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>response_class</span> <span class=o>=</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.0/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>This allows to configure what class is used to generate response from <code>render_to_response</code></p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.template class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> <small class="doc doc-label doc-label-instance-attribute"><code>instance-attribute</code></small> </span> <a href=#django_components.component.Component.template class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p>Inlined Django template associated with this component.</p> </div> </div> <div class="doc doc-object doc-attribute"> <h3 id=django_components.component.Component.template_name class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">template_name</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-class-attribute"><code>class-attribute</code></small> </span> <a href=#django_components.component.Component.template_name class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>template_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span>
</code></pre></div> <div class="doc doc-contents "> <p>Relative filepath to the Django template associated with this component.</p> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.component.Component.as_view class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">as_view</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.component.Component.as_view class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>as_view</span><span class=p>(</span><span class=o>**</span><span class=n>initkwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django_components.component.ViewFn>ViewFn</span></span>
</code></pre></div> <div class="doc doc-contents "> <p>Shortcut for calling <code>Component.View.as_view</code> and passing component instance to it.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-316>316</a></span>
<span class=normal><a href=#__codelineno-0-317>317</a></span>
<span class=normal><a href=#__codelineno-0-318>318</a></span>
<span class=normal><a href=#__codelineno-0-319>319</a></span>
<span class=normal><a href=#__codelineno-0-320>320</a></span>
<span class=normal><a href=#__codelineno-0-321>321</a></span>
<span class=normal><a href=#__codelineno-0-322>322</a></span>
<span class=normal><a href=#__codelineno-0-323>323</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-316 name=__codelineno-0-316></a><span class=nd>@classmethod</span>
<a id=__codelineno-0-317 name=__codelineno-0-317></a><span class=k>def</span> <span class=nf>as_view</span><span class=p>(</span><span class=bp>cls</span><span class=p>,</span> <span class=o>**</span><span class=n>initkwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>ViewFn</span><span class=p>:</span>
<a id=__codelineno-0-318 name=__codelineno-0-318></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-319 name=__codelineno-0-319></a><span class=sd> Shortcut for calling `Component.View.as_view` and passing component instance to it.</span>
<a id=__codelineno-0-320 name=__codelineno-0-320></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-321 name=__codelineno-0-321></a> <span class=c1># Allow the View class to access this component via `self.component`</span>
<a id=__codelineno-0-322 name=__codelineno-0-322></a> <span class=n>component</span> <span class=o>=</span> <span class=bp>cls</span><span class=p>()</span>
<a id=__codelineno-0-323 name=__codelineno-0-323></a> <span class=k>return</span> <span class=n>component</span><span class=o>.</span><span class=n>View</span><span class=o>.</span><span class=n>as_view</span><span class=p>(</span><span class=o>**</span><span class=n>initkwargs</span><span class=p>,</span> <span class=n>component</span><span class=o>=</span><span class=n>component</span><span class=p>)</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.component.Component.inject class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">inject</span> <a href=#django_components.component.Component.inject class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>inject</span><span class=p>(</span><span class=n>key</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n>default</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Use this method to retrieve the data that was passed to a <code>{% provide %}</code> tag with the corresponding key.</p> <p>To retrieve the data, <code>inject()</code> must be called inside a component that's inside the <code>{% provide %}</code> tag.</p> <p>You may also pass a default that will be used if the <code>provide</code> tag with given key was NOT found.</p> <p>This method mut be used inside the <code>get_context_data()</code> method and raises an error if called elsewhere.</p> <p>Example:</p> <p>Given this template: <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>provide</span> <span class=s2>&quot;provider&quot;</span> <span class=nv>hello</span><span class=o>=</span><span class=s2>&quot;world&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=cp>%}</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>endcomponent</span> <span class=cp>%}</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
</code></pre></div></p> <p>And given this definition of "my_comp" component: <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=k>class</span> <span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;hi {{ data.hello }}!&quot;</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;provider&quot;</span><span class=p>)</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;data&quot;</span><span class=p>:</span> <span class=n>data</span><span class=p>}</span>
</code></pre></div></p> <p>This renders into: <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a>hi world!
</code></pre></div></p> <p>As the <code>{{ data.hello }}</code> is taken from the "provider".</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-266>266</a></span>
<span class=normal><a href=#__codelineno-0-267>267</a></span>
<span class=normal><a href=#__codelineno-0-268>268</a></span>
<span class=normal><a href=#__codelineno-0-269>269</a></span>
<span class=normal><a href=#__codelineno-0-270>270</a></span>
<span class=normal><a href=#__codelineno-0-271>271</a></span>
<span class=normal><a href=#__codelineno-0-272>272</a></span>
<span class=normal><a href=#__codelineno-0-273>273</a></span>
<span class=normal><a href=#__codelineno-0-274>274</a></span>
<span class=normal><a href=#__codelineno-0-275>275</a></span>
<span class=normal><a href=#__codelineno-0-276>276</a></span>
<span class=normal><a href=#__codelineno-0-277>277</a></span>
<span class=normal><a href=#__codelineno-0-278>278</a></span>
<span class=normal><a href=#__codelineno-0-279>279</a></span>
<span class=normal><a href=#__codelineno-0-280>280</a></span>
<span class=normal><a href=#__codelineno-0-281>281</a></span>
<span class=normal><a href=#__codelineno-0-282>282</a></span>
<span class=normal><a href=#__codelineno-0-283>283</a></span>
<span class=normal><a href=#__codelineno-0-284>284</a></span>
<span class=normal><a href=#__codelineno-0-285>285</a></span>
<span class=normal><a href=#__codelineno-0-286>286</a></span>
<span class=normal><a href=#__codelineno-0-287>287</a></span>
<span class=normal><a href=#__codelineno-0-288>288</a></span>
<span class=normal><a href=#__codelineno-0-289>289</a></span>
<span class=normal><a href=#__codelineno-0-290>290</a></span>
<span class=normal><a href=#__codelineno-0-291>291</a></span>
<span class=normal><a href=#__codelineno-0-292>292</a></span>
<span class=normal><a href=#__codelineno-0-293>293</a></span>
<span class=normal><a href=#__codelineno-0-294>294</a></span>
<span class=normal><a href=#__codelineno-0-295>295</a></span>
<span class=normal><a href=#__codelineno-0-296>296</a></span>
<span class=normal><a href=#__codelineno-0-297>297</a></span>
<span class=normal><a href=#__codelineno-0-298>298</a></span>
<span class=normal><a href=#__codelineno-0-299>299</a></span>
<span class=normal><a href=#__codelineno-0-300>300</a></span>
<span class=normal><a href=#__codelineno-0-301>301</a></span>
<span class=normal><a href=#__codelineno-0-302>302</a></span>
<span class=normal><a href=#__codelineno-0-303>303</a></span>
<span class=normal><a href=#__codelineno-0-304>304</a></span>
<span class=normal><a href=#__codelineno-0-305>305</a></span>
<span class=normal><a href=#__codelineno-0-306>306</a></span>
<span class=normal><a href=#__codelineno-0-307>307</a></span>
<span class=normal><a href=#__codelineno-0-308>308</a></span>
<span class=normal><a href=#__codelineno-0-309>309</a></span>
<span class=normal><a href=#__codelineno-0-310>310</a></span>
<span class=normal><a href=#__codelineno-0-311>311</a></span>
<span class=normal><a href=#__codelineno-0-312>312</a></span>
<span class=normal><a href=#__codelineno-0-313>313</a></span>
<span class=normal><a href=#__codelineno-0-314>314</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-266 name=__codelineno-0-266></a><span class=k>def</span> <span class=nf>inject</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>key</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=n>default</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Any</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>Any</span><span class=p>:</span>
<a id=__codelineno-0-267 name=__codelineno-0-267></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-268 name=__codelineno-0-268></a><span class=sd> Use this method to retrieve the data that was passed to a `{% provide %}` tag</span>
<a id=__codelineno-0-269 name=__codelineno-0-269></a><span class=sd> with the corresponding key.</span>
<a id=__codelineno-0-270 name=__codelineno-0-270></a>
<a id=__codelineno-0-271 name=__codelineno-0-271></a><span class=sd> To retrieve the data, `inject()` must be called inside a component that&#39;s</span>
<a id=__codelineno-0-272 name=__codelineno-0-272></a><span class=sd> inside the `{% provide %}` tag.</span>
<a id=__codelineno-0-273 name=__codelineno-0-273></a>
<a id=__codelineno-0-274 name=__codelineno-0-274></a><span class=sd> You may also pass a default that will be used if the `provide` tag with given</span>
<a id=__codelineno-0-275 name=__codelineno-0-275></a><span class=sd> key was NOT found.</span>
<a id=__codelineno-0-276 name=__codelineno-0-276></a>
<a id=__codelineno-0-277 name=__codelineno-0-277></a><span class=sd> This method mut be used inside the `get_context_data()` method and raises</span>
<a id=__codelineno-0-278 name=__codelineno-0-278></a><span class=sd> an error if called elsewhere.</span>
<a id=__codelineno-0-279 name=__codelineno-0-279></a>
<a id=__codelineno-0-280 name=__codelineno-0-280></a><span class=sd> Example:</span>
<a id=__codelineno-0-281 name=__codelineno-0-281></a>
<a id=__codelineno-0-282 name=__codelineno-0-282></a><span class=sd> Given this template:</span>
<a id=__codelineno-0-283 name=__codelineno-0-283></a><span class=sd> ```django</span>
<a id=__codelineno-0-284 name=__codelineno-0-284></a><span class=sd> {% provide &quot;provider&quot; hello=&quot;world&quot; %}</span>
<a id=__codelineno-0-285 name=__codelineno-0-285></a><span class=sd> {% component &quot;my_comp&quot; %}</span>
<a id=__codelineno-0-286 name=__codelineno-0-286></a><span class=sd> {% endcomponent %}</span>
<a id=__codelineno-0-287 name=__codelineno-0-287></a><span class=sd> {% endprovide %}</span>
<a id=__codelineno-0-288 name=__codelineno-0-288></a><span class=sd> ```</span>
<a id=__codelineno-0-289 name=__codelineno-0-289></a>
<a id=__codelineno-0-290 name=__codelineno-0-290></a><span class=sd> And given this definition of &quot;my_comp&quot; component:</span>
<a id=__codelineno-0-291 name=__codelineno-0-291></a><span class=sd> ```py</span>
<a id=__codelineno-0-292 name=__codelineno-0-292></a><span class=sd> from django_components import Component, register</span>
<a id=__codelineno-0-293 name=__codelineno-0-293></a>
<a id=__codelineno-0-294 name=__codelineno-0-294></a><span class=sd> @register(&quot;my_comp&quot;)</span>
<a id=__codelineno-0-295 name=__codelineno-0-295></a><span class=sd> class MyComp(Component):</span>
<a id=__codelineno-0-296 name=__codelineno-0-296></a><span class=sd> template = &quot;hi {{ data.hello }}!&quot;</span>
<a id=__codelineno-0-297 name=__codelineno-0-297></a><span class=sd> def get_context_data(self):</span>
<a id=__codelineno-0-298 name=__codelineno-0-298></a><span class=sd> data = self.inject(&quot;provider&quot;)</span>
<a id=__codelineno-0-299 name=__codelineno-0-299></a><span class=sd> return {&quot;data&quot;: data}</span>
<a id=__codelineno-0-300 name=__codelineno-0-300></a><span class=sd> ```</span>
<a id=__codelineno-0-301 name=__codelineno-0-301></a>
<a id=__codelineno-0-302 name=__codelineno-0-302></a><span class=sd> This renders into:</span>
<a id=__codelineno-0-303 name=__codelineno-0-303></a><span class=sd> ```</span>
<a id=__codelineno-0-304 name=__codelineno-0-304></a><span class=sd> hi world!</span>
<a id=__codelineno-0-305 name=__codelineno-0-305></a><span class=sd> ```</span>
<a id=__codelineno-0-306 name=__codelineno-0-306></a>
<a id=__codelineno-0-307 name=__codelineno-0-307></a><span class=sd> As the `{{ data.hello }}` is taken from the &quot;provider&quot;.</span>
<a id=__codelineno-0-308 name=__codelineno-0-308></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-309 name=__codelineno-0-309></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span> <span class=ow>is</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-310 name=__codelineno-0-310></a> <span class=k>raise</span> <span class=ne>RuntimeError</span><span class=p>(</span>
<a id=__codelineno-0-311 name=__codelineno-0-311></a> <span class=sa>f</span><span class=s2>&quot;Method &#39;inject()&#39; of component &#39;</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=si>}</span><span class=s2>&#39; was called outside of &#39;get_context_data()&#39;&quot;</span>
<a id=__codelineno-0-312 name=__codelineno-0-312></a> <span class=p>)</span>
<a id=__codelineno-0-313 name=__codelineno-0-313></a>
<a id=__codelineno-0-314 name=__codelineno-0-314></a> <span class=k>return</span> <span class=n>get_injected_context_var</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>name</span><span class=p>,</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>context</span><span class=p>,</span> <span class=n>key</span><span class=p>,</span> <span class=n>default</span><span class=p>)</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.component.Component.render class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.component.Component.render class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>],</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.ArgsType>ArgsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.KwargsType>KwargsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.SlotsType>SlotsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Render the component into a string.</p> <p>Inputs: - <code>args</code> - Positional args for the component. This is the same as calling the component as <code>{% component "my_comp" arg1 arg2 ... %}</code> - <code>kwargs</code> - Kwargs for the component. This is the same as calling the component as <code>{% component "my_comp" key1=val1 key2=val2 ... %}</code> - <code>slots</code> - Component slot fills. This is the same as pasing <code>{% fill %}</code> tags to the component. Accepts a dictionary of <code>{ slot_name: slot_content }</code> where <code>slot_content</code> can be a string or render function. - <code>escape_slots_content</code> - Whether the content from <code>slots</code> should be escaped. - <code>context</code> - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs.</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=s2>&quot;two&quot;</span><span class=p>,</span> <span class=p>{}],</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;key&quot;</span><span class=p>:</span> <span class=mi>123</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p>},</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=s1>&#39;STATIC TEXT HERE&#39;</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>,</span> <span class=n>slot_kwargs</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>:</span> <span class=sa>f</span><span class=s1>&#39;CTX: </span><span class=si>{</span><span class=n>ctx</span><span class=p>[</span><span class=s1>&#39;hello&#39;</span><span class=p>]</span><span class=si>}</span><span class=s1> SLOT_DATA: </span><span class=si>{</span><span class=n>slot_kwargs</span><span class=p>[</span><span class=s1>&#39;abc&#39;</span><span class=p>]</span><span class=si>}</span><span class=s1>&#39;</span><span class=p>,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>},</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>escape_slots_content</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=p>)</span>
</code></pre></div></p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-388>388</a></span>
<span class=normal><a href=#__codelineno-0-389>389</a></span>
<span class=normal><a href=#__codelineno-0-390>390</a></span>
<span class=normal><a href=#__codelineno-0-391>391</a></span>
<span class=normal><a href=#__codelineno-0-392>392</a></span>
<span class=normal><a href=#__codelineno-0-393>393</a></span>
<span class=normal><a href=#__codelineno-0-394>394</a></span>
<span class=normal><a href=#__codelineno-0-395>395</a></span>
<span class=normal><a href=#__codelineno-0-396>396</a></span>
<span class=normal><a href=#__codelineno-0-397>397</a></span>
<span class=normal><a href=#__codelineno-0-398>398</a></span>
<span class=normal><a href=#__codelineno-0-399>399</a></span>
<span class=normal><a href=#__codelineno-0-400>400</a></span>
<span class=normal><a href=#__codelineno-0-401>401</a></span>
<span class=normal><a href=#__codelineno-0-402>402</a></span>
<span class=normal><a href=#__codelineno-0-403>403</a></span>
<span class=normal><a href=#__codelineno-0-404>404</a></span>
<span class=normal><a href=#__codelineno-0-405>405</a></span>
<span class=normal><a href=#__codelineno-0-406>406</a></span>
<span class=normal><a href=#__codelineno-0-407>407</a></span>
<span class=normal><a href=#__codelineno-0-408>408</a></span>
<span class=normal><a href=#__codelineno-0-409>409</a></span>
<span class=normal><a href=#__codelineno-0-410>410</a></span>
<span class=normal><a href=#__codelineno-0-411>411</a></span>
<span class=normal><a href=#__codelineno-0-412>412</a></span>
<span class=normal><a href=#__codelineno-0-413>413</a></span>
<span class=normal><a href=#__codelineno-0-414>414</a></span>
<span class=normal><a href=#__codelineno-0-415>415</a></span>
<span class=normal><a href=#__codelineno-0-416>416</a></span>
<span class=normal><a href=#__codelineno-0-417>417</a></span>
<span class=normal><a href=#__codelineno-0-418>418</a></span>
<span class=normal><a href=#__codelineno-0-419>419</a></span>
<span class=normal><a href=#__codelineno-0-420>420</a></span>
<span class=normal><a href=#__codelineno-0-421>421</a></span>
<span class=normal><a href=#__codelineno-0-422>422</a></span>
<span class=normal><a href=#__codelineno-0-423>423</a></span>
<span class=normal><a href=#__codelineno-0-424>424</a></span>
<span class=normal><a href=#__codelineno-0-425>425</a></span>
<span class=normal><a href=#__codelineno-0-426>426</a></span>
<span class=normal><a href=#__codelineno-0-427>427</a></span>
<span class=normal><a href=#__codelineno-0-428>428</a></span>
<span class=normal><a href=#__codelineno-0-429>429</a></span>
<span class=normal><a href=#__codelineno-0-430>430</a></span>
<span class=normal><a href=#__codelineno-0-431>431</a></span>
<span class=normal><a href=#__codelineno-0-432>432</a></span>
<span class=normal><a href=#__codelineno-0-433>433</a></span>
<span class=normal><a href=#__codelineno-0-434>434</a></span>
<span class=normal><a href=#__codelineno-0-435>435</a></span>
<span class=normal><a href=#__codelineno-0-436>436</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-388 name=__codelineno-0-388></a><span class=nd>@classmethod</span>
<a id=__codelineno-0-389 name=__codelineno-0-389></a><span class=k>def</span> <span class=nf>render</span><span class=p>(</span>
<a id=__codelineno-0-390 name=__codelineno-0-390></a> <span class=bp>cls</span><span class=p>,</span>
<a id=__codelineno-0-391 name=__codelineno-0-391></a> <span class=n>context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>],</span> <span class=n>Context</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-392 name=__codelineno-0-392></a> <span class=n>args</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ArgsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-393 name=__codelineno-0-393></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>KwargsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-394 name=__codelineno-0-394></a> <span class=n>slots</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-395 name=__codelineno-0-395></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-396 name=__codelineno-0-396></a><span class=p>)</span> <span class=o>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
<a id=__codelineno-0-397 name=__codelineno-0-397></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-398 name=__codelineno-0-398></a><span class=sd> Render the component into a string.</span>
<a id=__codelineno-0-399 name=__codelineno-0-399></a>
<a id=__codelineno-0-400 name=__codelineno-0-400></a><span class=sd> Inputs:</span>
<a id=__codelineno-0-401 name=__codelineno-0-401></a><span class=sd> - `args` - Positional args for the component. This is the same as calling the component</span>
<a id=__codelineno-0-402 name=__codelineno-0-402></a><span class=sd> as `{% component &quot;my_comp&quot; arg1 arg2 ... %}`</span>
<a id=__codelineno-0-403 name=__codelineno-0-403></a><span class=sd> - `kwargs` - Kwargs for the component. This is the same as calling the component</span>
<a id=__codelineno-0-404 name=__codelineno-0-404></a><span class=sd> as `{% component &quot;my_comp&quot; key1=val1 key2=val2 ... %}`</span>
<a id=__codelineno-0-405 name=__codelineno-0-405></a><span class=sd> - `slots` - Component slot fills. This is the same as pasing `{% fill %}` tags to the component.</span>
<a id=__codelineno-0-406 name=__codelineno-0-406></a><span class=sd> Accepts a dictionary of `{ slot_name: slot_content }` where `slot_content` can be a string</span>
<a id=__codelineno-0-407 name=__codelineno-0-407></a><span class=sd> or render function.</span>
<a id=__codelineno-0-408 name=__codelineno-0-408></a><span class=sd> - `escape_slots_content` - Whether the content from `slots` should be escaped.</span>
<a id=__codelineno-0-409 name=__codelineno-0-409></a><span class=sd> - `context` - A context (dictionary or Django&#39;s Context) within which the component</span>
<a id=__codelineno-0-410 name=__codelineno-0-410></a><span class=sd> is rendered. The keys on the context can be accessed from within the template.</span>
<a id=__codelineno-0-411 name=__codelineno-0-411></a><span class=sd> - NOTE: In &quot;isolated&quot; mode, context is NOT accessible, and data MUST be passed via</span>
<a id=__codelineno-0-412 name=__codelineno-0-412></a><span class=sd> component&#39;s args and kwargs.</span>
<a id=__codelineno-0-413 name=__codelineno-0-413></a>
<a id=__codelineno-0-414 name=__codelineno-0-414></a><span class=sd> Example:</span>
<a id=__codelineno-0-415 name=__codelineno-0-415></a><span class=sd> ```py</span>
<a id=__codelineno-0-416 name=__codelineno-0-416></a><span class=sd> MyComponent.render(</span>
<a id=__codelineno-0-417 name=__codelineno-0-417></a><span class=sd> args=[1, &quot;two&quot;, {}],</span>
<a id=__codelineno-0-418 name=__codelineno-0-418></a><span class=sd> kwargs={</span>
<a id=__codelineno-0-419 name=__codelineno-0-419></a><span class=sd> &quot;key&quot;: 123,</span>
<a id=__codelineno-0-420 name=__codelineno-0-420></a><span class=sd> },</span>
<a id=__codelineno-0-421 name=__codelineno-0-421></a><span class=sd> slots={</span>
<a id=__codelineno-0-422 name=__codelineno-0-422></a><span class=sd> &quot;header&quot;: &#39;STATIC TEXT HERE&#39;,</span>
<a id=__codelineno-0-423 name=__codelineno-0-423></a><span class=sd> &quot;footer&quot;: lambda ctx, slot_kwargs, slot_ref: f&#39;CTX: {ctx[&#39;hello&#39;]} SLOT_DATA: {slot_kwargs[&#39;abc&#39;]}&#39;,</span>
<a id=__codelineno-0-424 name=__codelineno-0-424></a><span class=sd> },</span>
<a id=__codelineno-0-425 name=__codelineno-0-425></a><span class=sd> escape_slots_content=False,</span>
<a id=__codelineno-0-426 name=__codelineno-0-426></a><span class=sd> )</span>
<a id=__codelineno-0-427 name=__codelineno-0-427></a><span class=sd> ```</span>
<a id=__codelineno-0-428 name=__codelineno-0-428></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-429 name=__codelineno-0-429></a> <span class=c1># This method may be called as class method or as instance method.</span>
<a id=__codelineno-0-430 name=__codelineno-0-430></a> <span class=c1># If called as class method, create a new instance.</span>
<a id=__codelineno-0-431 name=__codelineno-0-431></a> <span class=k>if</span> <span class=nb>isinstance</span><span class=p>(</span><span class=bp>cls</span><span class=p>,</span> <span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-432 name=__codelineno-0-432></a> <span class=n>comp</span><span class=p>:</span> <span class=n>Component</span> <span class=o>=</span> <span class=bp>cls</span>
<a id=__codelineno-0-433 name=__codelineno-0-433></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-434 name=__codelineno-0-434></a> <span class=n>comp</span> <span class=o>=</span> <span class=bp>cls</span><span class=p>()</span>
<a id=__codelineno-0-435 name=__codelineno-0-435></a>
<a id=__codelineno-0-436 name=__codelineno-0-436></a> <span class=k>return</span> <span class=n>comp</span><span class=o>.</span><span class=n>_render</span><span class=p>(</span><span class=n>context</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>escape_slots_content</span><span class=p>)</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.component.Component.render_css_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render_css_dependencies</span> <a href=#django_components.component.Component.render_css_dependencies class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>render_css_dependencies</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.utils.safestring.SafeString href=https://docs.djangoproject.com/en/5.0/ref/utils/#django.utils.safestring.SafeString>SafeString</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Render only CSS dependencies available in the media class or provided as a string.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-254>254</a></span>
<span class=normal><a href=#__codelineno-0-255>255</a></span>
<span class=normal><a href=#__codelineno-0-256>256</a></span>
<span class=normal><a href=#__codelineno-0-257>257</a></span>
<span class=normal><a href=#__codelineno-0-258>258</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-254 name=__codelineno-0-254></a><span class=k>def</span> <span class=nf>render_css_dependencies</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span>
<a id=__codelineno-0-255 name=__codelineno-0-255></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Render only CSS dependencies available in the media class or provided as a string.&quot;&quot;&quot;</span>
<a id=__codelineno-0-256 name=__codelineno-0-256></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>css</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-257 name=__codelineno-0-257></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;&lt;style&gt;</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>css</span><span class=si>}</span><span class=s2>&lt;/style&gt;&quot;</span><span class=p>)</span>
<a id=__codelineno-0-258 name=__codelineno-0-258></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>render_css</span><span class=p>()))</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.component.Component.render_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render_dependencies</span> <a href=#django_components.component.Component.render_dependencies class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>render_dependencies</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.utils.safestring.SafeString href=https://docs.djangoproject.com/en/5.0/ref/utils/#django.utils.safestring.SafeString>SafeString</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Helper function to render all dependencies for a component.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-240>240</a></span>
<span class=normal><a href=#__codelineno-0-241>241</a></span>
<span class=normal><a href=#__codelineno-0-242>242</a></span>
<span class=normal><a href=#__codelineno-0-243>243</a></span>
<span class=normal><a href=#__codelineno-0-244>244</a></span>
<span class=normal><a href=#__codelineno-0-245>245</a></span>
<span class=normal><a href=#__codelineno-0-246>246</a></span>
<span class=normal><a href=#__codelineno-0-247>247</a></span>
<span class=normal><a href=#__codelineno-0-248>248</a></span>
<span class=normal><a href=#__codelineno-0-249>249</a></span>
<span class=normal><a href=#__codelineno-0-250>250</a></span>
<span class=normal><a href=#__codelineno-0-251>251</a></span>
<span class=normal><a href=#__codelineno-0-252>252</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-240 name=__codelineno-0-240></a><span class=k>def</span> <span class=nf>render_dependencies</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span>
<a id=__codelineno-0-241 name=__codelineno-0-241></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Helper function to render all dependencies for a component.&quot;&quot;&quot;</span>
<a id=__codelineno-0-242 name=__codelineno-0-242></a> <span class=n>dependencies</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-0-243 name=__codelineno-0-243></a>
<a id=__codelineno-0-244 name=__codelineno-0-244></a> <span class=n>css_deps</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_css_dependencies</span><span class=p>()</span>
<a id=__codelineno-0-245 name=__codelineno-0-245></a> <span class=k>if</span> <span class=n>css_deps</span><span class=p>:</span>
<a id=__codelineno-0-246 name=__codelineno-0-246></a> <span class=n>dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>css_deps</span><span class=p>)</span>
<a id=__codelineno-0-247 name=__codelineno-0-247></a>
<a id=__codelineno-0-248 name=__codelineno-0-248></a> <span class=n>js_deps</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_js_dependencies</span><span class=p>()</span>
<a id=__codelineno-0-249 name=__codelineno-0-249></a> <span class=k>if</span> <span class=n>js_deps</span><span class=p>:</span>
<a id=__codelineno-0-250 name=__codelineno-0-250></a> <span class=n>dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>js_deps</span><span class=p>)</span>
<a id=__codelineno-0-251 name=__codelineno-0-251></a>
<a id=__codelineno-0-252 name=__codelineno-0-252></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>dependencies</span><span class=p>))</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.component.Component.render_js_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render_js_dependencies</span> <a href=#django_components.component.Component.render_js_dependencies class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>render_js_dependencies</span><span class=p>()</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.utils.safestring.SafeString href=https://docs.djangoproject.com/en/5.0/ref/utils/#django.utils.safestring.SafeString>SafeString</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Render only JS dependencies available in the media class or provided as a string.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-260>260</a></span>
<span class=normal><a href=#__codelineno-0-261>261</a></span>
<span class=normal><a href=#__codelineno-0-262>262</a></span>
<span class=normal><a href=#__codelineno-0-263>263</a></span>
<span class=normal><a href=#__codelineno-0-264>264</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-260 name=__codelineno-0-260></a><span class=k>def</span> <span class=nf>render_js_dependencies</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span>
<a id=__codelineno-0-261 name=__codelineno-0-261></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Render only JS dependencies available in the media class or provided as a string.&quot;&quot;&quot;</span>
<a id=__codelineno-0-262 name=__codelineno-0-262></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>js</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-263 name=__codelineno-0-263></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;&lt;script&gt;</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>js</span><span class=si>}</span><span class=s2>&lt;/script&gt;&quot;</span><span class=p>)</span>
<a id=__codelineno-0-264 name=__codelineno-0-264></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>media</span><span class=o>.</span><span class=n>render_js</span><span class=p>()))</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h3 id=django_components.component.Component.render_to_response class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-method"></code> <span class="doc doc-object-name doc-function-name">render_to_response</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-classmethod"><code>classmethod</code></small> </span> <a href=#django_components.component.Component.render_to_response class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>render_to_response</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Union href=https://docs.python.org/3.12/library/typing.html#typing.Union>Union</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.Dict href=https://docs.python.org/3.12/library/typing.html#typing.Dict>Dict</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>],</span> <span class=n><span title=django.template.context.Context>Context</span></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>slots</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.SlotsType>SlotsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.ArgsType>ArgsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><span title=django_components.component.KwargsType>KwargsType</span></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=o>*</span><span class=n>response_args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.0/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Render the component and wrap the content in the response class.</p> <p>The response class is taken from <code>Component.response_class</code>. Defaults to <code>django.http.HttpResponse</code>.</p> <p>This is the interface for the <code>django.views.View</code> class which allows us to use components as Django views with <code>component.as_view()</code>.</p> <p>Inputs: - <code>args</code> - Positional args for the component. This is the same as calling the component as <code>{% component "my_comp" arg1 arg2 ... %}</code> - <code>kwargs</code> - Kwargs for the component. This is the same as calling the component as <code>{% component "my_comp" key1=val1 key2=val2 ... %}</code> - <code>slots</code> - Component slot fills. This is the same as pasing <code>{% fill %}</code> tags to the component. Accepts a dictionary of <code>{ slot_name: slot_content }</code> where <code>slot_content</code> can be a string or render function. - <code>escape_slots_content</code> - Whether the content from <code>slots</code> should be escaped. - <code>context</code> - A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs.</p> <p>Any additional args and kwargs are passed to the <code>response_class</code>.</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=s2>&quot;two&quot;</span><span class=p>,</span> <span class=p>{}],</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=s2>&quot;key&quot;</span><span class=p>:</span> <span class=mi>123</span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=p>},</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=s2>&quot;header&quot;</span><span class=p>:</span> <span class=s1>&#39;STATIC TEXT HERE&#39;</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=s2>&quot;footer&quot;</span><span class=p>:</span> <span class=k>lambda</span> <span class=n>ctx</span><span class=p>,</span> <span class=n>slot_kwargs</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>:</span> <span class=sa>f</span><span class=s1>&#39;CTX: </span><span class=si>{</span><span class=n>ctx</span><span class=p>[</span><span class=s1>&#39;hello&#39;</span><span class=p>]</span><span class=si>}</span><span class=s1> SLOT_DATA: </span><span class=si>{</span><span class=n>slot_kwargs</span><span class=p>[</span><span class=s1>&#39;abc&#39;</span><span class=p>]</span><span class=si>}</span><span class=s1>&#39;</span><span class=p>,</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=p>},</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>escape_slots_content</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=c1># HttpResponse input</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=n>status</span><span class=o>=</span><span class=mi>201</span><span class=p>,</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=n>headers</span><span class=o>=</span><span class=p>{</span><span class=o>...</span><span class=p>},</span>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a><span class=p>)</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a><span class=c1># HttpResponse(content=..., status=201, headers=...)</span>
</code></pre></div></p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-325>325</a></span>
<span class=normal><a href=#__codelineno-0-326>326</a></span>
<span class=normal><a href=#__codelineno-0-327>327</a></span>
<span class=normal><a href=#__codelineno-0-328>328</a></span>
<span class=normal><a href=#__codelineno-0-329>329</a></span>
<span class=normal><a href=#__codelineno-0-330>330</a></span>
<span class=normal><a href=#__codelineno-0-331>331</a></span>
<span class=normal><a href=#__codelineno-0-332>332</a></span>
<span class=normal><a href=#__codelineno-0-333>333</a></span>
<span class=normal><a href=#__codelineno-0-334>334</a></span>
<span class=normal><a href=#__codelineno-0-335>335</a></span>
<span class=normal><a href=#__codelineno-0-336>336</a></span>
<span class=normal><a href=#__codelineno-0-337>337</a></span>
<span class=normal><a href=#__codelineno-0-338>338</a></span>
<span class=normal><a href=#__codelineno-0-339>339</a></span>
<span class=normal><a href=#__codelineno-0-340>340</a></span>
<span class=normal><a href=#__codelineno-0-341>341</a></span>
<span class=normal><a href=#__codelineno-0-342>342</a></span>
<span class=normal><a href=#__codelineno-0-343>343</a></span>
<span class=normal><a href=#__codelineno-0-344>344</a></span>
<span class=normal><a href=#__codelineno-0-345>345</a></span>
<span class=normal><a href=#__codelineno-0-346>346</a></span>
<span class=normal><a href=#__codelineno-0-347>347</a></span>
<span class=normal><a href=#__codelineno-0-348>348</a></span>
<span class=normal><a href=#__codelineno-0-349>349</a></span>
<span class=normal><a href=#__codelineno-0-350>350</a></span>
<span class=normal><a href=#__codelineno-0-351>351</a></span>
<span class=normal><a href=#__codelineno-0-352>352</a></span>
<span class=normal><a href=#__codelineno-0-353>353</a></span>
<span class=normal><a href=#__codelineno-0-354>354</a></span>
<span class=normal><a href=#__codelineno-0-355>355</a></span>
<span class=normal><a href=#__codelineno-0-356>356</a></span>
<span class=normal><a href=#__codelineno-0-357>357</a></span>
<span class=normal><a href=#__codelineno-0-358>358</a></span>
<span class=normal><a href=#__codelineno-0-359>359</a></span>
<span class=normal><a href=#__codelineno-0-360>360</a></span>
<span class=normal><a href=#__codelineno-0-361>361</a></span>
<span class=normal><a href=#__codelineno-0-362>362</a></span>
<span class=normal><a href=#__codelineno-0-363>363</a></span>
<span class=normal><a href=#__codelineno-0-364>364</a></span>
<span class=normal><a href=#__codelineno-0-365>365</a></span>
<span class=normal><a href=#__codelineno-0-366>366</a></span>
<span class=normal><a href=#__codelineno-0-367>367</a></span>
<span class=normal><a href=#__codelineno-0-368>368</a></span>
<span class=normal><a href=#__codelineno-0-369>369</a></span>
<span class=normal><a href=#__codelineno-0-370>370</a></span>
<span class=normal><a href=#__codelineno-0-371>371</a></span>
<span class=normal><a href=#__codelineno-0-372>372</a></span>
<span class=normal><a href=#__codelineno-0-373>373</a></span>
<span class=normal><a href=#__codelineno-0-374>374</a></span>
<span class=normal><a href=#__codelineno-0-375>375</a></span>
<span class=normal><a href=#__codelineno-0-376>376</a></span>
<span class=normal><a href=#__codelineno-0-377>377</a></span>
<span class=normal><a href=#__codelineno-0-378>378</a></span>
<span class=normal><a href=#__codelineno-0-379>379</a></span>
<span class=normal><a href=#__codelineno-0-380>380</a></span>
<span class=normal><a href=#__codelineno-0-381>381</a></span>
<span class=normal><a href=#__codelineno-0-382>382</a></span>
<span class=normal><a href=#__codelineno-0-383>383</a></span>
<span class=normal><a href=#__codelineno-0-384>384</a></span>
<span class=normal><a href=#__codelineno-0-385>385</a></span>
<span class=normal><a href=#__codelineno-0-386>386</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-325 name=__codelineno-0-325></a><span class=nd>@classmethod</span>
<a id=__codelineno-0-326 name=__codelineno-0-326></a><span class=k>def</span> <span class=nf>render_to_response</span><span class=p>(</span>
<a id=__codelineno-0-327 name=__codelineno-0-327></a> <span class=bp>cls</span><span class=p>,</span>
<a id=__codelineno-0-328 name=__codelineno-0-328></a> <span class=n>context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>],</span> <span class=n>Context</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-329 name=__codelineno-0-329></a> <span class=n>slots</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-330 name=__codelineno-0-330></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-331 name=__codelineno-0-331></a> <span class=n>args</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ArgsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-332 name=__codelineno-0-332></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>KwargsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-333 name=__codelineno-0-333></a> <span class=o>*</span><span class=n>response_args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span>
<a id=__codelineno-0-334 name=__codelineno-0-334></a> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span>
<a id=__codelineno-0-335 name=__codelineno-0-335></a><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>HttpResponse</span><span class=p>:</span>
<a id=__codelineno-0-336 name=__codelineno-0-336></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-337 name=__codelineno-0-337></a><span class=sd> Render the component and wrap the content in the response class.</span>
<a id=__codelineno-0-338 name=__codelineno-0-338></a>
<a id=__codelineno-0-339 name=__codelineno-0-339></a><span class=sd> The response class is taken from `Component.response_class`. Defaults to `django.http.HttpResponse`.</span>
<a id=__codelineno-0-340 name=__codelineno-0-340></a>
<a id=__codelineno-0-341 name=__codelineno-0-341></a><span class=sd> This is the interface for the `django.views.View` class which allows us to</span>
<a id=__codelineno-0-342 name=__codelineno-0-342></a><span class=sd> use components as Django views with `component.as_view()`.</span>
<a id=__codelineno-0-343 name=__codelineno-0-343></a>
<a id=__codelineno-0-344 name=__codelineno-0-344></a><span class=sd> Inputs:</span>
<a id=__codelineno-0-345 name=__codelineno-0-345></a><span class=sd> - `args` - Positional args for the component. This is the same as calling the component</span>
<a id=__codelineno-0-346 name=__codelineno-0-346></a><span class=sd> as `{% component &quot;my_comp&quot; arg1 arg2 ... %}`</span>
<a id=__codelineno-0-347 name=__codelineno-0-347></a><span class=sd> - `kwargs` - Kwargs for the component. This is the same as calling the component</span>
<a id=__codelineno-0-348 name=__codelineno-0-348></a><span class=sd> as `{% component &quot;my_comp&quot; key1=val1 key2=val2 ... %}`</span>
<a id=__codelineno-0-349 name=__codelineno-0-349></a><span class=sd> - `slots` - Component slot fills. This is the same as pasing `{% fill %}` tags to the component.</span>
<a id=__codelineno-0-350 name=__codelineno-0-350></a><span class=sd> Accepts a dictionary of `{ slot_name: slot_content }` where `slot_content` can be a string</span>
<a id=__codelineno-0-351 name=__codelineno-0-351></a><span class=sd> or render function.</span>
<a id=__codelineno-0-352 name=__codelineno-0-352></a><span class=sd> - `escape_slots_content` - Whether the content from `slots` should be escaped.</span>
<a id=__codelineno-0-353 name=__codelineno-0-353></a><span class=sd> - `context` - A context (dictionary or Django&#39;s Context) within which the component</span>
<a id=__codelineno-0-354 name=__codelineno-0-354></a><span class=sd> is rendered. The keys on the context can be accessed from within the template.</span>
<a id=__codelineno-0-355 name=__codelineno-0-355></a><span class=sd> - NOTE: In &quot;isolated&quot; mode, context is NOT accessible, and data MUST be passed via</span>
<a id=__codelineno-0-356 name=__codelineno-0-356></a><span class=sd> component&#39;s args and kwargs.</span>
<a id=__codelineno-0-357 name=__codelineno-0-357></a>
<a id=__codelineno-0-358 name=__codelineno-0-358></a><span class=sd> Any additional args and kwargs are passed to the `response_class`.</span>
<a id=__codelineno-0-359 name=__codelineno-0-359></a>
<a id=__codelineno-0-360 name=__codelineno-0-360></a><span class=sd> Example:</span>
<a id=__codelineno-0-361 name=__codelineno-0-361></a><span class=sd> ```py</span>
<a id=__codelineno-0-362 name=__codelineno-0-362></a><span class=sd> MyComponent.render_to_response(</span>
<a id=__codelineno-0-363 name=__codelineno-0-363></a><span class=sd> args=[1, &quot;two&quot;, {}],</span>
<a id=__codelineno-0-364 name=__codelineno-0-364></a><span class=sd> kwargs={</span>
<a id=__codelineno-0-365 name=__codelineno-0-365></a><span class=sd> &quot;key&quot;: 123,</span>
<a id=__codelineno-0-366 name=__codelineno-0-366></a><span class=sd> },</span>
<a id=__codelineno-0-367 name=__codelineno-0-367></a><span class=sd> slots={</span>
<a id=__codelineno-0-368 name=__codelineno-0-368></a><span class=sd> &quot;header&quot;: &#39;STATIC TEXT HERE&#39;,</span>
<a id=__codelineno-0-369 name=__codelineno-0-369></a><span class=sd> &quot;footer&quot;: lambda ctx, slot_kwargs, slot_ref: f&#39;CTX: {ctx[&#39;hello&#39;]} SLOT_DATA: {slot_kwargs[&#39;abc&#39;]}&#39;,</span>
<a id=__codelineno-0-370 name=__codelineno-0-370></a><span class=sd> },</span>
<a id=__codelineno-0-371 name=__codelineno-0-371></a><span class=sd> escape_slots_content=False,</span>
<a id=__codelineno-0-372 name=__codelineno-0-372></a><span class=sd> # HttpResponse input</span>
<a id=__codelineno-0-373 name=__codelineno-0-373></a><span class=sd> status=201,</span>
<a id=__codelineno-0-374 name=__codelineno-0-374></a><span class=sd> headers={...},</span>
<a id=__codelineno-0-375 name=__codelineno-0-375></a><span class=sd> )</span>
<a id=__codelineno-0-376 name=__codelineno-0-376></a><span class=sd> # HttpResponse(content=..., status=201, headers=...)</span>
<a id=__codelineno-0-377 name=__codelineno-0-377></a><span class=sd> ```</span>
<a id=__codelineno-0-378 name=__codelineno-0-378></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-379 name=__codelineno-0-379></a> <span class=n>content</span> <span class=o>=</span> <span class=bp>cls</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-380 name=__codelineno-0-380></a> <span class=n>args</span><span class=o>=</span><span class=n>args</span><span class=p>,</span>
<a id=__codelineno-0-381 name=__codelineno-0-381></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>kwargs</span><span class=p>,</span>
<a id=__codelineno-0-382 name=__codelineno-0-382></a> <span class=n>context</span><span class=o>=</span><span class=n>context</span><span class=p>,</span>
<a id=__codelineno-0-383 name=__codelineno-0-383></a> <span class=n>slots</span><span class=o>=</span><span class=n>slots</span><span class=p>,</span>
<a id=__codelineno-0-384 name=__codelineno-0-384></a> <span class=n>escape_slots_content</span><span class=o>=</span><span class=n>escape_slots_content</span><span class=p>,</span>
<a id=__codelineno-0-385 name=__codelineno-0-385></a> <span class=p>)</span>
<a id=__codelineno-0-386 name=__codelineno-0-386></a> <span class=k>return</span> <span class=bp>cls</span><span class=o>.</span><span class=n>response_class</span><span class=p>(</span><span class=n>content</span><span class=p>,</span> <span class=o>*</span><span class=n>response_args</span><span class=p>,</span> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>)</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.component.ComponentNode class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentNode</span> <a href=#django_components.component.ComponentNode class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>ComponentNode</span><span class=p>(</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=n>args</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><span title=django_components.expression.Expression>Expression</span></span><span class=p>],</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n><span title=django_components.expression.RuntimeKwargs>RuntimeKwargs</span></span><span class=p>,</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>isolated_context</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/functions.html#bool>bool</a></span> <span class=o>=</span> <span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>fill_nodes</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" title=typing.List href=https://docs.python.org/3.12/library/typing.html#typing.List>List</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-internal" title=django_components.slots.FillNode href=../slots/#django_components.slots.FillNode>FillNode</a></span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=n>node_id</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Optional href=https://docs.python.org/3.12/library/typing.html#typing.Optional>Optional</a></span><span class=p>[</span><span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> <p class="doc doc-class-bases"> Bases: <code><a class="autorefs autorefs-internal" title=django_components.node.BaseNode href=../node/#django_components.node.BaseNode>BaseNode</a></code></p> <p>Django.template.Node subclass that renders a django-components component</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-595>595</a></span>
<span class=normal><a href=#__codelineno-0-596>596</a></span>
<span class=normal><a href=#__codelineno-0-597>597</a></span>
<span class=normal><a href=#__codelineno-0-598>598</a></span>
<span class=normal><a href=#__codelineno-0-599>599</a></span>
<span class=normal><a href=#__codelineno-0-600>600</a></span>
<span class=normal><a href=#__codelineno-0-601>601</a></span>
<span class=normal><a href=#__codelineno-0-602>602</a></span>
<span class=normal><a href=#__codelineno-0-603>603</a></span>
<span class=normal><a href=#__codelineno-0-604>604</a></span>
<span class=normal><a href=#__codelineno-0-605>605</a></span>
<span class=normal><a href=#__codelineno-0-606>606</a></span>
<span class=normal><a href=#__codelineno-0-607>607</a></span>
<span class=normal><a href=#__codelineno-0-608>608</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-595 name=__codelineno-0-595></a><span class=k>def</span> <span class=fm>__init__</span><span class=p>(</span>
<a id=__codelineno-0-596 name=__codelineno-0-596></a> <span class=bp>self</span><span class=p>,</span>
<a id=__codelineno-0-597 name=__codelineno-0-597></a> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span>
<a id=__codelineno-0-598 name=__codelineno-0-598></a> <span class=n>args</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=n>Expression</span><span class=p>],</span>
<a id=__codelineno-0-599 name=__codelineno-0-599></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>RuntimeKwargs</span><span class=p>,</span>
<a id=__codelineno-0-600 name=__codelineno-0-600></a> <span class=n>isolated_context</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-601 name=__codelineno-0-601></a> <span class=n>fill_nodes</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>List</span><span class=p>[</span><span class=n>FillNode</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-602 name=__codelineno-0-602></a> <span class=n>node_id</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-0-603 name=__codelineno-0-603></a><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-604 name=__codelineno-0-604></a> <span class=nb>super</span><span class=p>()</span><span class=o>.</span><span class=fm>__init__</span><span class=p>(</span><span class=n>nodelist</span><span class=o>=</span><span class=n>NodeList</span><span class=p>(</span><span class=n>fill_nodes</span><span class=p>),</span> <span class=n>args</span><span class=o>=</span><span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=o>=</span><span class=n>kwargs</span><span class=p>,</span> <span class=n>node_id</span><span class=o>=</span><span class=n>node_id</span><span class=p>)</span>
<a id=__codelineno-0-605 name=__codelineno-0-605></a>
<a id=__codelineno-0-606 name=__codelineno-0-606></a> <span class=bp>self</span><span class=o>.</span><span class=n>name</span> <span class=o>=</span> <span class=n>name</span>
<a id=__codelineno-0-607 name=__codelineno-0-607></a> <span class=bp>self</span><span class=o>.</span><span class=n>isolated_context</span> <span class=o>=</span> <span class=n>isolated_context</span>
<a id=__codelineno-0-608 name=__codelineno-0-608></a> <span class=bp>self</span><span class=o>.</span><span class=n>fill_nodes</span> <span class=o>=</span> <span class=n>fill_nodes</span> <span class=ow>or</span> <span class=p>[]</span>
</code></pre></div></td></tr></table></div> </details> <div class="doc doc-children"> </div> </div> </div> <div class="doc doc-object doc-class"> <h2 id=django_components.component.ComponentView class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentView</span> <a href=#django_components.component.ComponentView class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>ComponentView</span><span class=p>(</span><span class=n>component</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.component.Component href=#django_components.component.Component>Component</a></span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Any href=https://docs.python.org/3.12/library/typing.html#typing.Any>Any</a></span><span class=p>)</span>
</code></pre></div> <div class="doc doc-contents "> <p class="doc doc-class-bases"> Bases: <code><span title=django.views.View>View</span></code></p> <p>Subclass of <code>django.views.View</code> where the <code>Component</code> instance is available via <code>self.component</code>.</p> <details class=quote> <summary>Source code in <code>src/django_components/component.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-136>136</a></span>
<span class=normal><a href=#__codelineno-0-137>137</a></span>
<span class=normal><a href=#__codelineno-0-138>138</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-136 name=__codelineno-0-136></a><span class=k>def</span> <span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>component</span><span class=p>:</span> <span class=s2>&quot;Component&quot;</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-137 name=__codelineno-0-137></a> <span class=nb>super</span><span class=p>()</span><span class=o>.</span><span class=fm>__init__</span><span class=p>(</span><span class=o>**</span><span class=n>kwargs</span><span class=p>)</span>
<a id=__codelineno-0-138 name=__codelineno-0-138></a> <span class=bp>self</span><span class=o>.</span><span class=n>component</span> <span class=o>=</span> <span class=n>component</span>
</code></pre></div></td></tr></table></div> </details> <div class="doc doc-children"> </div> </div> </div> </div> </div> </div> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(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 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../autodiscover/ class="md-footer__link md-footer__link--prev" aria-label='Previous: <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> autodiscover'> <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 11h12Z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> autodiscover </div> </div> </a> <a href=../component_media/ class="md-footer__link md-footer__link--next" aria-label='Next: <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_media'> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_media </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 11H4Z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/EmilStenstrom/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.5.1 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 2023 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.6zm-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.3zm44.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.9zM244.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 8zM97.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-1zm-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.7zm32.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-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></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.5.1 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 2023 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.6zM286.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.3zM167.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.4zm-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.3z"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"default": ["latest", "dev"], "provider": "mike"}}</script> <script src=../../../assets/javascripts/bundle.bd41221c.min.js></script> <script src=../../../assets/_markdown_exec_pyodide.js></script> </body> </html>
Reference in a new issue View git blame Copy permalink