Action JS

The Action component triggers declarative behavior on other components or DOM elements.

Usage

This component can be directly imported and defined as a dependency of your application and then used directly with data-... attributes in your HTML.

In the following example, the buttons each have an Action component targeting the Transition component in the page.

The Action components can control multiple targets:

And specify an additional selector to filter the targeted components:

Simple usage with the Target component

The Target component is a companion of the Action component that can be used to easily target other DOM elements without creating specific component.

Combining it with Data components

Running an action on mount

The reserved mounted event runs the effect once, when the DOM has settled after the action mounts. It lets HTML drive an initial call without every component gaining its own option for it.

Listening to multiple events

The advanced HTML option on:<event>[.<modifier>] can be used to listen to multiple events on a single Action component.