Component tag

A <c- tag renders the component template with the same name.

<c-button>Save</c-button>
<c-button />

{% cotton button %}Save{% endcotton %}
{% cotton button /%}

Both render cotton/button.html. The content between the tags is available in the component as {{ slot }}.

Resolving the name

Dots are folders. Hyphens become underscores in the filename, see COTTON_SNAKE_CASED_NAMES to keep them as hyphens. The cotton folder can live in any app's templates directory or the project's, see COTTON_DIR to rename it.

only

Renders the component with none of the parent's context. It sees only its own attributes, not even context processor output like request or user.

<c-card only title="Isolated" />

{% cotton card only title="Isolated" /%}

Project-wide isolation that keeps context processors is a setting, COTTON_ISOLATE_BY_DEFAULT.

Dynamic components

<c-component> with an is attribute resolves the component name at render time. is is not passed on to the component and doesn't appear in {{ attrs }}.

<c-component is="icons.{{ name }}" />
<c-component :is="component_name" />

{% cotton component is="icons.{{ name }}" /%}
{% cotton component :is="component_name" /%}

Template tag syntax

Every tag has a native form:

{% cotton button variant="primary" %}Save{% endcotton %}
{% cotton button / %}
{% cotton component is="icons.star" / %}

The tags are registered as builtins, so there is nothing to {% load %}.