c-vars

<c-vars /> declares the attributes a component uses for itself. A declared key is removed from {{ attrs }} and becomes a template variable, with a default if one is given. One <c-vars /> per component, normally at the top.

<c-vars type="text" label errors />

<label>{{ label }}</label>
<input type="{{ type }}" {{ attrs }} />

{% cotton:vars type="text" label errors %}

<label>{{ label }}</label>
<input type="{{ type }}" {{ attrs }} />

Defaults

A value is the default, used when the parent doesn't pass that attribute. The parent's value always wins.

<c-vars type="text" size="md" />

{% cotton:vars type="text" size="md" %}

Claiming without a default

A key on its own keeps the attribute out of {{ attrs }} without setting anything. The variable is undefined unless the parent passes it, so {% if errors %} works as expected.

<c-vars label errors />

{% cotton:vars label errors %}

Dynamic defaults

Prefix with : to give a Python literal or a context variable as the default, the same way as a dynamic attribute.

<c-vars :items="[]" :open="False" :user="request.user" />

{% cotton:vars :items="[]" :open="False" :user="request.user" %}

A bare value without quotes is treated as dynamic too, falling back to the literal string if it isn't a variable or literal:

<c-vars enabled=False />

{% cotton:vars enabled=False %}

Template expressions in defaults

A quoted default can contain template syntax, rendered when the component renders:

<c-vars label="{% trans 'Loading' %}" css="btn btn-{{ size }}" />

{% cotton:vars label="{% trans 'Loading' %}" css="btn btn-{{ size }}" %}

Merging classes

Add :merge to class and the parent's classes are appended to the default instead of replacing it. Only class can be merged.

<c-vars class:merge="btn btn-primary" />

<button class="{{ class }}" {{ attrs }}>{{ slot }}</button>

{% cotton:vars class:merge="btn btn-primary" %}

<button class="{{ class }}" {{ attrs }}>{{ slot }}</button>

<c-button class="w-full" />
<!-- <button class="btn btn-primary w-full"> -->

{% cotton button class="w-full" /%}
<!-- <button class="btn btn-primary w-full"> -->

A dynamic :class from the parent merges the same way. {{ attrs.class }} holds the merged value.

Names

Hyphenated keys are available as snake_case variables: data-id becomes {{ data_id }}. If the parent passes a named slot with the same name as a declared key, the slot takes precedence.

Template tag syntax

{% cotton:vars type="text" label errors %}