Actions

Actions are declared via the @action attribute (or @ for short):

<button
  @action="toggleClass#active"
  @target="panel"
>
  Toggle
</button>

<div id="panel">Content</div>

Multiple actions can be combined in one attribute, space-separated:

<button
  @action="addAttribute#aria-busy=true removeAttribute#aria-invalid"
  @target="form"
>
  Save
</button>

Use explicit event types by naming the event in the attribute:

<button
  @mouseenter="addClass#hovered"
  @mouseleave="removeClass#hovered"
>
  Hover
</button>
<input @change="addClass#dirty">

The @target attribute points to an element by its id. Use @targets for multiple elements via a CSS selector. If no target is given, the action runs on the element itself.

All of Attractive.js’s actions. Some require explicit import, see each action for details: