mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-08-18 21:20:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Deployed 1e4b556 to dev with MkDocs 1.6.1 and mike 2.1.3

Browse source
This commit is contained in:
github-actions 2025-01-07 18:35:28 +00:00
parent d527e10af5
commit 952396ba51
41 changed files with 482 additions and 465 deletions
Download patch file Download diff file Expand all files Collapse all files

10
dev/concepts/fundamentals/html_attributes/index.html
View file

@ -49,7 +49,7 @@
<a id=__codelineno-16-10 name=__codelineno-16-10 href=#__codelineno-16-10></a> <span class=s2>&quot;role&quot;</span><span class=p>:</span> <span class=s2>&quot;button&quot;</span><span class=p>,</span>
<a id=__codelineno-16-11 name=__codelineno-16-11 href=#__codelineno-16-11></a><span class=p>}</span>
</code></pre></div> <p>Then:</p> <ul> <li>Empty tag <br> <code>{% html_attr %}</code></li> </ul> <p>renders (empty string): <br> <code></code></p> <ul> <li>Only kwargs <br> <code>{% html_attr class="some-class" class=class_from_var data-id="123" %}</code></li> </ul> <p>renders: <br> <code>class="some-class from-var" data-id="123"</code></p> <ul> <li>Only attrs <br> <code>{% html_attr attrs %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Attrs as kwarg <br> <code>{% html_attr attrs=attrs %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Only defaults (as kwarg) <br> <code>{% html_attr defaults=defaults %}</code></li> </ul> <p>renders: <br> <code>class="from-defaults" role="button"</code></p> <ul> <li>Attrs using the <code>prefix:key=value</code> construct <br> <code>{% html_attr attrs:class="from-attrs" attrs:type="submit" %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Defaults using the <code>prefix:key=value</code> construct <br> <code>{% html_attr defaults:class="from-defaults" %}</code></li> </ul> <p>renders: <br> <code>class="from-defaults" role="button"</code></p> <ul> <li>All together (1) - attrs and defaults as positional args: <br> <code>{% html_attrs attrs defaults class="added_class" class=class_from_var data-id=123 %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" role="button" data-id=123</code></p> <ul> <li>All together (2) - attrs and defaults as kwargs args: <br> <code>{% html_attrs class="added_class" class=class_from_var data-id=123 attrs=attrs defaults=defaults %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" role="button" data-id=123</code></p> <ul> <li>All together (3) - mixed: <br> <code>{% html_attrs attrs defaults:class="default-class" class="added_class" class=class_from_var data-id=123 %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" data-id=123</code></p> <h2 id=full-example-for-html_attrs>Full example for <code>html_attrs</code><a class=headerlink href=#full-example-for-html_attrs title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span>
<a id=__codelineno-17-2 name=__codelineno-17-2 href=#__codelineno-17-2></a><span class=k>class</span> <span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-17-2 name=__codelineno-17-2 href=#__codelineno-17-2></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a> <span class=n>template</span><span class=p>:</span> <span class=n>t</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-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=s2> &lt;div</span>
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a><span class=s2> {% html_attrs attrs</span>
@ -63,7 +63,7 @@
<a id=__codelineno-17-13 name=__codelineno-17-13 href=#__codelineno-17-13></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-17-14 name=__codelineno-17-14 href=#__codelineno-17-14></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-17-15 name=__codelineno-17-15 href=#__codelineno-17-15></a>
<a id=__codelineno-17-16 name=__codelineno-17-16 href=#__codelineno-17-16></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>,</span> <span class=n>attrs</span><span class=p>:</span> <span class=nb>dict</span><span class=p>):</span>
<a id=__codelineno-17-16 name=__codelineno-17-16 href=#__codelineno-17-16></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>,</span> <span class=n>attrs</span><span class=p>:</span> <span class=nb>dict</span><span class=p>):</span>
<a id=__codelineno-17-17 name=__codelineno-17-17 href=#__codelineno-17-17></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-17-18 name=__codelineno-17-18 href=#__codelineno-17-18></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>date</span><span class=p>,</span>
<a id=__codelineno-17-19 name=__codelineno-17-19 href=#__codelineno-17-19></a> <span class=s2>&quot;attrs&quot;</span><span class=p>:</span> <span class=n>attrs</span><span class=p>,</span>
@ -71,7 +71,7 @@
<a id=__codelineno-17-21 name=__codelineno-17-21 href=#__codelineno-17-21></a> <span class=p>}</span>
<a id=__codelineno-17-22 name=__codelineno-17-22 href=#__codelineno-17-22></a>
<a id=__codelineno-17-23 name=__codelineno-17-23 href=#__codelineno-17-23></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;parent&quot;</span><span class=p>)</span>
<a id=__codelineno-17-24 name=__codelineno-17-24 href=#__codelineno-17-24></a><span class=k>class</span> <span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-17-24 name=__codelineno-17-24 href=#__codelineno-17-24></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-17-25 name=__codelineno-17-25 href=#__codelineno-17-25></a> <span class=n>template</span><span class=p>:</span> <span class=n>t</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-17-26 name=__codelineno-17-26 href=#__codelineno-17-26></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;my_comp&quot;</span>
<a id=__codelineno-17-27 name=__codelineno-17-27 href=#__codelineno-17-27></a><span class=s2> date=date</span>
@ -81,7 +81,7 @@
<a id=__codelineno-17-31 name=__codelineno-17-31 href=#__codelineno-17-31></a><span class=s2> / %}</span>
<a id=__codelineno-17-32 name=__codelineno-17-32 href=#__codelineno-17-32></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-17-33 name=__codelineno-17-33 href=#__codelineno-17-33></a>
<a id=__codelineno-17-34 name=__codelineno-17-34 href=#__codelineno-17-34></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>):</span>
<a id=__codelineno-17-34 name=__codelineno-17-34 href=#__codelineno-17-34></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>):</span>
<a id=__codelineno-17-35 name=__codelineno-17-35 href=#__codelineno-17-35></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-17-36 name=__codelineno-17-36 href=#__codelineno-17-36></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>datetime</span><span class=o>.</span><span class=n>now</span><span class=p>(),</span>
<a id=__codelineno-17-37 name=__codelineno-17-37 href=#__codelineno-17-37></a> <span class=s2>&quot;json_data&quot;</span><span class=p>:</span> <span class=n>json</span><span class=o>.</span><span class=n>dumps</span><span class=p>({</span><span class=s2>&quot;value&quot;</span><span class=p>:</span> <span class=mi>456</span><span class=p>})</span>
@ -103,7 +103,7 @@
<a id=__codelineno-21-6 name=__codelineno-21-6 href=#__codelineno-21-6></a><span class=p>&gt;</span>
<a id=__codelineno-21-7 name=__codelineno-21-7 href=#__codelineno-21-7></a> ...
<a id=__codelineno-21-8 name=__codelineno-21-8 href=#__codelineno-21-8></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <h2 id=rendering-html-attributes-outside-of-templates>Rendering HTML attributes outside of templates<a class=headerlink href=#rendering-html-attributes-outside-of-templates title="Permanent link">¤</a></h2> <p>If you need to use serialize HTML attributes outside of Django template and the <code>html_attrs</code> tag, you can use <code>attributes_to_string</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=kn>from</span> <span class=nn>django_components.attributes</span> <span class=kn>import</span> <span class=n>attributes_to_string</span>
</code></pre></div> <h2 id=rendering-html-attributes-outside-of-templates>Rendering HTML attributes outside of templates<a class=headerlink href=#rendering-html-attributes-outside-of-templates title="Permanent link">¤</a></h2> <p>If you need to use serialize HTML attributes outside of Django template and the <code>html_attrs</code> tag, you can use <code>attributes_to_string</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components.attributes</span><span class=w> </span><span class=kn>import</span> <span class=n>attributes_to_string</span>
<a id=__codelineno-22-2 name=__codelineno-22-2 href=#__codelineno-22-2></a>
<a id=__codelineno-22-3 name=__codelineno-22-3 href=#__codelineno-22-3></a><span class=n>attrs</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-22-4 name=__codelineno-22-4 href=#__codelineno-22-4></a> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class text-red pa-4&quot;</span><span class=p>,</span>