mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-09-19 04:09:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
django-components/dev/concepts/fundamentals/single_file_components/index.html

162 lines
No EOL
75 KiB
HTML
Raw Blame History

<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://django-components.github.io/django-components/latest/concepts/fundamentals/single_file_components/ rel=canonical><link href=../../../getting_started/rendering_components/ rel=prev><link href=../html_js_css_files/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.14"><title>Single-file components - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.342714a4.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="Single-file components - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://django-components.github.io/django-components/latest/assets/images/social/concepts/fundamentals/single_file_components.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://django-components.github.io/django-components/latest/concepts/fundamentals/single_file_components/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Single-file components - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://django-components.github.io/django-components/latest/assets/images/social/concepts/fundamentals/single_file_components.png></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#writing-single-file-components class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class=md-header data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Single-file components </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../../../overview/welcome/ class=md-tabs__link> Overview </a> </li> <li class=md-tabs__item> <a href=../../../getting_started/your_first_component/ class=md-tabs__link> Getting Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=./ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../../guides/setup/caching/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../../reference/api/ class=md-tabs__link> API Documentation </a> </li> <li class=md-tabs__item> <a href=../../../release_notes/ class=md-tabs__link> Release Notes </a> </li> </ul> </div> </nav> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex=0> <span class=md-ellipsis> Overview </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <span class="md-nav__icon md-icon"></span> Overview </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../overview/welcome/ class=md-nav__link> <span class=md-ellipsis> Welcome to Django Components </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/compatibility/ class=md-nav__link> <span class=md-ellipsis> Compatibility </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/installation/ class=md-nav__link> <span class=md-ellipsis> Installation </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/security_notes/ class=md-nav__link> <span class=md-ellipsis> Security notes 🚨 </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/community/ class=md-nav__link> <span class=md-ellipsis> Community </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributing </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/development/ class=md-nav__link> <span class=md-ellipsis> Development </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/performance/ class=md-nav__link> <span class=md-ellipsis> Performance </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/code_of_conduct/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Getting Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../getting_started/your_first_component/ class=md-nav__link> <span class=md-ellipsis> Create your first component </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/adding_js_and_css/ class=md-nav__link> <span class=md-ellipsis> Adding JS and CSS </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/components_in_templates/ class=md-nav__link> <span class=md-ellipsis> Components in templates </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/parametrising_components/ class=md-nav__link> <span class=md-ellipsis> Parametrising components </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/adding_slots/ class=md-nav__link> <span class=md-ellipsis> Adding slots </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/rendering_components/ class=md-nav__link> <span class=md-ellipsis> Rendering components </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3 checked> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex> <span class=md-ellipsis> Concepts </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=true> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Concepts </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3_1 checked> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex> <span class=md-ellipsis> Fundamentals </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=true> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item 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> Single-file components </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Single-file components </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#writing-single-file-components class=md-nav__link> <span class=md-ellipsis> Writing single file components </span> </a> </li> <li class=md-nav__item> <a href=#syntax-highlighting class=md-nav__link> <span class=md-ellipsis> Syntax highlighting </span> </a> <nav class=md-nav aria-label="Syntax highlighting"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#vscode class=md-nav__link> <span class=md-ellipsis> VSCode </span> </a> </li> <li class=md-nav__item> <a href=#pycharm-or-other-jetbrains-ides class=md-nav__link> <span class=md-ellipsis> Pycharm (or other Jetbrains IDEs) </span> </a> </li> <li class=md-nav__item> <a href=#markdown-code-blocks-with-pygments class=md-nav__link> <span class=md-ellipsis> Markdown code blocks with Pygments </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../html_js_css_files/ class=md-nav__link> <span class=md-ellipsis> HTML / JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../html_js_css_variables/ class=md-nav__link> <span class=md-ellipsis> HTML / JS / CSS variables </span> </a> </li> <li class=md-nav__item> <a href=../secondary_js_css_files/ class=md-nav__link> <span class=md-ellipsis> Secondary JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../component_defaults/ class=md-nav__link> <span class=md-ellipsis> Component defaults </span> </a> </li> <li class=md-nav__item> <a href=../render_api/ class=md-nav__link> <span class=md-ellipsis> Render API </span> </a> </li> <li class=md-nav__item> <a href=../rendering_components/ class=md-nav__link> <span class=md-ellipsis> Rendering components </span> </a> </li> <li class=md-nav__item> <a href=../template_tag_syntax/ class=md-nav__link> <span class=md-ellipsis> Template tag syntax </span> </a> </li> <li class=md-nav__item> <a href=../slots/ class=md-nav__link> <span class=md-ellipsis> Slots </span> </a> </li> <li class=md-nav__item> <a href=../html_attributes/ class=md-nav__link> <span class=md-ellipsis> HTML attributes </span> </a> </li> <li class=md-nav__item> <a href=../component_views_urls/ class=md-nav__link> <span class=md-ellipsis> Component views and URLs </span> </a> </li> <li class=md-nav__item> <a href=../http_request/ class=md-nav__link> <span class=md-ellipsis> HTTP Request </span> </a> </li> <li class=md-nav__item> <a href=../typing_and_validation/ class=md-nav__link> <span class=md-ellipsis> Typing and validation </span> </a> </li> <li class=md-nav__item> <a href=../subclassing_components/ class=md-nav__link> <span class=md-ellipsis> Subclassing components </span> </a> </li> <li class=md-nav__item> <a href=../autodiscovery/ class=md-nav__link> <span class=md-ellipsis> Autodiscovery </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_2> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex> <span class=md-ellipsis> Advanced </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../advanced/rendering_js_css/ class=md-nav__link> <span class=md-ellipsis> Rendering JS / CSS </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/html_fragments/ class=md-nav__link> <span class=md-ellipsis> HTML fragments </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/provide_inject/ class=md-nav__link> <span class=md-ellipsis> Prop drilling and provide / inject </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/hooks/ class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/component_registry/ class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/component_caching/ class=md-nav__link> <span class=md-ellipsis> Component caching </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/component_context_scope/ class=md-nav__link> <span class=md-ellipsis> Component context and scope </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/template_tags/ class=md-nav__link> <span class=md-ellipsis> Custom template tags </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/extensions/ class=md-nav__link> <span class=md-ellipsis> Extensions </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/testing/ class=md-nav__link> <span class=md-ellipsis> Testing </span> </a> </li> <li class=md-nav__item> <a href=../../advanced/component_libraries/ class=md-nav__link> <span class=md-ellipsis> Component libraries </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> Guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1> <label class=md-nav__link for=__nav_4_1 id=__nav_4_1_label tabindex=0> <span class=md-ellipsis> Setup </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_1_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1> <span class="md-nav__icon md-icon"></span> Setup </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/setup/caching/ class=md-nav__link> <span class=md-ellipsis> Caching </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/development_server/ class=md-nav__link> <span class=md-ellipsis> Development server </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_2> <label class=md-nav__link for=__nav_4_2 id=__nav_4_2_label tabindex=0> <span class=md-ellipsis> Other </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_2_label aria-expanded=false> <label class=md-nav__title for=__nav_4_2> <span class="md-nav__icon md-icon"></span> Other </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/other/troubleshooting/ class=md-nav__link> <span class=md-ellipsis> Troubleshooting </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_3> <label class=md-nav__link for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class=md-ellipsis> Dev Guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_3_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3> <span class="md-nav__icon md-icon"></span> Dev Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/devguides/dependency_mgmt/ class=md-nav__link> <span class=md-ellipsis> JS and CSS rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slot_rendering/ class=md-nav__link> <span class=md-ellipsis> Slot rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slots_and_blocks/ class=md-nav__link> <span class=md-ellipsis> Using slot and block tags </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5> <label class=md-nav__link for=__nav_5 id=__nav_5_label tabindex=0> <span class=md-ellipsis> API Documentation </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_5_label aria-expanded=false> <label class=md-nav__title for=__nav_5> <span class="md-nav__icon md-icon"></span> API Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/api/ class=md-nav__link> <span class=md-ellipsis> API </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/commands/ class=md-nav__link> <span class=md-ellipsis> Commands </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/exceptions/ class=md-nav__link> <span class=md-ellipsis> Exceptions </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/extension_commands/ class=md-nav__link> <span class=md-ellipsis> Extension commands </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/extension_hooks/ class=md-nav__link> <span class=md-ellipsis> Extension hooks </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/extension_urls/ class=md-nav__link> <span class=md-ellipsis> Extension URLs </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/signals/ class=md-nav__link> <span class=md-ellipsis> Signals </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_tags/ class=md-nav__link> <span class=md-ellipsis> Template tags </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_vars/ class=md-nav__link> <span class=md-ellipsis> Template vars </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/urls/ class=md-nav__link> <span class=md-ellipsis> URLs </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/testing_api/ class=md-nav__link> <span class=md-ellipsis> Testing API </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../release_notes/ class=md-nav__link> <span class=md-ellipsis> Release Notes </span> </a> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#writing-single-file-components class=md-nav__link> <span class=md-ellipsis> Writing single file components </span> </a> </li> <li class=md-nav__item> <a href=#syntax-highlighting class=md-nav__link> <span class=md-ellipsis> Syntax highlighting </span> </a> <nav class=md-nav aria-label="Syntax highlighting"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#vscode class=md-nav__link> <span class=md-ellipsis> VSCode </span> </a> </li> <li class=md-nav__item> <a href=#pycharm-or-other-jetbrains-ides class=md-nav__link> <span class=md-ellipsis> Pycharm (or other Jetbrains IDEs) </span> </a> </li> <li class=md-nav__item> <a href=#markdown-code-blocks-with-pygments class=md-nav__link> <span class=md-ellipsis> Markdown code blocks with Pygments </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/django-components/django-components/edit/master/docs/concepts/fundamentals/single_file_components.md title="Edit this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> </a> <a href=https://github.com/django-components/django-components/raw/master/docs/concepts/fundamentals/single_file_components.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <h1>Single-file components</h1> <p>Components can be defined in a single file, inlining the HTML, JS and CSS within the Python code.</p> <h2 id=writing-single-file-components>Writing single file components<a class=headerlink href=#writing-single-file-components title="Permanent link">¤</a></h2> <p>To do this, you can use the <a href=../../../reference/api#django_components.Component.template><code>template</code></a>, <a href=../../../reference/api#django_components.Component.js><code>js</code></a>, and <a href=../../../reference/api#django_components.Component.css><code>css</code></a> class attributes instead of the <a href=../../../reference/api#django_components.Component.template_file><code>template_file</code></a>, <a href=../../../reference/api#django_components.Component.js_file><code>js_file</code></a>, and <a href=../../../reference/api#django_components.Component.css_file><code>css_file</code></a>.</p> <p>For example, here's the calendar component from the <a href=../../../getting_started/your_first_component/ >Getting started</a> tutorial:</p> <div class=highlight><span class=filename>calendar.py</span><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span>
</code></pre></div> <p>And here is the same component, rewritten in a single file:</p> <div class=highlight><span class=filename>[project root]/components/calendar.py</span><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=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</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;calendar&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=w> </span><span class=nc>Calendar</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=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-1-6 name=__codelineno-1-6 href=#__codelineno-1-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-1-7 name=__codelineno-1-7 href=#__codelineno-1-7></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;date&quot;</span><span class=p>],</span>
<a id=__codelineno-1-8 name=__codelineno-1-8 href=#__codelineno-1-8></a> <span class=p>}</span>
<a id=__codelineno-1-9 name=__codelineno-1-9 href=#__codelineno-1-9></a>
<a id=__codelineno-1-10 name=__codelineno-1-10 href=#__codelineno-1-10></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>types.django_html</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-11 name=__codelineno-1-11 href=#__codelineno-1-11></a> <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-1-12 name=__codelineno-1-12 href=#__codelineno-1-12></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-1-13 name=__codelineno-1-13 href=#__codelineno-1-13></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-1-14 name=__codelineno-1-14 href=#__codelineno-1-14></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-15 name=__codelineno-1-15 href=#__codelineno-1-15></a>
<a id=__codelineno-1-16 name=__codelineno-1-16 href=#__codelineno-1-16></a> <span class=nv>css</span><span class=p>:</span> <span class=nc>types.css</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-17 name=__codelineno-1-17 href=#__codelineno-1-17></a><span class=w> </span><span class=p>.</span><span class=nc>calendar</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-18 name=__codelineno-1-18 href=#__codelineno-1-18></a><span class=w> </span><span class=k>width</span><span class=p>:</span><span class=w> </span><span class=mi>200</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-1-19 name=__codelineno-1-19 href=#__codelineno-1-19></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=kc>pink</span><span class=p>;</span>
<a id=__codelineno-1-20 name=__codelineno-1-20 href=#__codelineno-1-20></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-21 name=__codelineno-1-21 href=#__codelineno-1-21></a><span class=w> </span><span class=p>.</span><span class=nc>calendar</span><span class=w> </span><span class=nt>span</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-22 name=__codelineno-1-22 href=#__codelineno-1-22></a><span class=w> </span><span class=k>font-weight</span><span class=p>:</span><span class=w> </span><span class=kc>bold</span><span class=p>;</span>
<a id=__codelineno-1-23 name=__codelineno-1-23 href=#__codelineno-1-23></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-24 name=__codelineno-1-24 href=#__codelineno-1-24></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-25 name=__codelineno-1-25 href=#__codelineno-1-25></a>
<a id=__codelineno-1-26 name=__codelineno-1-26 href=#__codelineno-1-26></a> <span class=nv>js</span><span class=p>:</span> <span class=nc>types.js</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-1-27 name=__codelineno-1-27 href=#__codelineno-1-27></a><span class=w> </span><span class=p>(</span><span class=kd>function</span><span class=p>(){</span>
<a id=__codelineno-1-28 name=__codelineno-1-28 href=#__codelineno-1-28></a><span class=w> </span><span class=k>if</span><span class=w> </span><span class=p>(</span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelector</span><span class=p>(</span><span class=s2>&quot;.calendar&quot;</span><span class=p>))</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-29 name=__codelineno-1-29 href=#__codelineno-1-29></a><span class=w> </span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelector</span><span class=p>(</span><span class=s2>&quot;.calendar&quot;</span><span class=p>).</span><span class=nx>onclick</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=p>()</span><span class=w> </span><span class=p>=&gt;</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-1-30 name=__codelineno-1-30 href=#__codelineno-1-30></a><span class=w> </span><span class=nx>alert</span><span class=p>(</span><span class=s2>&quot;Clicked calendar!&quot;</span><span class=p>);</span>
<a id=__codelineno-1-31 name=__codelineno-1-31 href=#__codelineno-1-31></a><span class=w> </span><span class=p>};</span>
<a id=__codelineno-1-32 name=__codelineno-1-32 href=#__codelineno-1-32></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-1-33 name=__codelineno-1-33 href=#__codelineno-1-33></a><span class=w> </span><span class=p>})()</span>
<a id=__codelineno-1-34 name=__codelineno-1-34 href=#__codelineno-1-34></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <p>You can mix and match, so you can have a component with inlined HTML, while the JS and CSS are in separate files:</p> <div class=highlight><span class=filename>[project root]/components/calendar.py</span><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>types.django_html</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-2-10 name=__codelineno-2-10 href=#__codelineno-2-10></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-2-11 name=__codelineno-2-11 href=#__codelineno-2-11></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-2-12 name=__codelineno-2-12 href=#__codelineno-2-12></a> <span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <h2 id=syntax-highlighting>Syntax highlighting<a class=headerlink href=#syntax-highlighting title="Permanent link">¤</a></h2> <p>If you "inline" the HTML, JS and CSS code into the Python class, you should set up syntax highlighting to let your code editor know that the inlined code is HTML, JS and CSS.</p> <p>In the examples above, we've annotated the <a href=../../../reference/api#django_components.Component.template><code>template</code></a>, <a href=../../../reference/api#django_components.Component.js><code>js</code></a>, and <a href=../../../reference/api#django_components.Component.css><code>css</code></a> attributes with the <code>types.django_html</code>, <code>types.js</code> and <code>types.css</code> types. These are used for syntax highlighting in VSCode.</p> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Autocompletion / intellisense does not work in the inlined code.</p> <p>Help us add support for intellisense in the inlined code! Start a conversation in the <a href=https://github.com/django-components/django-components/discussions>GitHub Discussions</a>.</p> </div> <h3 id=vscode>VSCode<a class=headerlink href=#vscode title="Permanent link">¤</a></h3> <ol> <li> <p>First install <a href="https://marketplace.visualstudio.com/items?itemName=samwillis.python-inline-source">Python Inline Source Syntax Highlighting</a> extension, it will give you syntax highlighting for the template, CSS, and JS.</p> </li> <li> <p>Next, in your component, set typings of <a href=../../../reference/api#django_components.Component.template><code>Component.template</code></a>, <a href=../../../reference/api#django_components.Component.js><code>Component.js</code></a>, <a href=../../../reference/api#django_components.Component.css><code>Component.css</code></a> to <code>types.django_html</code>, <code>types.css</code>, and <code>types.js</code> respectively. The extension will recognize these and will activate syntax highlighting.</p> </li> </ol> <div class=highlight><span class=filename>[project root]/components/calendar.py</span><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;date&quot;</span><span class=p>],</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=p>}</span>
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=nv>template</span><span class=p>:</span> <span class=nc>types.django_html</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-3-11 name=__codelineno-3-11 href=#__codelineno-3-11></a> <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar-component&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-3-12 name=__codelineno-3-12 href=#__codelineno-3-12></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-3-13 name=__codelineno-3-13 href=#__codelineno-3-13></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-3-14 name=__codelineno-3-14 href=#__codelineno-3-14></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-3-15 name=__codelineno-3-15 href=#__codelineno-3-15></a>
<a id=__codelineno-3-16 name=__codelineno-3-16 href=#__codelineno-3-16></a> <span class=nv>css</span><span class=p>:</span> <span class=nc>types.css</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-3-17 name=__codelineno-3-17 href=#__codelineno-3-17></a><span class=w> </span><span class=p>.</span><span class=nc>calendar-component</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-3-18 name=__codelineno-3-18 href=#__codelineno-3-18></a><span class=w> </span><span class=k>width</span><span class=p>:</span><span class=w> </span><span class=mi>200</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-3-19 name=__codelineno-3-19 href=#__codelineno-3-19></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=kc>pink</span><span class=p>;</span>
<a id=__codelineno-3-20 name=__codelineno-3-20 href=#__codelineno-3-20></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-3-21 name=__codelineno-3-21 href=#__codelineno-3-21></a><span class=w> </span><span class=p>.</span><span class=nc>calendar-component</span><span class=w> </span><span class=nt>span</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-3-22 name=__codelineno-3-22 href=#__codelineno-3-22></a><span class=w> </span><span class=k>font-weight</span><span class=p>:</span><span class=w> </span><span class=kc>bold</span><span class=p>;</span>
<a id=__codelineno-3-23 name=__codelineno-3-23 href=#__codelineno-3-23></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-3-24 name=__codelineno-3-24 href=#__codelineno-3-24></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-3-25 name=__codelineno-3-25 href=#__codelineno-3-25></a>
<a id=__codelineno-3-26 name=__codelineno-3-26 href=#__codelineno-3-26></a> <span class=nv>js</span><span class=p>:</span> <span class=nc>types.js</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-3-27 name=__codelineno-3-27 href=#__codelineno-3-27></a><span class=w> </span><span class=p>(</span><span class=kd>function</span><span class=p>(){</span>
<a id=__codelineno-3-28 name=__codelineno-3-28 href=#__codelineno-3-28></a><span class=w> </span><span class=k>if</span><span class=w> </span><span class=p>(</span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelector</span><span class=p>(</span><span class=s2>&quot;.calendar-component&quot;</span><span class=p>))</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-3-29 name=__codelineno-3-29 href=#__codelineno-3-29></a><span class=w> </span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelector</span><span class=p>(</span><span class=s2>&quot;.calendar-component&quot;</span><span class=p>).</span><span class=nx>onclick</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=kd>function</span><span class=p>(){</span><span class=w> </span><span class=nx>alert</span><span class=p>(</span><span class=s2>&quot;Clicked calendar!&quot;</span><span class=p>);</span><span class=w> </span><span class=p>};</span>
<a id=__codelineno-3-30 name=__codelineno-3-30 href=#__codelineno-3-30></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-3-31 name=__codelineno-3-31 href=#__codelineno-3-31></a><span class=w> </span><span class=p>})()</span>
<a id=__codelineno-3-32 name=__codelineno-3-32 href=#__codelineno-3-32></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <h3 id=pycharm-or-other-jetbrains-ides>Pycharm (or other Jetbrains IDEs)<a class=headerlink href=#pycharm-or-other-jetbrains-ides title="Permanent link">¤</a></h3> <p>With PyCharm (or any other editor from Jetbrains), you don't need to use <code>types.django_html</code>, <code>types.css</code>, <code>types.js</code> since Pycharm uses <a href=https://www.jetbrains.com/help/pycharm/using-language-injections.html>language injections</a>.</p> <p>You only need to write the comments <code># language=&lt;lang&gt;</code> above the variables.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</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=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;date&quot;</span><span class=p>],</span>
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a> <span class=p>}</span>
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a>
<a id=__codelineno-4-10 name=__codelineno-4-10 href=#__codelineno-4-10></a> <span class=c1># language=HTML</span>
<a id=__codelineno-4-11 name=__codelineno-4-11 href=#__codelineno-4-11></a> <span class=nv>template</span><span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-4-12 name=__codelineno-4-12 href=#__codelineno-4-12></a> <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar-component&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-4-13 name=__codelineno-4-13 href=#__codelineno-4-13></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-4-14 name=__codelineno-4-14 href=#__codelineno-4-14></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-4-15 name=__codelineno-4-15 href=#__codelineno-4-15></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-4-16 name=__codelineno-4-16 href=#__codelineno-4-16></a>
<a id=__codelineno-4-17 name=__codelineno-4-17 href=#__codelineno-4-17></a> <span class=c1># language=CSS</span>
<a id=__codelineno-4-18 name=__codelineno-4-18 href=#__codelineno-4-18></a> <span class=nv>css</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-4-19 name=__codelineno-4-19 href=#__codelineno-4-19></a><span class=w> </span><span class=p>.</span><span class=nc>calendar-component</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-4-20 name=__codelineno-4-20 href=#__codelineno-4-20></a><span class=w> </span><span class=k>width</span><span class=p>:</span><span class=w> </span><span class=mi>200</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-4-21 name=__codelineno-4-21 href=#__codelineno-4-21></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=kc>pink</span><span class=p>;</span>
<a id=__codelineno-4-22 name=__codelineno-4-22 href=#__codelineno-4-22></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-4-23 name=__codelineno-4-23 href=#__codelineno-4-23></a><span class=w> </span><span class=p>.</span><span class=nc>calendar-component</span><span class=w> </span><span class=nt>span</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-4-24 name=__codelineno-4-24 href=#__codelineno-4-24></a><span class=w> </span><span class=k>font-weight</span><span class=p>:</span><span class=w> </span><span class=kc>bold</span><span class=p>;</span>
<a id=__codelineno-4-25 name=__codelineno-4-25 href=#__codelineno-4-25></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-4-26 name=__codelineno-4-26 href=#__codelineno-4-26></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-4-27 name=__codelineno-4-27 href=#__codelineno-4-27></a>
<a id=__codelineno-4-28 name=__codelineno-4-28 href=#__codelineno-4-28></a> <span class=c1># language=JS</span>
<a id=__codelineno-4-29 name=__codelineno-4-29 href=#__codelineno-4-29></a> <span class=nv>js</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-4-30 name=__codelineno-4-30 href=#__codelineno-4-30></a><span class=w> </span><span class=p>(</span><span class=kd>function</span><span class=p>(){</span>
<a id=__codelineno-4-31 name=__codelineno-4-31 href=#__codelineno-4-31></a><span class=w> </span><span class=k>if</span><span class=w> </span><span class=p>(</span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelector</span><span class=p>(</span><span class=s2>&quot;.calendar-component&quot;</span><span class=p>))</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-4-32 name=__codelineno-4-32 href=#__codelineno-4-32></a><span class=w> </span><span class=nb>document</span><span class=p>.</span><span class=nx>querySelector</span><span class=p>(</span><span class=s2>&quot;.calendar-component&quot;</span><span class=p>).</span><span class=nx>onclick</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=kd>function</span><span class=p>(){</span><span class=w> </span><span class=nx>alert</span><span class=p>(</span><span class=s2>&quot;Clicked calendar!&quot;</span><span class=p>);</span><span class=w> </span><span class=p>};</span>
<a id=__codelineno-4-33 name=__codelineno-4-33 href=#__codelineno-4-33></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-4-34 name=__codelineno-4-34 href=#__codelineno-4-34></a><span class=w> </span><span class=p>})()</span>
<a id=__codelineno-4-35 name=__codelineno-4-35 href=#__codelineno-4-35></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <h3 id=markdown-code-blocks-with-pygments>Markdown code blocks with Pygments<a class=headerlink href=#markdown-code-blocks-with-pygments title="Permanent link">¤</a></h3> <p><a href=https://pygments.org/ >Pygments</a> is a syntax highlighting library written in Python. It's also what's used by this documentation site (<a href=https://squidfunk.github.io/mkdocs-material/ >mkdocs-material</a>) to highlight code blocks.</p> <p>To write code blocks with syntax highlighting, you need to install the <a href=https://pypi.org/project/pygments-djc/ ><code>pygments-djc</code></a> package.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a>pip<span class=w> </span>install<span class=w> </span>pygments-djc
</code></pre></div> <p>And then initialize it by importing <code>pygments_djc</code> somewhere in your project:</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>import</span><span class=w> </span><span class=nn>pygments_djc</span>
</code></pre></div> <p>Now you can use the <code>djc_py</code> code block to write code blocks with syntax highlighting for components.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a>\```djc_py
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a>from django_components import Component, register
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a>@register(&quot;calendar&quot;)
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a>class Calendar(Component):
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> template = &quot;&quot;&quot;
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> &lt;div class=&quot;calendar-component&quot;&gt;
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a> Today&#39;s date is &lt;span&gt;{{ date }}&lt;/span&gt;
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a> &lt;/div&gt;
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a> &quot;&quot;&quot;
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a>
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a> css = &quot;&quot;&quot;
<a id=__codelineno-7-13 name=__codelineno-7-13 href=#__codelineno-7-13></a> .calendar-component {
<a id=__codelineno-7-14 name=__codelineno-7-14 href=#__codelineno-7-14></a> width: 200px;
<a id=__codelineno-7-15 name=__codelineno-7-15 href=#__codelineno-7-15></a> background: pink;
<a id=__codelineno-7-16 name=__codelineno-7-16 href=#__codelineno-7-16></a> }
<a id=__codelineno-7-17 name=__codelineno-7-17 href=#__codelineno-7-17></a> .calendar-component span {
<a id=__codelineno-7-18 name=__codelineno-7-18 href=#__codelineno-7-18></a> font-weight: bold;
<a id=__codelineno-7-19 name=__codelineno-7-19 href=#__codelineno-7-19></a> }
<a id=__codelineno-7-20 name=__codelineno-7-20 href=#__codelineno-7-20></a> &quot;&quot;&quot;
<a id=__codelineno-7-21 name=__codelineno-7-21 href=#__codelineno-7-21></a>\```
</code></pre></div> <p>Will be rendered as below. Notice that the CSS and HTML are highlighted correctly:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a>
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=nv>template</span><span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar-component&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a>
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=nv>css</span> <span class=o>=</span> <span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-8-12 name=__codelineno-8-12 href=#__codelineno-8-12></a><span class=w> </span><span class=p>.</span><span class=nc>calendar-component</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-8-13 name=__codelineno-8-13 href=#__codelineno-8-13></a><span class=w> </span><span class=k>width</span><span class=p>:</span><span class=w> </span><span class=mi>200</span><span class=kt>px</span><span class=p>;</span>
<a id=__codelineno-8-14 name=__codelineno-8-14 href=#__codelineno-8-14></a><span class=w> </span><span class=k>background</span><span class=p>:</span><span class=w> </span><span class=kc>pink</span><span class=p>;</span>
<a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a><span class=w> </span><span class=p>.</span><span class=nc>calendar-component</span><span class=w> </span><span class=nt>span</span><span class=w> </span><span class=p>{</span>
<a id=__codelineno-8-17 name=__codelineno-8-17 href=#__codelineno-8-17></a><span class=w> </span><span class=k>font-weight</span><span class=p>:</span><span class=w> </span><span class=kc>bold</span><span class=p>;</span>
<a id=__codelineno-8-18 name=__codelineno-8-18 href=#__codelineno-8-18></a><span class=w> </span><span class=p>}</span>
<a id=__codelineno-8-19 name=__codelineno-8-19 href=#__codelineno-8-19></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
</code></pre></div> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago" title="May 3, 2025 10:04:10"><span class=timeago datetime=2025-05-03T10:04:10+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="May 3, 2025 10:04:10">2025-05-03</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=../../../getting_started/rendering_components/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Rendering components"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Rendering components </div> </div> </a> <a href=../html_js_css_files/ class="md-footer__link md-footer__link--next" aria-label="Next: HTML / JS / CSS files"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> HTML / JS / CSS files </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/django-components/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../../assets/javascripts/bundle.13a4f30d.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