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

Listening to multiple events

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