mirror of
https://github.com/django-components/django-components.git
synced 2025-09-26 15:39:08 +00:00
Deployed 2e08af9a
to dev with MkDocs 1.6.1 and mike 2.1.3
This commit is contained in:
parent
06c057263b
commit
1e5e68c792
7 changed files with 472 additions and 476 deletions
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@
|
|||
</code></pre></div> <p><a href=https://github.com/django-components/django-components/tree/master/src/django_components/templatetags/component_tags.py#L1024 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#L1046 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#L3110 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#L3098 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>
|
||||
<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>
|
||||
|
@ -31,7 +31,7 @@
|
|||
<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#L900 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. Runtime checks should prohibit other usages.</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>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> <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> </ul> <p><strong>Examples:</strong></p> <p>Basic usage: <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#L899 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. Runtime checks should prohibit other usages.</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>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> <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> </ul> <p><strong>Examples:</strong></p> <p>Basic usage: <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>
|
||||
|
@ -130,7 +130,7 @@
|
|||
</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#L435 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#L436 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>
|
||||
<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=n>template</span> <span class=o>=</span> <span class=s2>"""</span>
|
||||
<a id=__codelineno-32-4 name=__codelineno-32-4 href=#__codelineno-32-4></a><span class=s2> <div></span>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue