mirror of
https://github.com/wrabit/django-cotton.git
synced 2025-08-04 15:18:20 +00:00
added to docs, changed example, merged build fix
This commit is contained in:
parent
6cec1c6a8a
commit
3f112f9243
2 changed files with 20 additions and 9 deletions
|
@ -240,6 +240,10 @@ context = {
|
|||
{% endcotton_verbatim %}{% endverbatim %}
|
||||
</c-snippet>
|
||||
|
||||
<c-note>
|
||||
You can also proxy the whole attrs dictionary to other components. <code>{{ '<c-comp :attrs="attrs" />'|force_escape }}</code> This is useful when you want to pass all attributes from one component to another without having to specify each one individually. <a href="{% url 'usage-patterns' %}#attribute-proxying">More info</a>.
|
||||
</c-note>
|
||||
|
||||
<c-hr id="vars" />
|
||||
|
||||
<h2>6. Defining Local Variables with <code>{{ '<c-vars />'|force_escape }}</code></h2>
|
||||
|
|
|
@ -73,17 +73,24 @@ templates/
|
|||
|
||||
<p>A powerful pattern enabled by the special <code>:attrs</code> dynamic attribute is the ability to create wrapper components that proxy all their attributes to an inner component:</p>
|
||||
|
||||
<c-snippet label="cotton/proxy_component.html">{% cotton_verbatim %}{% verbatim %}
|
||||
<c-inner-component :attrs="attrs">{{ slot }}</c-inner-component>
|
||||
<c-snippet label="view.html">{% cotton_verbatim %}{% verbatim %}
|
||||
<c-outer
|
||||
class="outer-class"
|
||||
:count="42"
|
||||
:enabled="False">
|
||||
Content passed to inner component
|
||||
</c-outer>
|
||||
{% endcotton_verbatim %}{% endverbatim %}</c-snippet>
|
||||
|
||||
<c-snippet label="view.html">{% cotton_verbatim %}{% verbatim %}
|
||||
<c-proxy-component
|
||||
class="outer-class"
|
||||
:count="42"
|
||||
:enabled="False">
|
||||
Content passed to inner component
|
||||
</c-proxy-component>
|
||||
<c-snippet label="cotton/outer.html">{% cotton_verbatim %}{% verbatim %}
|
||||
<c-inner :attrs="attrs">{{ slot }}</c-inner>
|
||||
{% endcotton_verbatim %}{% endverbatim %}</c-snippet>
|
||||
|
||||
<c-snippet label="cotton/inner.html">{% cotton_verbatim %}{% verbatim %}
|
||||
{{ class }} <!-- "outer-class" -->
|
||||
{{ count }} <!-- 42 -->
|
||||
{{ enabled }} <!-- False -->
|
||||
{{ slot }} <!-- Content passed to inner component -->
|
||||
{% endcotton_verbatim %}{% endverbatim %}</c-snippet>
|
||||
|
||||
<p>The attributes are passed through to the inner component with their original types preserved (strings, numbers, booleans, lists, etc.), making this pattern ideal for creating higher-order components.</p>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue