HTML attributes

The attributes allow to provide additional information to an HTML element.

GOX supports static attributes, dynamic attributes and boolean attributes.

Static attributes

Static attributes use literary values.

return <input type="text" placeholder="Username" maxlength="20" />

Static attributes are written exactly the same as in HTML.

Dynamic attributes

When the value of an attribute is to be calculated during the rendering, a expression.

className := "vip"
return <h1 class={{ className }}>
    Hello GOX
</h1>

More complex expressions can also be used.

return <h1 class={{ "user-" + className }}>
    Hello GOX
</h1>

The rules of expressions are documented in the chapter of expressions.

Boolean Attributes

GOX supports the Boolean attributes defined by HTML.

These attributes do not require an explicit value.

<input disabled />
<input checked />
<option selected />

The presence of the attribute indicates that its value is true.

Dynamic Boolean Attributes

Expressions should not be used to control the presence of a Boolean attribute.

For example:

<input disabled={{ condition }} />

Although the code is valid, the result will be an HTML attribute with a textual value.

<input disabled="true" />
<input disabled="false" />

This does not add or remove the attribute of the element.

To control the presence of a Boolean attribute, use :spreadThe following section shows how to add it to the map only when the condition is met.

The :spread attribute

GOX incorporates the special attribute :spread, which allows to expand a set of attributes over an HTML element.

While the expressions allow to calculate the value of an attribute, :spread allows to modify the set of attributes present in an element.

attrs := map[string]string{
    "class": "vip",
}

if condition {
    attrs["disabled"] = ""
}

return <input type="text" :spread={{ attrs }} />

Each map key represents the name of an HTML attribute and each value represents its content. In this example, class is always present and disabled It only appears when condition It's true.

:spread only accept type values map[string]string.

In addition to allowing the dynamically to build the set of attributes of an element, :spread It can also be used to reuse a set of common attributes.

Invalid attributes

Dynamic attributes should always use an expression.

For example:

class=className

It's invalid.

It should be written:

class={{ className }}

The expressions used as an attribute value should also not be placed between quotes.

For example:

<span class="{{ className }}"></span>

It's invalid.

The expressions completely replace the value of the attribute, so they are not part of a text string and should not be written in quotes.

It should be written:

<span class={{ className }}></span>

Similarly, :spread requires a type value map[string]string.

The following examples are invalid:

map[string]any
map[string]int

Integration with Go

GOX does not incorporate its own system to build attributes.

Dynamic attributes use the Go language expression system, while :spread use a map[string]string to expand a set of attributes over an HTML element.

This allows you to build attributes using variables, operators and calls to functions without abandoning language.

Best practices

As a general recommendation:

• It uses static attributes whenever possible.
• It uses dynamic attributes when it only changes the value of an attribute.
• Use :spread when you need to build dynamically or reuse a set of attributes.
• Use :spread to add or remove boolean attributes dynamically.