Modifiers

Modifiers attach behavior to an element. They look like helpers but apply to the element rather than producing a value:

<div {{set-height "400px"}}>fixed-height container</div>

The modifier runs on render and re-runs when its arguments change.

Dimension Modifiers

{{set-height value}}

Sets style.height:

<div {{set-height "400px"}}>...</div>
<div {{set-height (concat this.computedHeight "px")}}>...</div>

{{set-width value}}

Sets style.width.

{{set-max-height value}}

Sets style.maxHeight.

{{set-max-width value}}

Sets style.maxWidth.

{{set-z-index value}}

Sets style.zIndex.

{{set-container-dimensions}}

Sets the element's width and height to the dimensions of its parent.

{{constrain-view-section-width}}

Pins the element's width to the available view section width — handles responsive resize.

{{increase-height-by value}}

Increases the element's height by the given amount.

{{vertical-offset-by value}}

Translates the element vertically by the given amount.

{{translate-x value}}

Sets style.transform = translateX(...).

Image Modifiers

{{background-url url}}

Sets style.backgroundImage = url(...):

<div class="hero" {{background-url @company.banner_url}}>...</div>

{{fallback-img-src fallback}}

Sets src to the fallback if the original image fails to load:

<img src={{@user.avatar_url}} {{fallback-img-src "/assets/placeholder.png"}} />

Input Modifiers

{{imask mask}}

Applies an iMask input mask. The mask can be a preset name or a configuration object:

<input type="text" {{imask "phone"}} />
<input type="text" {{imask (hash mask="00/00/0000")}} />

Common presets:

Source