mirror of
https://github.com/django-components/django-components.git
synced 2025-09-26 15:39:08 +00:00
Deployed 6ff2d78a
to dev with MkDocs 1.6.1 and mike 2.1.3
This commit is contained in:
parent
1149f08ec7
commit
33b81d0f2e
8 changed files with 342 additions and 325 deletions
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,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#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>
|
</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>
|
<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#L3117 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#L3113 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-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-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>
|
<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>
|
<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>
|
</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>
|
<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#L890 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#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>
|
||||||
<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-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-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>
|
<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>
|
||||||
|
@ -97,7 +97,7 @@
|
||||||
<a id=__codelineno-24-5 name=__codelineno-24-5 href=#__codelineno-24-5></a> <span class=nv>data-id</span><span class=o>=</span><span class=s2>"123"</span>
|
<a id=__codelineno-24-5 name=__codelineno-24-5 href=#__codelineno-24-5></a> <span class=nv>data-id</span><span class=o>=</span><span class=s2>"123"</span>
|
||||||
<a id=__codelineno-24-6 name=__codelineno-24-6 href=#__codelineno-24-6></a><span class=cp>%}</span><span class=x>></span>
|
<a id=__codelineno-24-6 name=__codelineno-24-6 href=#__codelineno-24-6></a><span class=cp>%}</span><span class=x>></span>
|
||||||
</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> <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><strong>See more usage examples in <a href=../../concepts/fundamentals/html_attributes#examples-for-html_attrs>HTML attributes</a>.</strong></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>
|
</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>
|
<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 "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>
|
||||||
<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-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>
|
||||||
|
|
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
|
@ -1,7 +1,7 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"version": "dev",
|
"version": "dev",
|
||||||
"title": "dev (223fc2c)",
|
"title": "dev (6ff2d78)",
|
||||||
"aliases": []
|
"aliases": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue