mirror of
https://github.com/django-components/django-components.git
synced 2025-12-09 22:11:06 +00:00
Deployed 46e524e3 to dev with MkDocs 1.6.1 and mike 2.1.3
This commit is contained in:
github-actions
parent
2599ada5d1
commit
3634438803
10 changed files with 1413 additions and 548 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
dev/objects.inv
BIN
dev/objects.inv
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -3,16 +3,16 @@
|
|||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1022 target=_blank>See source code</a></p> <p>Marks location where CSS link tags should be rendered after the whole HTML has been generated.</p> <p>Generally, this should be inserted into the <code><head></code> tag of the HTML.</p> <p>If the generated HTML does NOT contain any <code>{% component_css_dependencies %}</code> tags, CSS links are by default inserted into the <code><head></code> tag of the HTML. (See <a href=../../concepts/advanced/rendering_js_css/#default-js-css-locations>Default JS / CSS locations</a>)</p> <p>Note that there should be only one <code>{% component_css_dependencies %}</code> for the whole HTML document. If you insert this tag multiple times, ALL CSS links will be duplicately inserted into ALL these places.</p> <h2 id=component_js_dependencies>component_js_dependencies<a class=headerlink href=#component_js_dependencies title="Permanent link">¤</a></h2> <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_js_dependencies</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1044 target=_blank>See source code</a></p> <p>Marks location where JS link tags should be rendered after the whole HTML has been generated.</p> <p>Generally, this should be inserted at the end of the <code><body></code> tag of the HTML.</p> <p>If the generated HTML does NOT contain any <code>{% component_js_dependencies %}</code> tags, JS scripts are by default inserted at the end of the <code><body></code> tag of the HTML. (See <a href=../../concepts/advanced/rendering_js_css/#default-js-css-locations>Default JS / CSS locations</a>)</p> <p>Note that there should be only one <code>{% component_js_dependencies %}</code> for the whole HTML document. If you insert this tag multiple times, ALL JS scripts will be duplicately inserted into ALL these places.</p> <h2 id=component>component<a class=headerlink href=#component title="Permanent link">¤</a></h2> <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>component</span> <span class=o>*</span><span class=nv>args</span><span class=o>:</span> <span class=nv>Any</span><span class=o>,</span> <span class=o>**</span><span class=nv>kwargs</span><span class=o>:</span> <span class=nv>Any</span> <span class=o>[</span><span class=nv>only</span><span class=o>]</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>endcomponent</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L3312 target=_blank>See source code</a></p> <p>Renders one of the components that was previously registered with <a href=../api/#django_components.register><code>@register()</code></a> decorator.</p> <p>The <code>{% component %}</code> tag takes:</p> <ul> <li>Component's registered name as the first positional argument,</li> <li>Followed by any number of positional and keyword arguments.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L3367 target=_blank>See source code</a></p> <p>Renders one of the components that was previously registered with <a href=../api/#django_components.register><code>@register()</code></a> decorator.</p> <p>The <a href=../template_tags#component><code>{% component %}</code></a> tag takes:</p> <ul> <li>Component's registered name as the first positional argument,</li> <li>Followed by any number of positional and keyword arguments.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=cp>{%</span> <span class=k>load</span> <span class=nv>component_tags</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=x><div></span>
|
||||
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"button"</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=x></div></span>
|
||||
</code></pre></div> <p>The component name must be a string literal.</p> <h3 id=inserting-slot-fills>Inserting slot fills<a class=headerlink href=#inserting-slot-fills title="Permanent link">¤</a></h3> <p>If the component defined any <a href=../../concepts/fundamentals/slots/ >slots</a>, you can "fill" these slots by placing the <a href=#fill><code>{% fill %}</code></a> tags within the <code>{% component %}</code> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p>The component name must be a string literal.</p> <h3 id=inserting-slot-fills>Inserting slot fills<a class=headerlink href=#inserting-slot-fills title="Permanent link">¤</a></h3> <p>If the component defined any <a href=../../concepts/fundamentals/slots/ >slots</a>, you can "fill" these slots by placing the <a href=../template_tags#fill><code>{% fill %}</code></a> tags within the <a href=../template_tags#component><code>{% component %}</code></a> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=x> < 1 | 2 | 3 ></span>
|
||||
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p>You can even nest <a href=#fill><code>{% fill %}</code></a> tags within <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#if><code>{% if %}</code></a>, <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#for><code>{% for %}</code></a> and other tags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p>You can even nest <a href=../template_tags#fill><code>{% fill %}</code></a> tags within <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#if><code>{% if %}</code></a>, <a href=https://docs.djangoproject.com/en/5.2/ref/templates/builtins/#for><code>{% for %}</code></a> and other tags:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>if</span> <span class=nv>rows</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a><span class=x> < 1 | 2 | 3 ></span>
|
||||
|
|
@ -24,14 +24,14 @@
|
|||
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
|
||||
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=s2>"context_behavior"</span><span class=p>:</span> <span class=s2>"isolated"</span><span class=p>,</span>
|
||||
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=p>}</span>
|
||||
</code></pre></div> <h3 id=omitting-the-component-keyword>Omitting the <code>component</code> keyword<a class=headerlink href=#omitting-the-component-keyword title="Permanent link">¤</a></h3> <p>If you would like to omit the <code>component</code> keyword, and simply refer to your components by their registered names:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=cp>{%</span> <span class=k>button</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <h3 id=omitting-the-component-keyword>Omitting the component keyword<a class=headerlink href=#omitting-the-component-keyword title="Permanent link">¤</a></h3> <p>If you would like to omit the <code>component</code> keyword, and simply refer to your components by their registered names:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=cp>{%</span> <span class=k>button</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p>You can do so by setting the "shorthand" <a href=../../concepts/advanced/tag_formatters>Tag formatter</a> in the settings:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=c1># settings.py</span>
|
||||
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
|
||||
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=s2>"tag_formatter"</span><span class=p>:</span> <span class=s2>"django_components.component_shorthand_formatter"</span><span class=p>,</span>
|
||||
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a><span class=p>}</span>
|
||||
</code></pre></div> <h2 id=fill>fill<a class=headerlink href=#fill title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>name</span><span class=o>:</span> <span class=nv>str</span><span class=o>,</span> <span class=o>*,</span> <span class=nv>data</span><span class=o>:</span> <span class=nv>Optional</span><span class=o>[</span><span class=nv>str</span><span class=o>]</span> <span class=o>=</span> <span class=kp>None</span><span class=o>,</span> <span class=nv>fallback</span><span class=o>:</span> <span class=nv>Optional</span><span class=o>[</span><span class=nv>str</span><span class=o>]</span> <span class=o>=</span> <span class=kp>None</span><span class=o>,</span> <span class=nv>body</span><span class=o>:</span> <span class=nv>Union</span><span class=o>[</span><span class=nv>str</span><span class=o>,</span> <span class=nv>django.utils.safestring.SafeString</span><span class=o>,</span> <span class=nv>django_components.slots.SlotFunc</span><span class=o>[~</span><span class=nv>TSlotData</span><span class=o>],</span> <span class=nv>django_components.slots.Slot</span><span class=o>[~</span><span class=nv>TSlotData</span><span class=o>],</span> <span class=nv>NoneType</span><span class=o>]</span> <span class=o>=</span> <span class=kp>None</span><span class=o>,</span> <span class=nv>default</span><span class=o>:</span> <span class=nv>Optional</span><span class=o>[</span><span class=nv>str</span><span class=o>]</span> <span class=o>=</span> <span class=kp>None</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L968 target=_blank>See source code</a></p> <p>Use this tag to insert content into component's slots.</p> <p><code>{% fill %}</code> tag may be used only within a <code>{% component %}..{% endcomponent %}</code> block, and raises a <code>TemplateSyntaxError</code> if used outside of a component.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Name of the slot to insert this content into. Use <code>"default"</code> for the default slot.</li> <li><code>data</code> (str, optional): This argument allows you to access the data passed to the slot under the specified variable name. See <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</li> <li><code>fallback</code> (str, optional): This argument allows you to access the original content of the slot under the specified variable name. See <a href=../../concepts/fundamentals/slots#slot-fallback>Slot fallback</a>.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L988 target=_blank>See source code</a></p> <p>Use <a href=../template_tags#fill><code>{% fill %}</code></a> tag to insert content into component's <a href=../../concepts/fundamentals/slots>slots</a>.</p> <p><a href=../template_tags#fill><code>{% fill %}</code></a> tag may be used only within a <code>{% component %}..{% endcomponent %}</code> block, and raises a <code>TemplateSyntaxError</code> if used outside of a component.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Name of the slot to insert this content into. Use <code>"default"</code> for the <a href=../../concepts/fundamentals/slots#default-slot>default slot</a>.</li> <li><code>data</code> (str, optional): This argument allows you to access the data passed to the slot under the specified variable name. See <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</li> <li><code>fallback</code> (str, optional): This argument allows you to access the original content of the slot under the specified variable name. See <a href=../../concepts/fundamentals/slots#slot-fallback>Slot fallback</a>.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-12-3 name=__codelineno-12-3 href=#__codelineno-12-3></a><span class=x> < 1 | 2 | 3 ></span>
|
||||
<a id=__codelineno-12-4 name=__codelineno-12-4 href=#__codelineno-12-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||||
|
|
@ -66,23 +66,23 @@
|
|||
<a id=__codelineno-16-7 name=__codelineno-16-7 href=#__codelineno-16-7></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfor</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-16-8 name=__codelineno-16-8 href=#__codelineno-16-8></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-16-9 name=__codelineno-16-9 href=#__codelineno-16-9></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <h3 id=using-default-slot>Using default slot<a class=headerlink href=#using-default-slot title="Permanent link">¤</a></h3> <p>To access slot data and the fallback slot content on the default slot, use <code>{% fill %}</code> with <code>name</code> set to <code>"default"</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"button"</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <h3 id=using-default-slot>Using default slot<a class=headerlink href=#using-default-slot title="Permanent link">¤</a></h3> <p>To access slot data and the fallback slot content on the default slot, use <a href=../template_tags#fill><code>{% fill %}</code></a> with <code>name</code> set to <code>"default"</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"button"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-17-2 name=__codelineno-17-2 href=#__codelineno-17-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"default"</span> <span class=nv>data</span><span class=o>=</span><span class=s2>"slot_data"</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>"slot_fallback"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a><span class=x> You clicked me </span><span class=cp>{{</span> <span class=nv>slot_data.count</span> <span class=cp>}}</span><span class=x> times!</span>
|
||||
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=x> </span><span class=cp>{{</span> <span class=nv>slot_fallback</span> <span class=cp>}}</span>
|
||||
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-17-6 name=__codelineno-17-6 href=#__codelineno-17-6></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <h3 id=slot-fills-from-python>Slot fills from Python<a class=headerlink href=#slot-fills-from-python title="Permanent link">¤</a></h3> <p>You can pass a slot fill from Python to a component by setting the <code>body</code> kwarg on the <code>{% fill %}</code> tag.</p> <p>First pass a <a href=../api#django_components.Slot><code>Slot</code></a> instance to the template with the <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> method:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-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>Slot</span>
|
||||
</code></pre></div> <h3 id=slot-fills-from-python>Slot fills from Python<a class=headerlink href=#slot-fills-from-python title="Permanent link">¤</a></h3> <p>You can pass a slot fill from Python to a component by setting the <code>body</code> kwarg on the <a href=../template_tags#fill><code>{% fill %}</code></a> tag.</p> <p>First pass a <a href=../api#django_components.Slot><code>Slot</code></a> instance to the template with the <a href=../api#django_components.Component.get_template_data><code>get_template_data()</code></a> method:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-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>Slot</span>
|
||||
<a id=__codelineno-18-2 name=__codelineno-18-2 href=#__codelineno-18-2></a>
|
||||
<a id=__codelineno-18-3 name=__codelineno-18-3 href=#__codelineno-18-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-18-4 name=__codelineno-18-4 href=#__codelineno-18-4></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-18-5 name=__codelineno-18-5 href=#__codelineno-18-5></a> <span class=k>return</span> <span class=p>{</span>
|
||||
<a id=__codelineno-18-6 name=__codelineno-18-6 href=#__codelineno-18-6></a> <span class=s2>"my_slot"</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>"Hello, world!"</span><span class=p>),</span>
|
||||
<a id=__codelineno-18-7 name=__codelineno-18-7 href=#__codelineno-18-7></a> <span class=p>}</span>
|
||||
</code></pre></div> <p>Then pass the slot to the <code>{% fill %}</code> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-19-1 name=__codelineno-19-1 href=#__codelineno-19-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p>Then pass the slot to the <a href=../template_tags#fill><code>{% fill %}</code></a> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-19-1 name=__codelineno-19-1 href=#__codelineno-19-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-19-2 name=__codelineno-19-2 href=#__codelineno-19-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=nv>body</span><span class=o>=</span><span class=nv>my_slot</span> <span class=o>/</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-19-3 name=__codelineno-19-3 href=#__codelineno-19-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>If you define both the <code>body</code> kwarg and the <code>{% fill %}</code> tag's body, an error will be raised.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-20-1 name=__codelineno-20-1 href=#__codelineno-20-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>If you define both the <code>body</code> kwarg and the <a href=../template_tags#fill><code>{% fill %}</code></a> tag's body, an error will be raised.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-20-1 name=__codelineno-20-1 href=#__codelineno-20-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-20-2 name=__codelineno-20-2 href=#__codelineno-20-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=nv>body</span><span class=o>=</span><span class=nv>my_slot</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-20-3 name=__codelineno-20-3 href=#__codelineno-20-3></a><span class=x> ...</span>
|
||||
<a id=__codelineno-20-4 name=__codelineno-20-4 href=#__codelineno-20-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
</code></pre></div></p> <p>renders</p> <div class=highlight><pre><span></span><code><a id=__codelineno-25-1 name=__codelineno-25-1 href=#__codelineno-25-1></a><span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"my-class extra-class"</span> <span class=na>data-id</span><span class=o>=</span><span class=s>"123"</span><span class=p>></span>
|
||||
</code></pre></div> <p>See more usage examples in <a href=../../concepts/fundamentals/html_attributes#examples-for-html_attrs>HTML attributes</a>.</p> <h2 id=provide>provide<a class=headerlink href=#provide title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-26-1 name=__codelineno-26-1 href=#__codelineno-26-1></a><span class=cp>{%</span> <span class=k>provide</span> <span class=nv>name</span><span class=o>:</span> <span class=nv>str</span><span class=o>,</span> <span class=o>**</span><span class=nv>kwargs</span><span class=o>:</span> <span class=nv>Any</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-26-2 name=__codelineno-26-2 href=#__codelineno-26-2></a><span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L12 target=_blank>See source code</a></p> <p>The "provider" part of the <a href=../../concepts/advanced/provide_inject>provide / inject feature</a>. Pass kwargs to this tag to define the provider's data. Any components defined within the <code>{% provide %}..{% endprovide %}</code> tags will be able to access this data with <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</p> <p>This is similar to React's <a href=https://react.dev/learn/passing-data-deeply-with-context><code>ContextProvider</code></a>, or Vue's <a href=https://vuejs.org/guide/components/provide-inject><code>provide()</code></a>.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Provider name. This is the name you will then use in <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</li> <li><code>**kwargs</code>: Any extra kwargs will be passed as the provided data.</li> </ul> <p><strong>Example:</strong></p> <p>Provide the "user_data" in parent component:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"parent"</span><span class=p>)</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L12 target=_blank>See source code</a></p> <p>The <a href=../template_tags#provide><code>{% provide %}</code></a> tag is part of the "provider" part of the <a href=../../concepts/advanced/provide_inject>provide / inject feature</a>.</p> <p>Pass kwargs to this tag to define the provider's data.</p> <p>Any components defined within the <code>{% provide %}..{% endprovide %}</code> tags will be able to access this data with <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</p> <p>This is similar to React's <a href=https://react.dev/learn/passing-data-deeply-with-context><code>ContextProvider</code></a>, or Vue's <a href=https://vuejs.org/guide/components/provide-inject><code>provide()</code></a>.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Provider name. This is the name you will then use in <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</li> <li><code>**kwargs</code>: Any extra kwargs will be passed as the provided data.</li> </ul> <p><strong>Example:</strong></p> <p>Provide the "user_data" in parent component:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"parent"</span><span class=p>)</span>
|
||||
<a id=__codelineno-27-2 name=__codelineno-27-2 href=#__codelineno-27-2></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-27-3 name=__codelineno-27-3 href=#__codelineno-27-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>"""</span>
|
||||
<a id=__codelineno-27-4 name=__codelineno-27-4 href=#__codelineno-27-4></a> <span class=p><</span><span class=nt>div</span><span class=p>></span>
|
||||
|
|
@ -126,11 +126,11 @@
|
|||
<a id=__codelineno-28-11 name=__codelineno-28-11 href=#__codelineno-28-11></a> <span class=k>return</span> <span class=p>{</span>
|
||||
<a id=__codelineno-28-12 name=__codelineno-28-12 href=#__codelineno-28-12></a> <span class=s2>"user"</span><span class=p>:</span> <span class=n>user</span><span class=p>,</span>
|
||||
<a id=__codelineno-28-13 name=__codelineno-28-13 href=#__codelineno-28-13></a> <span class=p>}</span>
|
||||
</code></pre></div> <p>Notice that the keys defined on the <code>{% provide %}</code> tag are then accessed as attributes when accessing them with <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</p> <p>✅ Do this <div class=highlight><pre><span></span><code><a id=__codelineno-29-1 name=__codelineno-29-1 href=#__codelineno-29-1></a><span class=n>user</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>"user_data"</span><span class=p>)</span><span class=o>.</span><span class=n>user</span>
|
||||
</code></pre></div> <p>Notice that the keys defined on the <a href=../template_tags#provide><code>{% provide %}</code></a> tag are then accessed as attributes when accessing them with <a href=../api#django_components.Component.inject><code>Component.inject()</code></a>.</p> <p>✅ Do this <div class=highlight><pre><span></span><code><a id=__codelineno-29-1 name=__codelineno-29-1 href=#__codelineno-29-1></a><span class=n>user</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>"user_data"</span><span class=p>)</span><span class=o>.</span><span class=n>user</span>
|
||||
</code></pre></div></p> <p>❌ Don't do this <div class=highlight><pre><span></span><code><a id=__codelineno-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=n>user</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>"user_data"</span><span class=p>)[</span><span class=s2>"user"</span><span class=p>]</span>
|
||||
</code></pre></div></p> <h2 id=slot>slot<a class=headerlink href=#slot title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-31-1 name=__codelineno-31-1 href=#__codelineno-31-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>name</span><span class=o>:</span> <span class=nv>str</span><span class=o>,</span> <span class=o>**</span><span class=nv>kwargs</span><span class=o>:</span> <span class=nv>Any</span> <span class=o>[</span><span class=nv>default</span><span class=o>]</span> <span class=o>[</span><span class=nv>required</span><span class=o>]</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-31-2 name=__codelineno-31-2 href=#__codelineno-31-2></a><span class=cp>{%</span> <span class=k>endslot</span> <span class=cp>%}</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L494 target=_blank>See source code</a></p> <p>Slot tag marks a place inside a component where content can be inserted from outside.</p> <p><a href=../../concepts/fundamentals/slots>Learn more</a> about using slots.</p> <p>This is similar to slots as seen in <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot>Web components</a>, <a href=https://vuejs.org/guide/components/slots.html>Vue</a> or <a href=https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children>React's <code>children</code></a>.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Registered name of the component to render</li> <li><code>default</code>: Optional flag. If there is a default slot, you can pass the component slot content without using the <a href=#fill><code>{% fill %}</code></a> tag. See <a href=../../concepts/fundamentals/slots#default-slot>Default slot</a></li> <li><code>required</code>: Optional flag. Will raise an error if a slot is required but not given.</li> <li><code>**kwargs</code>: Any extra kwargs will be passed as the slot data.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-32-1 name=__codelineno-32-1 href=#__codelineno-32-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"child"</span><span class=p>)</span>
|
||||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L513 target=_blank>See source code</a></p> <p><a href=../template_tags#slot><code>{% slot %}</code></a> tag marks a place inside a component where content can be inserted from outside.</p> <p><a href=../../concepts/fundamentals/slots>Learn more</a> about using slots.</p> <p>This is similar to slots as seen in <a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot>Web components</a>, <a href=https://vuejs.org/guide/components/slots.html>Vue</a> or <a href=https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children>React's <code>children</code></a>.</p> <p><strong>Args:</strong></p> <ul> <li><code>name</code> (str, required): Registered name of the component to render</li> <li><code>default</code>: Optional flag. If there is a default slot, you can pass the component slot content without using the <a href=../template_tags#fill><code>{% fill %}</code></a> tag. See <a href=../../concepts/fundamentals/slots#default-slot>Default slot</a></li> <li><code>required</code>: Optional flag. Will raise an error if a slot is required but not given.</li> <li><code>**kwargs</code>: Any extra kwargs will be passed as the slot data.</li> </ul> <p><strong>Example:</strong></p> <div class=highlight><pre><span></span><code><a id=__codelineno-32-1 name=__codelineno-32-1 href=#__codelineno-32-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"child"</span><span class=p>)</span>
|
||||
<a id=__codelineno-32-2 name=__codelineno-32-2 href=#__codelineno-32-2></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-32-3 name=__codelineno-32-3 href=#__codelineno-32-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>"""</span>
|
||||
<a id=__codelineno-32-4 name=__codelineno-32-4 href=#__codelineno-32-4></a> <span class=p><</span><span class=nt>div</span><span class=p>></span>
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
<a id=__codelineno-33-13 name=__codelineno-33-13 href=#__codelineno-33-13></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-33-14 name=__codelineno-33-14 href=#__codelineno-33-14></a> <span class=p></</span><span class=nt>div</span><span class=p>></span>
|
||||
<a id=__codelineno-33-15 name=__codelineno-33-15 href=#__codelineno-33-15></a> <span class=sd>"""</span>
|
||||
</code></pre></div> <h3 id=slot-data>Slot data<a class=headerlink href=#slot-data title="Permanent link">¤</a></h3> <p>Any extra kwargs will be considered as slot data, and will be accessible in the <a href=#fill><code>{% fill %}</code></a> tag via fill's <code>data</code> kwarg:</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-34-1 name=__codelineno-34-1 href=#__codelineno-34-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"child"</span><span class=p>)</span>
|
||||
</code></pre></div> <h3 id=slot-data>Slot data<a class=headerlink href=#slot-data title="Permanent link">¤</a></h3> <p>Any extra kwargs will be considered as slot data, and will be accessible in the <a href=../template_tags#fill><code>{% fill %}</code></a> tag via fill's <code>data</code> kwarg:</p> <p>Read more about <a href=../../concepts/fundamentals/slots#slot-data>Slot data</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-34-1 name=__codelineno-34-1 href=#__codelineno-34-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"child"</span><span class=p>)</span>
|
||||
<a id=__codelineno-34-2 name=__codelineno-34-2 href=#__codelineno-34-2></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-34-3 name=__codelineno-34-3 href=#__codelineno-34-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>"""</span>
|
||||
<a id=__codelineno-34-4 name=__codelineno-34-4 href=#__codelineno-34-4></a> <span class=p><</span><span class=nt>div</span><span class=p>></span>
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
<a id=__codelineno-35-10 name=__codelineno-35-10 href=#__codelineno-35-10></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-35-11 name=__codelineno-35-11 href=#__codelineno-35-11></a> <span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
||||
<a id=__codelineno-35-12 name=__codelineno-35-12 href=#__codelineno-35-12></a> <span class=sd>"""</span>
|
||||
</code></pre></div> <h3 id=slot-fallback>Slot fallback<a class=headerlink href=#slot-fallback title="Permanent link">¤</a></h3> <p>The content between the <code>{% slot %}..{% endslot %}</code> tags is the fallback content that will be rendered if no fill is given for the slot.</p> <p>This fallback content can then be accessed from within the <a href=#fill><code>{% fill %}</code></a> tag using the fill's <code>fallback</code> kwarg. This is useful if you need to wrap / prepend / append the original slot's content.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-36-1 name=__codelineno-36-1 href=#__codelineno-36-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"child"</span><span class=p>)</span>
|
||||
</code></pre></div> <h3 id=slot-fallback>Slot fallback<a class=headerlink href=#slot-fallback title="Permanent link">¤</a></h3> <p>The content between the <code>{% slot %}..{% endslot %}</code> tags is the fallback content that will be rendered if no fill is given for the slot.</p> <p>This fallback content can then be accessed from within the <a href=../template_tags#fill><code>{% fill %}</code></a> tag using the fill's <code>fallback</code> kwarg. This is useful if you need to wrap / prepend / append the original slot's content.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-36-1 name=__codelineno-36-1 href=#__codelineno-36-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>"child"</span><span class=p>)</span>
|
||||
<a id=__codelineno-36-2 name=__codelineno-36-2 href=#__codelineno-36-2></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
||||
<a id=__codelineno-36-3 name=__codelineno-36-3 href=#__codelineno-36-3></a> <span class=nv>template</span> <span class=o>=</span> <span class=sd>"""</span>
|
||||
<a id=__codelineno-36-4 name=__codelineno-36-4 href=#__codelineno-36-4></a> <span class=p><</span><span class=nt>div</span><span class=p>></span>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
[
|
||||
{
|
||||
"version": "dev",
|
||||
"title": "dev (abc6be3)",
|
||||
"title": "dev (46e524e)",
|
||||
"aliases": []
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue