... Attribute Tag#

HTML attributes regularly need to be set programmatically in a template. To aid in this, Tetra has the "attribute tag", available as ... (three periods) as it "unpacks" the arguments provided to it as HTML attributes.

The attributes tag is automaticity available in you component templates. In other templates be sure to {% load tetra %}.

{% load tetra %}
<div {% ... a_dict_of_attributes class="test" class=list_of_classes 
  checked=a_boolian_varible %}>

All Tetra components have a attrs context available, which is a dict of attributes that have been passed to the component when it is included in a template with the @ tag. It can be unpacked as HTML attributes on your root node:

<div {% ... attrs %}>

The attribute tag can take the following arguments:

  • A (not keyword) variable resolving to a dict of attribute names mapped to values. This is what the attrs context variable is.

  • An attribute name and literal value such as class="test".

  • An attribute name and context variable such as class=list_of_classes.

The attributes are processed left to right, and if there is a duplicate attribute name the last occurrence is used (there is a special case for class and style). This allows you to provide both default values and overrides. In the example below the id has a default value of "test" but can be overridden when the component is used via the attrs variable. It also forces the title attribute to a specific value overriding any set in attrs.

<div {% ... id="test" attrs title="Forced Title" %}>

Boolean attributes#

Boolean values have a special case. If an attribute is set to False it is not included in the final HTML. If an attribute is set to True it is included in the HTML as just the attribute name, such as <input checked>.

Class attribute#

The class attribute treats each class name as an individual option concatenating all passed classes. In the example below all classes will appear on the final element:

{# where the component is used #}
{% @ component attrs: class="class1" %}

{# component template with a_list_of_classes=["classA", "classB"] #}
<div {% ... class="class2" attrs class="class3 class4" class=a_list_of_classes %}>

Resulting html:

<div class="class2 class1 class3 class4 classA classB">

Style attribute#

There is a special case for the style attribute, similar to the class attribute. All passed styes are split into individual property names with the final value for property name used in the final attribute.

<div {% ... style="color:red; font-size:2em;" style="color:blue;" %}>

Would result in:

<div style="font-size:2em; color:blue;">

Note: Tetra currently does not understand that a style property can be applied in multiple ways. Therefore, if you pass both margin-top: 1em and margin: 2em 0 0 0, both will appear in the final HTML style tag, with the final property taking precedence in the browser.

Conditional values#

The if and else template filters are provided to enable conditional attribute values:

<div {% ... class="class1"|if:variable_name|else:"class2" %}>

See the documentation for the if and else template filters.