mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-08-10 09:17:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
django-components/0.119/concepts/advanced/authoring_component_libraries/index.html

121 lines
No EOL
61 KiB
HTML
Raw Blame History

<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://emilstenstrom.github.io/django-components/latest/concepts/advanced/authoring_component_libraries/ rel=canonical><link href=../tag_formatter/ rel=prev><link href=../../../guides/setup/syntax_highlight/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.5.43"><title>Authoring component libraries - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.0253249f.min.css><link rel=stylesheet href=../../../assets/stylesheets/palette.06af60db.min.css><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../../assets/_markdown_exec_pyodide.css><link rel=stylesheet href=../../../assets/_mkdocstrings.css><link rel=stylesheet href=../../../css/timeago.css><link rel=stylesheet href=../../../css/style.css><script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="Authoring component libraries - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/concepts/advanced/authoring_component_libraries.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://emilstenstrom.github.io/django-components/latest/concepts/advanced/authoring_component_libraries/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Authoring component libraries - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/concepts/advanced/authoring_component_libraries.png></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#writing-component-libraries 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 data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Authoring component libraries </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../../../overview/welcome/ class=md-tabs__link> Get Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../../fundamentals/your_first_component/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../../guides/setup/syntax_highlight/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../../reference/api/ class=md-tabs__link> API Documentation </a> </li> <li class=md-tabs__item> <a href=../../../release_notes/ class=md-tabs__link> Release notes </a> </li> </ul> </div> </nav> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/EmilStenstrom/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex=0> <span class=md-ellipsis> Get Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <span class="md-nav__icon md-icon"></span> Get Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../overview/welcome/ class=md-nav__link> <span class=md-ellipsis> Welcome to Django Components </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/compatibility/ class=md-nav__link> <span class=md-ellipsis> Compatibility </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/installation/ class=md-nav__link> <span class=md-ellipsis> Installation </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/security_notes/ class=md-nav__link> <span class=md-ellipsis> Security notes 🚨 </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/community/ class=md-nav__link> <span class=md-ellipsis> Community </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributing </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/development/ class=md-nav__link> <span class=md-ellipsis> Development </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/code_of_conduct/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Concepts </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Concepts </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1> <label class=md-nav__link for=__nav_2_1 id=__nav_2_1_label tabindex> <span class=md-ellipsis> Fundamentals </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_1_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../fundamentals/your_first_component/ class=md-nav__link> <span class=md-ellipsis> Create your first component </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/single_file_components/ class=md-nav__link> <span class=md-ellipsis> Single-file components </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/components_in_templates/ class=md-nav__link> <span class=md-ellipsis> Components in templates </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/components_in_python/ class=md-nav__link> <span class=md-ellipsis> Components in Python </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/access_component_input/ class=md-nav__link> <span class=md-ellipsis> Accessing component inputs </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/component_context_scope/ class=md-nav__link> <span class=md-ellipsis> Component context and scope </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/template_tag_syntax/ class=md-nav__link> <span class=md-ellipsis> Template tag syntax </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/slots/ class=md-nav__link> <span class=md-ellipsis> Slots </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/html_attributes/ class=md-nav__link> <span class=md-ellipsis> HTML attributes </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/defining_js_css_html_files/ class=md-nav__link> <span class=md-ellipsis> Defining HTML / JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/autodiscovery/ class=md-nav__link> <span class=md-ellipsis> Autodiscovery </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/components_as_views/ class=md-nav__link> <span class=md-ellipsis> Components as views </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_2 checked> <label class=md-nav__link for=__nav_2_2 id=__nav_2_2_label tabindex> <span class=md-ellipsis> Advanced </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_2_label aria-expanded=true> <label class=md-nav__title for=__nav_2_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../rendering_js_css/ class=md-nav__link> <span class=md-ellipsis> Rendering JS / CSS </span> </a> </li> <li class=md-nav__item> <a href=../provide_inject/ class=md-nav__link> <span class=md-ellipsis> Prop drilling and provide / inject </span> </a> </li> <li class=md-nav__item> <a href=../hooks/ class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=../component_registry/ class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=../typing_and_validation/ class=md-nav__link> <span class=md-ellipsis> Typing and validation </span> </a> </li> <li class=md-nav__item> <a href=../tag_formatter/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </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> Authoring component libraries </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Authoring component libraries </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=#writing-component-libraries class=md-nav__link> <span class=md-ellipsis> Writing component libraries </span> </a> </li> <li class=md-nav__item> <a href=#publishing-component-libraries class=md-nav__link> <span class=md-ellipsis> Publishing component libraries </span> </a> </li> <li class=md-nav__item> <a href=#installing-and-using-component-libraries class=md-nav__link> <span class=md-ellipsis> Installing and using component libraries </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <span class=md-ellipsis> Guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=false> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex=0> <span class=md-ellipsis> Setup </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=false> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Setup </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/setup/syntax_highlight/ class=md-nav__link> <span class=md-ellipsis> Syntax highlighting </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/dev_server_setup/ class=md-nav__link> <span class=md-ellipsis> Running with development server </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/logging_and_debugging/ class=md-nav__link> <span class=md-ellipsis> Logging and debugging </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../guides/cookbook class=md-nav__link> <span class=md-ellipsis> Cookbook </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> API Documentation </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> API Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/api/ class=md-nav__link> <span class=md-ellipsis> Api </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/commands/ class=md-nav__link> <span class=md-ellipsis> Commands </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/exceptions/ class=md-nav__link> <span class=md-ellipsis> Exceptions </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/middlewares/ class=md-nav__link> <span class=md-ellipsis> Middlewares </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_tags/ class=md-nav__link> <span class=md-ellipsis> Template tags </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_vars/ class=md-nav__link> <span class=md-ellipsis> Template vars </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/urls/ class=md-nav__link> <span class=md-ellipsis> Urls </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../release_notes/ class=md-nav__link> <span class=md-ellipsis> Release notes </span> </a> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#writing-component-libraries class=md-nav__link> <span class=md-ellipsis> Writing component libraries </span> </a> </li> <li class=md-nav__item> <a href=#publishing-component-libraries class=md-nav__link> <span class=md-ellipsis> Publishing component libraries </span> </a> </li> <li class=md-nav__item> <a href=#installing-and-using-component-libraries class=md-nav__link> <span class=md-ellipsis> Installing and using component libraries </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/docs/concepts/advanced/authoring_component_libraries.md title="Edit this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> </a> <a href=https://github.com/EmilStenstrom/django-components/raw/master/docs/concepts/advanced/authoring_component_libraries.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <h1>Authoring component libraries</h1> <p>You can publish and share your components for others to use. Here are the steps to do so:</p> <h2 id=writing-component-libraries>Writing component libraries<a class=headerlink href=#writing-component-libraries title="Permanent link">¤</a></h2> <ol> <li> <p>Create a Django project with a similar structure:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a>project/
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> |-- myapp/
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> |-- __init__.py
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> |-- apps.py
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> |-- templates/
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> |-- table/
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> |-- table.py
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> |-- table.js
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> |-- table.css
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> |-- table.html
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> |-- menu.py &lt;--- single-file component
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> |-- templatetags/
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> |-- __init__.py
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> |-- mytags.py
</code></pre></div> </li> <li> <p>Create custom <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> and <a href=django_components.component_registry.ComponentRegistry><code>ComponentRegistry</code></a> instances in <code>mytags.py</code></p> <p>This will be the entrypoint for using the components inside Django templates.</p> <p>Remember that Django requires the <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> instance to be accessible under the <code>register</code> variable (<a href=https://docs.djangoproject.com/en/dev/howto/custom-template-tags>See Django docs</a>):</p> <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.template</span> <span class=kn>import</span> <span class=n>Library</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>ComponentRegistry</span><span class=p>,</span> <span class=n>RegistrySettings</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=n>register</span> <span class=o>=</span> <span class=n>library</span> <span class=o>=</span> <span class=n>django</span><span class=o>.</span><span class=n>template</span><span class=o>.</span><span class=n>Library</span><span class=p>()</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=n>comp_registry</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>(</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=n>library</span><span class=o>=</span><span class=n>library</span><span class=p>,</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=n>settings</span><span class=o>=</span><span class=n>RegistrySettings</span><span class=p>(</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=n>context_behavior</span><span class=o>=</span><span class=s2>&quot;isolated&quot;</span><span class=p>,</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a> <span class=n>tag_formatter</span><span class=o>=</span><span class=s2>&quot;django_components.component_formatter&quot;</span><span class=p>,</span>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=p>),</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a><span class=p>)</span>
</code></pre></div> <p>As you can see above, this is also the place where we configure how our components should behave, using the <a href=django_components.component_registry.ComponentRegistry.settings><code>settings</code></a> argument. If omitted, default settings are used.</p> <p>For library authors, we recommend setting <a href=django_components.app_settings.ComponentsSettings.context_behavior><code>context_behavior</code></a> to <a href=django_components.app_settings.ContextBehavior.ISOLATED><code>"isolated"</code></a>, so that the state cannot leak into the components, and so the components' behavior is configured solely through the inputs. This means that the components will be more predictable and easier to debug.</p> <p>Next, you can decide how will others use your components by setting the <a href=django_components.app_settings.ComponentsSettings.tag_formatter><code>tag_formatter</code></a> options.</p> <p>If omitted or set to <code>"django_components.component_formatter"</code>, your components will be used like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;table&quot;</span> <span class=nv>items</span><span class=o>=</span><span class=nv>items</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>Or you can use <code>"django_components.component_shorthand_formatter"</code> to use components like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=cp>{%</span> <span class=k>table</span> <span class=nv>items</span><span class=o>=</span><span class=nv>items</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a><span class=cp>{%</span> <span class=k>endtable</span> <span class=cp>%}</span>
</code></pre></div> <p>Or you can define a <a href=#tagformatter>custom TagFormatter</a>.</p> <p>Either way, these settings will be scoped only to your components. So, in the user code, there may be components side-by-side that use different formatters:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>mytags</span> <span class=cp>%}</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=c>{# Component from your library &quot;mytags&quot;, using the &quot;shorthand&quot; formatter #}</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=cp>{%</span> <span class=k>table</span> <span class=nv>items</span><span class=o>=</span><span class=nv>items</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>header</span> <span class=cp>%}</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=cp>{%</span> <span class=k>endtable</span> <span class=cp>%}</span>
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a>
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a><span class=c>{# User-created components using the default settings #}</span>
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>title</span><span class=o>=</span><span class=s2>&quot;Abc...&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> </li> <li> <p>Write your components and register them with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a></p> <p>There's one difference when you are writing components that are to be shared, and that's that the components must be explicitly registered with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a> from the previous step.</p> <p>For better user experience, you can also define the types for the args, kwargs, slots and data.</p> <p>It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix <code>my_</code> / <code>My</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=kn>from</span> <span class=nn>typing</span> <span class=kn>import</span> <span class=n>Dict</span><span class=p>,</span> <span class=n>NotRequired</span><span class=p>,</span> <span class=n>Optional</span><span class=p>,</span> <span class=n>Tuple</span><span class=p>,</span> <span class=n>TypedDict</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></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>SlotFunc</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=kn>from</span> <span class=nn>myapp.templatetags.mytags</span> <span class=kn>import</span> <span class=n>comp_registry</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a>
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a><span class=c1># Define the types</span>
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a><span class=k>class</span> <span class=nc>EmptyDict</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=k>pass</span>
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a>
<a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a><span class=nb>type</span> <span class=n>MyMenuArgs</span> <span class=o>=</span> <span class=n>Tuple</span><span class=p>[</span><span class=nb>int</span><span class=p>,</span> <span class=nb>str</span><span class=p>]</span>
<a id=__codelineno-5-12 name=__codelineno-5-12 href=#__codelineno-5-12></a>
<a id=__codelineno-5-13 name=__codelineno-5-13 href=#__codelineno-5-13></a><span class=k>class</span> <span class=nc>MyMenuSlots</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-5-14 name=__codelineno-5-14 href=#__codelineno-5-14></a> <span class=n>default</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=n>Optional</span><span class=p>[</span><span class=n>SlotFunc</span><span class=p>[</span><span class=n>EmptyDict</span><span class=p>]]]</span>
<a id=__codelineno-5-15 name=__codelineno-5-15 href=#__codelineno-5-15></a>
<a id=__codelineno-5-16 name=__codelineno-5-16 href=#__codelineno-5-16></a><span class=k>class</span> <span class=nc>MyMenuProps</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-5-17 name=__codelineno-5-17 href=#__codelineno-5-17></a> <span class=n>vertical</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>bool</span><span class=p>]</span>
<a id=__codelineno-5-18 name=__codelineno-5-18 href=#__codelineno-5-18></a> <span class=n>klass</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span>
<a id=__codelineno-5-19 name=__codelineno-5-19 href=#__codelineno-5-19></a> <span class=n>style</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span>
<a id=__codelineno-5-20 name=__codelineno-5-20 href=#__codelineno-5-20></a>
<a id=__codelineno-5-21 name=__codelineno-5-21 href=#__codelineno-5-21></a><span class=c1># Define the component</span>
<a id=__codelineno-5-22 name=__codelineno-5-22 href=#__codelineno-5-22></a><span class=c1># NOTE: Don&#39;t forget to set the `registry`!</span>
<a id=__codelineno-5-23 name=__codelineno-5-23 href=#__codelineno-5-23></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_menu&quot;</span><span class=p>,</span> <span class=n>registry</span><span class=o>=</span><span class=n>comp_registry</span><span class=p>)</span>
<a id=__codelineno-5-24 name=__codelineno-5-24 href=#__codelineno-5-24></a><span class=k>class</span> <span class=nc>MyMenu</span><span class=p>(</span><span class=n>Component</span><span class=p>[</span><span class=n>MyMenuArgs</span><span class=p>,</span> <span class=n>MyMenuProps</span><span class=p>,</span> <span class=n>MyMenuSlots</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>]):</span>
<a id=__codelineno-5-25 name=__codelineno-5-25 href=#__codelineno-5-25></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span>
<a id=__codelineno-5-26 name=__codelineno-5-26 href=#__codelineno-5-26></a> <span class=bp>self</span><span class=p>,</span>
<a id=__codelineno-5-27 name=__codelineno-5-27 href=#__codelineno-5-27></a> <span class=o>*</span><span class=n>args</span><span class=p>,</span>
<a id=__codelineno-5-28 name=__codelineno-5-28 href=#__codelineno-5-28></a> <span class=n>attrs</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=o>=</span> <span class=kc>None</span><span class=p>,</span>
<a id=__codelineno-5-29 name=__codelineno-5-29 href=#__codelineno-5-29></a> <span class=p>):</span>
<a id=__codelineno-5-30 name=__codelineno-5-30 href=#__codelineno-5-30></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-5-31 name=__codelineno-5-31 href=#__codelineno-5-31></a> <span class=s2>&quot;attrs&quot;</span><span class=p>:</span> <span class=n>attrs</span><span class=p>,</span>
<a id=__codelineno-5-32 name=__codelineno-5-32 href=#__codelineno-5-32></a> <span class=p>}</span>
<a id=__codelineno-5-33 name=__codelineno-5-33 href=#__codelineno-5-33></a>
<a id=__codelineno-5-34 name=__codelineno-5-34 href=#__codelineno-5-34></a> <span class=n>template</span><span class=p>:</span> <span class=n>types</span><span class=o>.</span><span class=n>django_html</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-5-35 name=__codelineno-5-35 href=#__codelineno-5-35></a><span class=s2> {# Load django_components template tags #}</span>
<a id=__codelineno-5-36 name=__codelineno-5-36 href=#__codelineno-5-36></a><span class=s2> {</span><span class=si>% lo</span><span class=s2>ad component_tags %}</span>
<a id=__codelineno-5-37 name=__codelineno-5-37 href=#__codelineno-5-37></a>
<a id=__codelineno-5-38 name=__codelineno-5-38 href=#__codelineno-5-38></a><span class=s2> &lt;div {% html_attrs attrs class=&quot;my-menu&quot; %}&gt;</span>
<a id=__codelineno-5-39 name=__codelineno-5-39 href=#__codelineno-5-39></a><span class=s2> &lt;div class=&quot;my-menu__content&quot;&gt;</span>
<a id=__codelineno-5-40 name=__codelineno-5-40 href=#__codelineno-5-40></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot &quot;default&quot; default / %}</span>
<a id=__codelineno-5-41 name=__codelineno-5-41 href=#__codelineno-5-41></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-5-42 name=__codelineno-5-42 href=#__codelineno-5-42></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-5-43 name=__codelineno-5-43 href=#__codelineno-5-43></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> </li> <li> <p>Import the components in <code>apps.py</code></p> <p>Normally, users rely on <a href=../../concepts/autodiscovery>autodiscovery</a> and <a href=../../reference/settings#dirs><code>COMPONENTS.dirs</code></a> to load the component files.</p> <p>Since you, as the library author, are not in control of the file system, it is recommended to load the components manually.</p> <p>We recommend doing this in the <a href=https://docs.djangoproject.com/en/5.1/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code></a> hook of your <code>apps.py</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a><span class=k>class</span> <span class=nc>MyAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=n>default_auto_field</span> <span class=o>=</span> <span class=s2>&quot;django.db.models.BigAutoField&quot;</span>
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>&quot;myapp&quot;</span>
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a>
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=c1># This is the code that gets run when user adds myapp</span>
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=c1># to Django&#39;s INSTALLED_APPS</span>
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=k>def</span> <span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a> <span class=c1># Import the components that you want to make available</span>
<a id=__codelineno-6-11 name=__codelineno-6-11 href=#__codelineno-6-11></a> <span class=c1># inside the templates.</span>
<a id=__codelineno-6-12 name=__codelineno-6-12 href=#__codelineno-6-12></a> <span class=kn>from</span> <span class=nn>myapp.templates</span> <span class=kn>import</span> <span class=p>(</span>
<a id=__codelineno-6-13 name=__codelineno-6-13 href=#__codelineno-6-13></a> <span class=n>menu</span><span class=p>,</span>
<a id=__codelineno-6-14 name=__codelineno-6-14 href=#__codelineno-6-14></a> <span class=n>table</span><span class=p>,</span>
<a id=__codelineno-6-15 name=__codelineno-6-15 href=#__codelineno-6-15></a> <span class=p>)</span>
</code></pre></div> <p>Note that you can also include any other startup logic within <a href=https://docs.djangoproject.com/en/5.1/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code></a>.</p> </li> </ol> <p>And that's it! The next step is to publish it.</p> <h2 id=publishing-component-libraries>Publishing component libraries<a class=headerlink href=#publishing-component-libraries title="Permanent link">¤</a></h2> <p>Once you are ready to share your library, you need to build a distribution and then publish it to PyPI.</p> <p>django_components uses the <a href=https://build.pypa.io/en/stable/ ><code>build</code></a> utility to build a distribution:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a>python<span class=w> </span>-m<span class=w> </span>build<span class=w> </span>--sdist<span class=w> </span>--wheel<span class=w> </span>--outdir<span class=w> </span>dist/<span class=w> </span>.
</code></pre></div> <p>And to publish to PyPI, you can use <a href=https://docs.djangoproject.com/en/5.1/ref/applications/#django.apps.AppConfig.ready><code>twine</code></a> (<a href=https://packaging.python.org/en/latest/tutorials/packaging-projects/#uploading-the-distribution-archives>See Python user guide</a>)</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a>twine<span class=w> </span>upload<span class=w> </span>--repository<span class=w> </span>pypi<span class=w> </span>dist/*<span class=w> </span>-u<span class=w> </span>__token__<span class=w> </span>-p<span class=w> </span>&lt;PyPI_TOKEN&gt;
</code></pre></div> <p>Notes on publishing:</p> <ul> <li>If you use components where the HTML / CSS / JS files are separate, you may need to define <a href=https://setuptools.pypa.io/en/latest/userguide/miscellaneous.html><code>MANIFEST.in</code></a> to include those files with the distribution (<a href=https://setuptools.pypa.io/en/latest/userguide/miscellaneous.html>see user guide</a>).</li> </ul> <h2 id=installing-and-using-component-libraries>Installing and using component libraries<a class=headerlink href=#installing-and-using-component-libraries title="Permanent link">¤</a></h2> <p>After the package has been published, all that remains is to install it in other django projects:</p> <ol> <li> <p>Install the package:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a>pip<span class=w> </span>install<span class=w> </span>myapp<span class=w> </span>django_components
</code></pre></div> </li> <li> <p>Add the package to <code>INSTALLED_APPS</code></p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=n>INSTALLED_APPS</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=o>...</span>
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=s2>&quot;django_components&quot;</span><span class=p>,</span>
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=s2>&quot;myapp&quot;</span><span class=p>,</span>
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a><span class=p>]</span>
</code></pre></div> </li> <li> <p>Optionally add the template tags to the <a href=https://docs.djangoproject.com/en/5.1/topics/templates/#django.template.backends.django.DjangoTemplates><code>builtins</code></a>, so you don't have to call <code>{% load mytags %}</code> in every template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=n>TEMPLATES</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a> <span class=p>{</span>
<a id=__codelineno-11-3 name=__codelineno-11-3 href=#__codelineno-11-3></a> <span class=o>...</span><span class=p>,</span>
<a id=__codelineno-11-4 name=__codelineno-11-4 href=#__codelineno-11-4></a> <span class=s1>&#39;OPTIONS&#39;</span><span class=p>:</span> <span class=p>{</span>
<a id=__codelineno-11-5 name=__codelineno-11-5 href=#__codelineno-11-5></a> <span class=s1>&#39;context_processors&#39;</span><span class=p>:</span> <span class=p>[</span>
<a id=__codelineno-11-6 name=__codelineno-11-6 href=#__codelineno-11-6></a> <span class=o>...</span>
<a id=__codelineno-11-7 name=__codelineno-11-7 href=#__codelineno-11-7></a> <span class=p>],</span>
<a id=__codelineno-11-8 name=__codelineno-11-8 href=#__codelineno-11-8></a> <span class=s1>&#39;builtins&#39;</span><span class=p>:</span> <span class=p>[</span>
<a id=__codelineno-11-9 name=__codelineno-11-9 href=#__codelineno-11-9></a> <span class=s1>&#39;myapp.templatetags.mytags&#39;</span><span class=p>,</span>
<a id=__codelineno-11-10 name=__codelineno-11-10 href=#__codelineno-11-10></a> <span class=p>]</span>
<a id=__codelineno-11-11 name=__codelineno-11-11 href=#__codelineno-11-11></a> <span class=p>},</span>
<a id=__codelineno-11-12 name=__codelineno-11-12 href=#__codelineno-11-12></a> <span class=p>},</span>
<a id=__codelineno-11-13 name=__codelineno-11-13 href=#__codelineno-11-13></a><span class=p>]</span>
</code></pre></div> </li> <li> <p>And, at last, you can use the components in your own project!</p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=cp>{%</span> <span class=k>my_menu</span> <span class=nv>title</span><span class=o>=</span><span class=s2>&quot;Abc...&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a><span class=x> Hello World!</span>
<a id=__codelineno-12-3 name=__codelineno-12-3 href=#__codelineno-12-3></a><span class=cp>{%</span> <span class=k>endmy_menu</span> <span class=cp>%}</span>
</code></pre></div> </li> </ol> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago"><span class=timeago datetime=2024-12-02T08:54:59+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date">2024-12-02</span> </span> <span class=md-source-file__fact> <span class=md-icon title=Contributors> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg> </span> <nav> <a href=mailto:juraj.oravec.josefson@gmail.com>Juro Oravec</a> </nav> </span> </aside> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../tag_formatter/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Tag formatters"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Tag formatters </div> </div> </a> <a href=../../../guides/setup/syntax_highlight/ class="md-footer__link md-footer__link--next" aria-label="Next: Syntax highlighting"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Syntax highlighting </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/EmilStenstrom/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../../assets/javascripts/bundle.83f73b43.min.js></script> <script src=../../../assets/_markdown_exec_pyodide.js></script> <script src=../../../js/timeago.min.js></script> <script src=../../../js/timeago_mkdocs_material.js></script> </body> </html>
Reference in a new issue View git blame Copy permalink